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

Question

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:

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:

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

TaylorN · Accepted Answer · 2016-04-18T21:56:18.957

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;

score 1 · Answer 2 · answered Apr 18 '16 at 21:39

1

I suggest trying this as it will not go over the boundary

overflow: hidden;

Put that in your divs css class

answered Apr 18 '16 at 21:39

Jacob Webb

84
1
8

Instead of the "overflow-y" (replacing it?), or before or after it?...I tried all three, and none make any difference. – B. Clay Shannon Apr 18 '16 at 21:43
Yes try replacing it with overflow hidden doing overflow y might give it some issues – Jacob Webb Apr 18 '16 at 21:46

elchinsolo · Answer 3 · 2016-04-18T21:54:40.847

1

i checked your entire code in JSfiddle and it works as it should.

.container {
 border: 2px solid #ccc;
 width: 300px;
 height: 100px;
 overflow-y: scroll;
 background:green;  /* added this just to see if there any nuances */ 
}

but have you linked your css file like

<link rel="stylesheet" href="/somename.css">

to index.cshtml ??

.container > checkbox { ........... }

edited Apr 18 '16 at 21:54

answered Apr 18 '16 at 21:52

elchinsolo

70
9

Site.css is automatically used by the project, and changing it obviously alters the appearance of things, so it's not a problem of it not being found. – B. Clay Shannon Apr 18 '16 at 21:54
you can actually use web developer option from browser you currently use to change css visually and find the problem, it seems to have very easy solution. best experience is with firefox ctrl+shift+c and change there css codes if needed add !important – elchinsolo Apr 18 '16 at 21:59

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

UPDATE

UPDATE 2

3 Answers3