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.

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

.row causes horizontal overflow #8959

Closed
hice3000 opened this Issue Aug 1, 2013 · 22 comments

Comments

Projects
None yet
@hice3000

hice3000 commented Aug 1, 2013

My (empty) row always causes a horizontal scrollbar to appear (~10px), and I don't think just hiding it is the best solution. Here's my code:

<div class="row">
    <div class="col-lg-12">
    </div>
</div>

Note: The column is in my code empty, too.

Thank for your help, hice3000.

@Joyrex

This comment has been minimized.

Show comment
Hide comment
@Joyrex

Joyrex Aug 1, 2013

#8966 appears to be a repeat of this issue.

Joyrex commented Aug 1, 2013

#8966 appears to be a repeat of this issue.

@hice3000

This comment has been minimized.

Show comment
Hide comment
@hice3000

hice3000 Aug 1, 2013

@Joyrex Oh damn, I didn't searched if there is already such a issue.

hice3000 commented Aug 1, 2013

@Joyrex Oh damn, I didn't searched if there is already such a issue.

@hice3000 hice3000 closed this Aug 1, 2013

@Joyrex

This comment has been minimized.

Show comment
Hide comment
@Joyrex

Joyrex Aug 1, 2013

No, you're good - your issue came BEFORE 8966 - I was referring to it since 8966 didn't bother searching before posting!

Joyrex commented Aug 1, 2013

No, you're good - your issue came BEFORE 8966 - I was referring to it since 8966 didn't bother searching before posting!

@jasonsperske

This comment has been minimized.

Show comment
Hide comment
@jasonsperske

jasonsperske Aug 1, 2013

this is caused by the following lines from mixins.less:

// Negative margin nested rows out to align the content of columns
.row {
  margin-left:  (@grid-gutter-width / -2);
  margin-right: (@grid-gutter-width / -2);
}

Which produces the following CSS

.row {
  margin-left: -15px;
  margin-right: -15px;
}

jasonsperske commented Aug 1, 2013

this is caused by the following lines from mixins.less:

// Negative margin nested rows out to align the content of columns
.row {
  margin-left:  (@grid-gutter-width / -2);
  margin-right: (@grid-gutter-width / -2);
}

Which produces the following CSS

.row {
  margin-left: -15px;
  margin-right: -15px;
}
@hice3000

This comment has been minimized.

Show comment
Hide comment
@hice3000

hice3000 Aug 1, 2013

Could sombody fix this and submit a pull request?

hice3000 commented Aug 1, 2013

Could sombody fix this and submit a pull request?

@designbydarren

This comment has been minimized.

Show comment
Hide comment
@designbydarren

designbydarren Aug 4, 2013

I'm also experiencing this issue (on iPad/iPhone). Moving from portrait to landscape then back to portrait. Horizontal scrollbars appear and a gutter down the right hand side (the same colour as the body colour).

Link : http://bit.ly/13xmgEg

designbydarren commented Aug 4, 2013

I'm also experiencing this issue (on iPad/iPhone). Moving from portrait to landscape then back to portrait. Horizontal scrollbars appear and a gutter down the right hand side (the same colour as the body colour).

Link : http://bit.ly/13xmgEg

@mdo mdo closed this in d1e712d Aug 7, 2013

@pavarnos

This comment has been minimized.

Show comment
Hide comment
@pavarnos

pavarnos Aug 20, 2013

RC2 fixed this. Its broken again in the 3.0.0 release

<body>
<div class="row">
    <div class="col-lg-12">
        <p>Hello world</p>
    </div>
</div>
</body>

pavarnos commented Aug 20, 2013

RC2 fixed this. Its broken again in the 3.0.0 release

<body>
<div class="row">
    <div class="col-lg-12">
        <p>Hello world</p>
    </div>
</div>
</body>
@MattKetmo

This comment has been minimized.

Show comment
Hide comment
@MattKetmo

MattKetmo Aug 20, 2013

I confirm that this fix in RC2 have been reversed in e4bb388. In the same commit, padding was added to body:

padding-left:  (@grid-gutter-width / 2);
padding-right: (@grid-gutter-width / 2);

...but then has been removed in 3.0.0 release.

MattKetmo commented Aug 20, 2013

I confirm that this fix in RC2 have been reversed in e4bb388. In the same commit, padding was added to body:

padding-left:  (@grid-gutter-width / 2);
padding-right: (@grid-gutter-width / 2);

...but then has been removed in 3.0.0 release.

@mdo

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo Aug 20, 2013

Member

So the updated solution between RC2 and final was adding padding to the container. Add that, or another containing element with padding—and you're set.

Member

mdo commented Aug 20, 2013

So the updated solution between RC2 and final was adding padding to the container. Add that, or another containing element with padding—and you're set.

@pavarnos

This comment has been minimized.

Show comment
Hide comment
@pavarnos

pavarnos Aug 21, 2013

Thanks for the quick reply (and thanks so much for Bootstrap. Very awesome!).
This is likely to be an FAQ. Any chance of adding a note / example in the docs? Sorry if you already have it: i looked but could not find it.

pavarnos commented Aug 21, 2013

Thanks for the quick reply (and thanks so much for Bootstrap. Very awesome!).
This is likely to be an FAQ. Any chance of adding a note / example in the docs? Sorry if you already have it: i looked but could not find it.

@Joyrex

This comment has been minimized.

Show comment
Hide comment
@Joyrex

Joyrex Aug 21, 2013

Basically the structure of any content now needs to be:

`

`

The pros are you don't add any manual styles, the cons are you now have another nested element to deal with.

Joyrex commented Aug 21, 2013

Basically the structure of any content now needs to be:

`

`

The pros are you don't add any manual styles, the cons are you now have another nested element to deal with.

@hice3000

This comment has been minimized.

Show comment
Hide comment
@hice3000

hice3000 Aug 21, 2013

@Joyrex As I experienced, you can put the .container and .row classes together, so no extra nesting is needed. Or is this not recommended?

hice3000 commented Aug 21, 2013

@Joyrex As I experienced, you can put the .container and .row classes together, so no extra nesting is needed. Or is this not recommended?

@Joyrex

This comment has been minimized.

Show comment
Hide comment
@Joyrex

Joyrex Aug 21, 2013

Hmmm. I dunno - back in Bootstrap 2.x, I would have said sure, go ahead and do that, but with BS3, I've found myself having to move combined classes into their own separate elements in order to get consistent results (the .well class comes to mind, where I could add .well to a FORM element, and it would style correctly, but now I've had to put .well in a separate containing/wrapping DIV.

Can we have some input from the Bootstrap Pros on what's considered "best practice"?

Joyrex commented Aug 21, 2013

Hmmm. I dunno - back in Bootstrap 2.x, I would have said sure, go ahead and do that, but with BS3, I've found myself having to move combined classes into their own separate elements in order to get consistent results (the .well class comes to mind, where I could add .well to a FORM element, and it would style correctly, but now I've had to put .well in a separate containing/wrapping DIV.

Can we have some input from the Bootstrap Pros on what's considered "best practice"?

@cvrebert cvrebert closed this Aug 21, 2013

@joekaiser

This comment has been minimized.

Show comment
Hide comment
@joekaiser

joekaiser Aug 22, 2013

so .row HAS to be paired with .container now? what about full width grids?

joekaiser commented Aug 22, 2013

so .row HAS to be paired with .container now? what about full width grids?

@jhanzair

This comment has been minimized.

Show comment
Hide comment
@jhanzair

jhanzair Aug 22, 2013

I'm finding that using .row and .container as combined classes shifts the centering of the items you put inside to the left. This does not happen when using them in different classes.

jhanzair commented Aug 22, 2013

I'm finding that using .row and .container as combined classes shifts the centering of the items you put inside to the left. This does not happen when using them in different classes.

@daniduarte

This comment has been minimized.

Show comment
Hide comment
@daniduarte

daniduarte Aug 22, 2013

I used the ancient .row-fluid to fix it temporaly, till someone repair it 👍

daniduarte commented Aug 22, 2013

I used the ancient .row-fluid to fix it temporaly, till someone repair it 👍

@cvrebert

This comment has been minimized.

Show comment
Hide comment
@cvrebert

cvrebert Aug 22, 2013

Member

Full width grid problems is #9998.

Member

cvrebert commented Aug 22, 2013

Full width grid problems is #9998.

@redranger

This comment has been minimized.

Show comment
Hide comment
@redranger

redranger Oct 3, 2013

This issue is still a problem, will Bootstrap be fixing it?

redranger commented Oct 3, 2013

This issue is still a problem, will Bootstrap be fixing it?

@cvrebert

This comment has been minimized.

Show comment
Hide comment
@cvrebert

cvrebert Oct 3, 2013

Member

Current successor issue is #10711.

Member

cvrebert commented Oct 3, 2013

Current successor issue is #10711.

@matsilva

This comment has been minimized.

Show comment
Hide comment
@matsilva

matsilva Dec 13, 2013

I threw this into a separate .less file and included it.

.row{
    margin-left: 0;
    margin-right: 0;
}

.container{
    .row{
        margin-left: -15px;
        margin-right: -15px;
    }
}

Now I can create this without overflow:

<div class="row"> <!--No negative margin, no overflow-->
    <div class="container">
        <div class="row"><!--Compensates with negative margin-->
            <div class="col-sm-3">
            </div>
            <div class="col-sm-3">
            </div>
            <div class="col-sm-3">
            </div>
        </div>
        <div class="row"> <!--Compensates with negative margin-->
            <div class="col-sm-3"> 
            </div>
            <div class="col-sm-3">
            </div>
            <div class="col-sm-3">
            </div>
        </div>
    </div>
</div>

matsilva commented Dec 13, 2013

I threw this into a separate .less file and included it.

.row{
    margin-left: 0;
    margin-right: 0;
}

.container{
    .row{
        margin-left: -15px;
        margin-right: -15px;
    }
}

Now I can create this without overflow:

<div class="row"> <!--No negative margin, no overflow-->
    <div class="container">
        <div class="row"><!--Compensates with negative margin-->
            <div class="col-sm-3">
            </div>
            <div class="col-sm-3">
            </div>
            <div class="col-sm-3">
            </div>
        </div>
        <div class="row"> <!--Compensates with negative margin-->
            <div class="col-sm-3"> 
            </div>
            <div class="col-sm-3">
            </div>
            <div class="col-sm-3">
            </div>
        </div>
    </div>
</div>
@cvrebert

This comment has been minimized.

Show comment
Hide comment
Member

cvrebert commented Dec 13, 2013

@VidalQuevedo

This comment has been minimized.

Show comment
Hide comment
@VidalQuevedo

VidalQuevedo Jan 16, 2014

@cvrebert is right: see http://getbootstrap.com/css/#grid and 6273604, which introduced the .container-fluid class. Based on that commit, to solve the horizontal scroll problem caused by .row negative margins in page-wide layouts, you need to wrap your .row elements with a .container-fluid element. For example:

<!--- Instead of this... -->
<body>
  <div class="row">
    <div class="col-sm-6">my column</div>
    <div class="col-sm-6">my other column</div>
  </div>
</div>

<!--- ...do this: -->
<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-6">my column</div>
      <div class="col-sm-6">my other column</div>
    </div>
  </div>
</body>

Hope that helps!

VidalQuevedo commented Jan 16, 2014

@cvrebert is right: see http://getbootstrap.com/css/#grid and 6273604, which introduced the .container-fluid class. Based on that commit, to solve the horizontal scroll problem caused by .row negative margins in page-wide layouts, you need to wrap your .row elements with a .container-fluid element. For example:

<!--- Instead of this... -->
<body>
  <div class="row">
    <div class="col-sm-6">my column</div>
    <div class="col-sm-6">my other column</div>
  </div>
</div>

<!--- ...do this: -->
<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-6">my column</div>
      <div class="col-sm-6">my other column</div>
    </div>
  </div>
</body>

Hope that helps!

stempler pushed a commit to stempler/bootstrap that referenced this issue Apr 11, 2014

(less) fixes #8959: only negative indent rows within .container (prev…
…ents horizontal scroll on full-width pages)

@twbs twbs locked and limited conversation to collaborators Jun 14, 2014

stempler pushed a commit to stempler/bootstrap that referenced this issue Nov 4, 2014

(less) fixes #8959: only negative indent rows within .container (prev…
…ents horizontal scroll on full-width pages)

kappataumu added a commit to kappataumu/kappataumu.github.com that referenced this issue May 19, 2015

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.