Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Micro clearfix hack breaks "white-space: pre-wrap" #20284

Closed
PowerGamer1 opened this issue Jul 12, 2016 · 6 comments
Closed

Micro clearfix hack breaks "white-space: pre-wrap" #20284

PowerGamer1 opened this issue Jul 12, 2016 · 6 comments
Labels
css v3 v4
Milestone
v4.0.0-alpha.6

Comments

@PowerGamer1
Copy link

Bootstrap uses http://nicolasgallagher.com/micro-clearfix-hack/ for a lot of its elements. This particular method of cleafixing introduces bugs when an element being clearfixed is set to white-space: pre-wrap.

For example, I need Bootstrap panel body to have a preformatted content, so I set a style: .panel-body { white-space: pre-wrap }. This makes Firefox 47.0.1 and Chrome 51.0.2704.106 (IE11 and Edge somehow are not affected) display extra spaces created by micro clearfix hack (those spaces are not supposed to exist or be visible on the page at all) at the top and bottom of panel body. As a result the panel body looks like it has an extra new line before and after "Panel body" text.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet">
    <style>
        .panel-body { white-space: pre-wrap }
    </style>
</head>
<body style="margin: 10px">
    <div class="panel panel-default">
        <div class="panel-heading">Panel title</div>
        <div class="panel-body">Panel        body</div>
    </div>
</body>
</html>

First screenshot is without .panel-body { white-space: pre-wrap } style, second screenshot with .panel-body { white-space: pre-wrap } style.
normal
pre-wrap
@cvrebert
Copy link
Collaborator

So, seems like simply adding white-space: normal to the clearfix's pseudo-elements fixes the problem?

@PowerGamer1
Copy link
Author

@cvrebert

So, seems like simply adding white-space: normal to the clearfix's pseudo-elements fixes the problem?

That's a really nice fix you came up with. :) I think it should be included in the Bootstrap CSS where clearfix is defined.

Also, please note that I originally reported the problem for Bootstrap 3.3.6 (you can see the version in the link to bootstrap.css in my example). So I never tested it and don't know how the things are in Bootstrap v4.

@cvrebert cvrebert added the v3 label Jul 12, 2016
@cvrebert
Copy link
Collaborator

CC: @mdo

Also, please note that I originally reported the problem for Bootstrap 3.3.6

Yeah, it's just that we're nearing a point where v3 bugs are becoming v3 "features" for compatibility reasons, so we need to evaluate whether it's worth trying to change v3 here.
v4 on the other hand can definitely receive the fix.

@mdo mdo removed the v3 label Sep 5, 2016
@dherges dherges mentioned this issue Oct 7, 2016
Closed
@mdo mdo added the v3 label Oct 10, 2016
@mdo
Copy link
Member

mdo commented Oct 10, 2016

Confirmed this is a problem in v4, fwiw. https://jsbin.com/nabowul/

@mdo
Copy link
Member

mdo commented Nov 28, 2016

This will be fixed by #21224 for v4.

@mdo mdo added this to the v4.0.0-alpha.6 milestone Nov 28, 2016
@mdo mdo mentioned this issue Nov 28, 2016
Merged
@mdo mdo mentioned this issue Nov 28, 2016
Closed
@thierryk
Copy link

For the record (since the problem is not referenced in this issue), the extra space was due to the value of the content property in the clearfix rule (there is a space between the quotes):

content: " ";

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
css v3 v4
Projects
None yet
Milestone
v4.0.0-alpha.6
Development

No branches or pull requests
4 participants
@mdo @thierryk @cvrebert @PowerGamer1