Skip to content

Clearing both on control class has side-effects #2166

@Heliosmaster

Description

@Heliosmaster

This is about Bulma.

Overview of the problem

This is about the Bulma CSS framework
I'm using Bulma version [0.7.2]
I am sure this issue is not a duplicate

Description

The new version 0.7.2 seems to introduce a regression with images pulled right and a field element.

It was introduced in #1749. I realize that it was introduced to explicitly address this behavior in a specific case, but as my example suggest, it wasn't always a problem.

Rather than adding a new property to the control class, which is very context-dependent, i would have used is-clearfix as a class in the example quoted on #1749

If the code won't be reverted, any advice on how should I change the markup?

This is the source of the following example:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>My custom Bulma website</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
    </head>
    <body>
        <div class="box">
            <img class="is-pulled-right" src="https://bulma.io/images/css-book/css-in-44-minutes-book-cover.png" width="100px">
            <h3 class="subtitle">Subtitle</h3>
            <div class="field"><div class="control"><label class="checkbox"><input type="checkbox" value="on"><img class="filter-icon" src="https://bulma.io/images/index/js-frameworks.png" width="40px"><span>Text</span></div></label></div>
        </div>
    </body>
</html>

Because of the clear:both in the control, we have the different behavior:

0.7.1

bulmabug071

0.7.2

bulmabug072

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions