B. Clay Shannon B. Clay Shannon - 7 months ago 12
HTML Question

How can I restrict this CSS container to only containing the div its declared in?

I'm just getting started converting the default Index.cshtml page in an ASP.NET MVC app to look similar to an existing Winforms app, and the first thing I needed was to render something that looked like a CheckedListbox. I found what seemed to be a good solution here and added it verbatim to my \Content\Site.css file:

.container { border:2px solid #ccc; width:300px; height: 100px; overflow-y: scroll; }


My \Views\Home\Index.cshtml is now (in its entirety, still containing some of the default/boilerplate html) this:

@{
ViewBag.Title = "Home Page";
}

<div class="jumbotron">
<h1>Report Scheduler</h1>
</div>

<div class="row">
<div class="col-md-6">
<h2>Configure One Unit/Report pair at a time</h2>
<div class="container">
<input type="checkbox" /> This is checkbox <br />
<input type="checkbox" /> This is checkbox <br />
<input type="checkbox" /> This is checkbox <br />
<input type="checkbox" /> This is checkbox <br />
<input type="checkbox" /> This is checkbox <br />
<input type="checkbox" /> This is checkbox <br />
<input type="checkbox" /> This is checkbox <br />
<input type="checkbox" /> This is checkbox <br />
<input type="checkbox" /> This is checkbox <br />
<input type="checkbox" /> This is checkbox <br />
</div>
<p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301865">Learn more &raquo;</a></p>
</div>
<div class="col-md-6">
<h2>Get more libraries</h2>
<p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
<p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">Learn more &raquo;</a></p>
</div>
</div>


So I have the new CSS class assigned to the div that contains the checkboxes, but the container style seems to be applied to the whole page:

enter image description here

What do I need to do to have the CSS class ("container") only contain the checkboxes, not the entire page?

UPDATE



To answer TaylorN's question, there's a bunch of Jumbotron stuff in \Content\bootstrap.css:

.jumbotron {
padding: 30px;
margin-bottom: 30px;
font-size: 21px;
font-weight: 200;
line-height: 2.1428571435;
color: inherit;
background-color: #eeeeee;
}

.jumbotron h1 {
line-height: 1;
color: inherit;
}

.jumbotron p {
line-height: 1.4;
}

.container .jumbotron {
border-radius: 6px;
}

@media screen and (min-width: 768px) {
.jumbotron {
padding-top: 48px;
padding-bottom: 48px;
}
.container .jumbotron {
padding-right: 60px;
padding-left: 60px;
}
.jumbotron h1 {
font-size: 63px;
}
}


...row there has this:

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

.row:before,
.row:after {
display: table;
content: " ";
}

.row:after {
clear: both;
}

.row:before,
.row:after {
display: table;
content: " ";
}

.row:after {
clear: both;
}


...and .col-md-6 is:

.col-md-6 {
width: 50%;
}


UPDATE 2



If I remove all traces of the container class, it works as expected:

enter image description here

...but I'd still prefer to bound the checkboxes thus and so.

Answer

What do you have in your CSS for the below?

  • .jumbotron
  • .row
  • .col-md-6

EDIT:

You have a relative width for .col-md-6

.col-md-6 {
    width: 50%;
  }

But then an absolute width for the .container

.container { border:2px solid #ccc; width:300px; height: 100px; overflow-y: scroll; }

Try:

.container { border:2px solid #ccc; width:100%; height: 100%; overflow-y: scroll; }

Also, perhaps try what Jacob suggested as well:

.container { border:2px solid #ccc; width:100%; height: 100%; overflow: hidden;