Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Bade Unite
Bade Unite
7,566 Points

Changing automatically padding.

When I click on my Register button it change to this.

<body class="modal-open" style="padding-right: 33px;">

But normally it is set like this.

<body class="modal-open" style="padding-right: 0px">

<div class="jumbotron jumbotron-fluid">
  <div class="container text-sm-center p-t-3">
    <h1 class="display-2 center">Fluid jumbotron</h1>
    <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>

    <div class="btn-group" role="group" aria-label="Basic example">
      <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#register">Register</button>

      <a class="btn btn-secondary btn-lg" href="#speakers">Speakers</a> 
    </div>
  </div>
</div>

<div class="modal fade" id="register"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">Ɨ</span> </button> <h4 class="modal-title" id="myModalLabel">Register for Stack Conf</h4> </div>

      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>

</div>

Why is it happening?

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

You'll need to show more of your code to enable the issue to be seen.
Or better yet, make a snapshot of the workspace and provide the link to it.

1 Answer

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

For me, it only added 17px of right padding.

And only when the modal was open, and the class modal-open was applied to the body.

Without digging into the internals of Boostrap, I assume this is being done by the one of the Bootstrap components. The difference could be due to a different Bootstrap version. But I'm not sure why, I don't see any visible change on the screen.

I guess that's a downside of using frameworks, you never really know exactly what they are doing.