I have page structure like this:
<div class='row'>
<div class='col-md-12'>
some fixed contents
</div>
</div>
<div class='row' style="overflow-y: scroll, position: absolute;">
<div class='col-xs-1'></div>
<div class='col-xs-10'>
<div ui-view></div>
</div>
<div class='col-xs-1'></div>
</div>
<div class='row'>
<div class='col-md-12'>
some fixed contents
</div>
</div>
I am not able to draw a scroll bar if they don't fit into screen. Extra contents inside ui-view getting hidden.
What changes are needed for that?
You need to set height in CSS to see vertical scroll bar.
#inner-sroll {
height: 300px;
max-height: 300px;
overflow-y: scroll;
}
W3schools-overflow-link
Related
Here is a codesandbox of what I have: https://codesandbox.io/s/still-surf-5vyy2
The pink square is stickied the way I want to but now I need to add a container so that the content doesnt stretch through the whole page.
THis is what the html looks like now:
<body>
<div style="height:200vh;background-color:blue">
<div style="width:50%;height:100vh;float:left;background-color:red"></div>
<div style="width:50%;height:50vh;float:right;background-color:pink;position:sticky;top:0">
<h1>I'm Sticky!</h1>
</div>
<div style="width:100%;height:100vh;float:left;background-color:green">
<div class="container">
<h2>I'm full width</h2>
</div>
</div>
</div>
<div style="width:100vw;height:75vh;background-color:white">
<h2>No sticky here</h2>
</div>
</body>
If I were to add:
<body>
<div style="height:200vh;background-color:blue">
<div class='container'> <--------------------------THIS
<div style="width:50%;height:100vh;float:left;background-color:red"></div>
<div style="width:50%;height:50vh;float:right;background-color:pink;position:sticky;top:0">
<h1>I'm Sticky!</h1>
</div>
</div>
</div>
<div style="width:100%;height:100vh;float:left;background-color:green">
<div class="container">
<h2>I'm full width</h2>
</div>
</div>
</div>
<div style="width:100vw;height:75vh;background-color:white">
<h2>No sticky here</h2>
</div>
</body>
It breaks the sticky. Does anyone have a better solution for this?
Really appreciate the help.
Your container div has no height. please add that rule to 100% in your css:
.container {
width: 90%;
max-width: 900px;
margin: 0 auto;
height: 100%;
}
I have created a 3 column grid which contains some text and an image in between using Bootstrap 4 for the grid system.
I've noticed that although my image has a img-fluid class assigned the image overflows outside the div.
Can anyone explain the reason for this?
HTML
<div class="row">
<div class="col blue-bg-outter">
<div class="col blue-bg" style="height: 300px;">
<!-- start of content -->
<div class="row">
<div class="col">
<h2> Some line</h2>
</div>
<div class="col img-col">
<img src="https://purepng.com/public/uploads/large/51508089516arw4tqfangou1wmvwzihlw7hxnzjujpulweq1otwrsdcsaxc5kvmu1crkpcyfxezyx4dmcvkbgg5w7oc1sioxib4j044tjwbfcyu.png" alt="" class="img-fluid">
</div>
<div class="col">
<h2> Another line</h2>
</div>
</div>
</div>
</div>
</div>
CSS
.img-fluid {
max-height: 100vh;
}
.blue-bg-outter {
padding: 60px;
}
.blue-bg {
background: #3ad7f7;
}
Might be easier to see on an actual page, please view the CodePen.
Because you have set a height on a parent div to 300px, if you remove height it works. Or you can set the height of img-fluid to 300px as #august suggested:
<div class="col blue-bg">
https://codepen.io/anon/pen/oJKvLp
Or you can keep the height and stop the image overflowing like this:
.blue-bg
{
overflow: hidden;
}
This question already has answers here:
Very long words not wrapping in HTML/CSS
(3 answers)
Closed 4 years ago.
I have some arbitrarily nested div elements using display: inline-block like this:
<div class="div-0">
<div class="div-1">
<div class="div-01"></div>
<div class="div-02"></div>
</div>
<div class="div-2">
<div class="div-01"></div>
<div class="div-02"></div>
</div>
<div class="div-3">
<div class="div-01"></div>
<div class="div-02"></div>
</div>
<div class="div-4">
<div class="div-01"></div>
<div class="div-02"></div>
</div>
<div class="div-5">
<div class="div-01"></div>
<div class="div-02"></div>
</div>
</div>
Somebody has hidden a specific CSS rule somewhere that's something like this:
.div-0 .div-4 .div-01 {
min-width: 400px;
width: 100%;
}
This prevents all my div elements from being sized smaller than 400px. How do I hunt down which rule is forcing the minimum width?
I've tried manually inspecting each div with Chrome's inspector, but my actual code is nested 20+ div elements deep and it's difficult to determine by inspection.
* {
box-sizing: border-box;
}
div {
border: 1px solid red;
padding: 25px;
display: inline-block;
min-width: 100%;
}
.div-0 .div-4 .div-01 {
min-width: 400px;
width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="div-0">
<div class="div-1">
<div class="div-01"></div>
<div class="div-02"></div>
</div>
<div class="div-2">
<div class="div-01"></div>
<div class="div-02"></div>
</div>
<div class="div-3">
<div class="div-01"></div>
<div class="div-02"></div>
</div>
<div class="div-4">
<div class="div-01"></div>
<div class="div-02"></div>
</div>
<div class="div-5">
<div class="div-01"></div>
<div class="div-02"></div>
</div>
</div>
</body>
</html>
Go to the 'Computed' tab of the CSS styles. There, look for the 'min-width' property. Hover over the '400px' value and you will see an arrow. Click that arrow and it will jump you to the CSS rule that is enforcing it.
It turns out that I was asking the wrong question! My suspicion was wrong – there was no developer hiding CSS rules. Instead, it was some unbreakable text inside of the div elements.
There was a line of text in the div like Loremipsum....loremipsum that was unable to break properly. The div element cound not resize smaller than the width of this long "word".
Changing the word breaking strategy fixed my problem:
div {
word-break: break-word;
}
I am making a responsive site for a mobile. The HTML should not be changed but the css should handle the positioning of the elements so as to not effect the main site.
BACKGROUND INFORMATION
The desktop site has a navigation bar set at the bottom of the screen with a contact number below it whilst the site title and logo is placed at the top. For the mobile this is unfeasable so I've put the navigation bar at the top of the screen alongside the title and logo. The number has remained at the bottom as desired. Between the top header and the contact number at the bottom, I have placed the bulk content area. The content is being displayed correctly by using the height:calc(100% - 336px) property to set the content wrapper 100% - the total height of the top header and the contact number. The content wrapper is then set absolute to a position top: 176px to meet the bottom of the top header. The content inside the content wrapper does not fit inside the wrapper so overflow-y:scroll is used to ensure that the user can scroll through the content area.
PROBLEM
The content area within the wrapper is not scrolling.
CODE
CSS
.PageContentBox {
top: 176px!important;
height: calc(100% - 336px);
z-index: 12;
width: 100%;
overflow-y: scroll;
left: 0px!important;
}
#content {
padding: 0;
height: 100%;
overflow-y: scroll; /*This here for testing purposes*/
}
HTML
<div class="PageContentBox">
<div id="content">
<div id="pages">
<div class="page" id="page0">
<h1>HEADER</h1>
<div class="grid grid-pad" style="padding: 0 0 0 0!important">
<div class="row" id="r1">
<div class="col-5-12">
<div class="content">
<img class="megaServiceImage" src="../template/img/gallery/mega/test.jpg" alt="??????" />
</div>
</div>
<div class="col-7-12">
<div class="content">
<h2>Applications</h2>
<p class="MegaServicesText">
DUMMY TEXT
</p>
</div>
</div>
</div>
<div class="row" id="r2">
<div class="col-5-12">
<div class="content">
<img class="megaServiceImage" src="../template/img/gallery/mega/test.jpg" alt="??????" />
</div>
</div>
<div class="col-7-12">
<div class="content">
<h2>Performance</h2>
<p class="MegaServicesText">
DUMMY TEXT
</p>
</div>
</div>
</div>
<div class="row" id="r3">
<div class="col-5-12">
<div class="content">
<img class="megaServiceImage" src="../template/img/gallery/mega/test.jpg" alt="??????" />
</div>
</div>
<div class="col-7-12">
<div class="content">
<h2>Specifications</h2>
<p class="MegaServicesText">
DUMMY TEXT
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You need to set position on your .PageContentBox: top: and z-index don't work unless you define position.
Here is you updated Fiddle with the position set to absolute.
In your question you save already given the solution just use that only.
You have specified that absolute but not used it in css. Just use it and it will work no need to put the #content css.
css should be like this:
.PageContentBox {
position: absolute;
top: 176px!important;
height: calc(100% - 336px);
z-index: 12;
width: 100%;
overflow-y: scroll;
left: 0px!important;
}
See the example
I am getting desktop and mobile view like this and I think its fine. What you say?
I have a large image which I want to display using the entire width of the browser.
My code is:
<html><body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h3> Welcome! </h3>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="main_image">
<img src="..."/>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="main_content">....</div>
</div>
</div>
</div>
</body></html>
Bootstrap will automatically create margins/padding to make the image fit in the center of the page.
Is there a way to always allow the main image to fit the entire width of the browser, but keep the padding/margins for everything else on the page?
Your best bet is to assign the image as a background-image.
Here's a JSFiddle (https://jsfiddle.net/qoaqjgpz) with only the most important stuff from http://startbootstrap.com/template-overviews/full-width-pics/.
The .html:
<div class="image-bg-fixed-height">
</div>
The .css:
.image-bg-fixed-height {
background: url('http://lorempixel.com/g/1920/500/') no-repeat center center scroll;
height: 450px;
}
.img-center {
margin: 0 auto;
}
Let me know if this is what you were searching for.