I have a CSS which will display the content only with vertical scroll bar and not the Horizontal scroll bar.
My CSS is,
div.rightSide {
display: inline;
float: right;
height: 234px;
margin: 5px 0;
overflow-y: auto;
position: relative;
vertical-align: middle;
visibility: inherit;
width: 300px;
z-index: 6;
}
It works as expected in IE8 and Mozilla 3.6, but when I test the same in IE7, vertical scroll bar is also getting displayed. So what should i want to do in order to overcome this issue?
EDIT
Adding my HTML code.
<body>
<div>
<div id="contentColumn">
<div class="overviewPage">
<div class="instructionContent" id="sample_id">
<div class="overviewBackground" style="z-index: 3;">
<p class="sidebar_body">
<img align="center" border="0" height="244"
src="../images/product/sample.jpg" width="752" />
</p>
</div>
<div class="rightSide">
<div class="unitOverview">
<p class="body">
<span class="bold">Unit 1 Overview</span>
</p>
<div class="sectionContents">
<div class="subhead_pri">
<!-- My title goes here -->
</div>
<div class="sectionBody" style="overflow:hidden;width:100%">
<p class="body">
<!-- My content Goes here -->
</p>
</div>
</div>
</div>
<div class="vendor">ID: vendor1</div>
</div>
</div>
</div>
</div>
</div>
</body>
Thanks,
Jeya
Add overflow-x: hidden; to your css as well.
Experiment with your content. overflow-y:auto means 'only show a vertical scrollbar if you have to.' Apparently IE7 thinks your content is tall enough that it needs the scrollbar.
By default IE7 treats your container as if it had overflow: auto.
You need to tell it otherwise.
try adding overflow: hidden before overflow-y: auto, helped in my case.
Related
I need to have a div (divParent) which needs to have 2 other divs (divContainer, divButtons) where the divButton will display at the very bottom of the DivParent and the divContainer will use the entire remaining space of the divParent up to the divButton, but it cannot overlap the divButtons and if the content of the divContainer is too big, I need the vertical scrollbar to be displayed.
I've got the following more or less working but the divContainer seems to be overlapping the divButtons and it does not display the vertical scrollbar if the content is too big, even when I specify overflow: auto or overflow-y: auto.
<div id="divParent" style="width: 100%; height: 100%; background-color: red; position: relative">
<div id="divContainer" style="overflow-y:auto;">
<table id="fields">
<large content goes here>
</table>
</div>
<div id="divButtons" style="width: 100%; background-color: blue; position: absolute; bottom: 0">
<div style="float:right;">
<table>
<tr>
<td style="padding: 2px">
<div id="submitbutton">test1</div>
</td>
<td style="padding: 2px">
<div id="cancelbutton">test2</div>
</td>
</tr>
</table>
</div>
</div>
</div>
If I specify "max-height:100px" on the divContainer to test, it does exactly what I need where the vertical scrollbar is displayed but it's clearly no longer stretched all the way to the divButton.
Note that the divParent is then used in a third-party popup window.
Any suggestions?
Thanks.
I eventually figured it out, but credit to #Brad for his answer in:
from How do I make a div stretch in a flexbox of dynamic height?
I had to rejig a few things but eventually got there and my divs are defined as follows now:
<div id='divParent' style='display: flex;
flex-direction: column; height: 100%; width: 100%;'>
<div id='divContainer' style='width: 100%; flex-grow:1;
overflow: auto'>
<div id='divButtons' style='width: 100%; height: 40px;
margin-top: 5px'>
That'it!
Install bootstrap and you will have great control of div placements. Bootstrap creates 12 columns for each row:
<div class="row">
<div class="col-md-7" align="right">
<div class="row">
</div>
<div class="row">
</div>
</div>
<div class="col-md-3" align="left">
</div>
<div class="col-md-2" style="padding-right:2%;">
</div>
</div>
I've seen fixes for individual parts of this problem but not one for a collective solution. I can solve everything without resorting to javascript formatting except for margins from elements being carried over to the top of the next column (I can't understand why it hasn't been fixed but it appears to be a bug in css3 for some time that's impeding compositing layouts 1, 2)
I've a responsive div container broken into three columns (though this can change depending on the width of the page, per responsive layout), containg divs with a varying number of nested images of varying aspect ratios that each have a margin-bottom property. The above problem is very apparent so I'm looking for a solution to this.
Typically the suggestion involves the use of a column-break-inside: avoid; property alongside switching my margin-bottom to padding-bottom. This hack has seen some success with others and this is where I point you to the subject of my question. I cannot implement this as I'm using a seperate hack to prevent reflow of images that are lazy loaded (using the lazy sizes plugin*) into the columns (the padding-bottom as a ratio hack, 3).
So if I use padding-bottom to ensure that my column elements align without orphaned margins, I lose the ability to correct the reflow from lazy loading the elements into the columns. I can't use fixed sized elements as the column layout is responsive and the elements shrink and enlarge dynamically with the column size.
Is there anybody who has succeeded in solving both issues simultaneously without javascript formatting?
I'm keen to stick to this particular lazy loading plugin for reasons outside of the scope of this problem.
HTML Code:
<div id='columncontainer'>
<div class='imagecontainer' style='padding-bottom:reflowPaddingAmountFromPHPvar;'>
<img class='lazyload'>
<div class='imagetextcontainer'>
<div class='vertaligncontainer'>
<p class='imagename'>Text</p>
<p class='imagedesc'>Text</p>
</div>
</div>
</div>
</div>
CSS Code:
#myContent {
position: relative;
width: 100%;
column-count: 3;
column-gap: 20px;
column-break-inside: avoid;
-moz-column-break-inside:avoid;
-webkit-column-break-inside:avoid;
}
.imagecontainer {
position: relative;
margin-bottom: 20px;
img {
position: absolute;
top: 0;
left: 0;
height: auto;
width: 100%;
}
}
Example jsFiddle:
https://jsfiddle.net/g0yjd9ov/1/
The elements should align at the top of each column but, instead, the margin-bttom on the element (imagecontainer) at the bottom of the first or second column is being carried over to the second or third column and orphaned, giving the impression of the next element having a margin-top value and breaking the top alignment. This serves no benefit to any situation that a deliberate margin-top value couldn't recreate. I've randomised the heights of the elements just for this example, so occasionally the problem won't show (emphasising how much of a nuisance it is. It's hard to deliberately show). Just refresh if it doesn't, as it occurs quite frequently.
This can be solved using an extra container that has padding on it. The container for the image (.imagecontainer) should contain only the image, as that is what its aspect ratio is set up for. The space between a block and the next block in the column can be achieved by setting a padding on that block. The block then gets the styling that prevents column breaks from occurring.
I have created a demo that builds upon the example code in the question, but also includes some things that are only described in the question text. This because I wanted to make sure that everything works the way I think it should (let me know if I misinterpreted the question).
In particular, I added the lazy sizes plugin and let it load some placeholder images. I also added some styling and added blocks that contain more than just a single image. For the rules that prevent breaks inside an element, I used some slightly different ones, as per this answer. Finally, I positioned the .imagetextcontainer as discussed in the question comments.
The demo can be found on JSFiddle. I also include it as a code snippet here.
#columncontainer {
width: 100%;
column-count: 3;
column-gap: 10px;
}
.block-wrap {
width: 100%;
padding-bottom: 10px;
/* prevent column breaks in item
* https://stackoverflow.com/a/7785711/962603 */
-webkit-column-break-inside: avoid; /* Chrome, Safari */
page-break-inside: avoid; /* Theoretically FF 20+ */
break-inside: avoid-column; /* IE 11 */
display:table; /* Actually FF 20+ */
}
.block {
width: 100%;
background-color: #ffff7f;
}
.block > p {
margin: 0;
padding: 10px;
}
.imagecontainer {
position: relative;
width: 100%;
height: 0;
background-color: #a00;
}
.imagecontainer > img {
width: 100%;
}
.imagetextcontainer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<script src="https://afarkas.github.io/lazysizes/lazysizes.min.js"></script>
<div id='columncontainer'>
<div class="block-wrap">
<div class="block">
<div class='imagecontainer' style='padding-bottom: 50%;'>
<img class='lazyload'
data-sizes='auto'
data-srcset='https://placehold.it/100x50/a00/fff 100w,
https://placehold.it/200x100/050/fff 200w,
https://placehold.it/400x200/057/fff 400w' />
<div class='imagetextcontainer'>
<div class='vertaligncontainer'>
<p class='imagename'>Name</p>
<p class='imagedesc'>Description</p>
</div>
</div>
</div>
<p>Some text. Followed by another figure.</p>
<div class='imagecontainer' style='padding-bottom: 100%;'>
<img class='lazyload'
data-sizes='auto'
data-srcset='https://placehold.it/100x100/a00/fff 100w,
https://placehold.it/200x200/050/fff 200w,
https://placehold.it/400x400/057/fff 400w' />
<div class='imagetextcontainer'>
<div class='vertaligncontainer'>
<p class='imagename'>Name</p>
<p class='imagedesc'>Description</p>
</div>
</div>
</div>
</div>
</div>
<div class="block-wrap">
<div class="block">
<div class='imagecontainer' style='padding-bottom: 50%;'>
<img class='lazyload'
data-sizes='auto'
data-srcset='https://placehold.it/100x50/a00/fff 100w,
https://placehold.it/200x100/050/fff 200w,
https://placehold.it/400x200/057/fff 400w' />
<div class='imagetextcontainer'>
<div class='vertaligncontainer'>
<p class='imagename'>Name</p>
<p class='imagedesc'>Description</p>
</div>
</div>
</div>
<p>Some text. No figure here.</p>
</div>
</div>
<div class="block-wrap">
<div class="block">
<p>Only text here.</p>
</div>
</div>
<div class="block-wrap">
<div class="block">
<div class='imagecontainer' style='padding-bottom: 50%;'>
<img class='lazyload'
data-sizes='auto'
data-srcset='https://placehold.it/100x50/a00/fff 100w,
https://placehold.it/200x100/050/fff 200w,
https://placehold.it/400x200/057/fff 400w' />
<div class='imagetextcontainer'>
<div class='vertaligncontainer'>
<p class='imagename'>Name</p>
<p class='imagedesc'>Description</p>
</div>
</div>
</div>
</div>
</div>
<div class="block-wrap">
<div class="block">
<div class='imagecontainer' style='padding-bottom: 100%;'>
<img class='lazyload'
data-sizes='auto'
data-srcset='https://placehold.it/100x100/a00/fff 100w,
https://placehold.it/200x200/050/fff 200w,
https://placehold.it/400x400/057/fff 400w' />
<div class='imagetextcontainer'>
<div class='vertaligncontainer'>
<p class='imagename'>Name</p>
<p class='imagedesc'>Description</p>
</div>
</div>
</div>
</div>
</div>
<div class="block-wrap">
<div class="block">
<p>Only text here.</p>
<p>Tow lines now.</p>
</div>
</div>
<div class="block-wrap">
<div class="block">
<div class='imagecontainer' style='padding-bottom: 200%;'>
<img class='lazyload'
data-sizes='auto'
data-srcset='https://placehold.it/100x200/a00/fff 100w,
https://placehold.it/200x400/050/fff 200w,
https://placehold.it/400x800/057/fff 400w' />
<div class='imagetextcontainer'>
<div class='vertaligncontainer'>
<p class='imagename'>Name</p>
<p class='imagedesc'>Description</p>
</div>
</div>
</div>
</div>
</div>
</div>
After a lot of back and forth I came up with an answer that fixes the problem and maintains the original's CSS properties. There seems to have been two problems causing this.
1 - margins were translating into the next column (but the element was staying into its own column)
2 - height was confined (was a problem in the solution)
solution: since the entire element stays in its own column but the margin is technically not part of the element (it can be tested using outline)
this problem can be solved by placing .imagecontainer into another div which has padding instead of margin. (so then its considered one object so the margin problem is avoided)
you also would need to move column-break-inside to the parent element so it registers without the margin.
a live version can be found at: https://jsfiddle.net/36pqdkd3/6/
Here is a solution using flex-boxes
HTML
<div id='columncontainer'>
<div class='imagecontainer'>
<img class='lazyload'>
<div class='imagetextcontainer'>
<div class='vertaligncontainer'>
<p class='imagename'>Text</p>
<p class='imagedesc'>Text</p>
</div>
</div>
</div>
<div class='imagecontainer'>
<img class='lazyload'>
<div class='imagetextcontainer'>
<div class='vertaligncontainer'>
<p class='imagename'>Text</p>
<p class='imagedesc'>Text</p>
</div>
</div>
</div>
<div class='imagecontainer'>
<img class='lazyload'>
<div class='imagetextcontainer'>
<div class='vertaligncontainer'>
<p class='imagename'>Text</p>
<p class='imagedesc'>Text</p>
</div>
</div>
</div>
<div class='imagecontainer' style=''>
<img class='lazyload'>
<div class='imagetextcontainer'>
<div class='vertaligncontainer'>
<p class='imagename'>Text</p>
<p class='imagedesc'>Text</p>
</div>
</div>
</div>
</div>
CSS
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#columncontainer {
position: relative;
width: 100%;
display: flex;
height: 40%;
/* use this if you want containter wrapping
flex-wrap: wrap; */
/* use this if you want container scrolling
overflow: auto; */
/* use this if you want container scrolling
justify-content: center; */
}
.imagecontainer {
min-width: 250px;
position: relative;
background-color: red;
overflow: hidden;
height: 100%;
margin: 5px;
z-index: 1;
}
example in jsfiddle
Here are some recommendations based on your question.
I would also recommend learning more about flex-boxes, that is very equipped to handle these kinds of situations.
by default the html and body elements default size is width 100% and no height.
here is a reference I use on flex-boxes
addressing aspect ratio
you can handle aspect ratio using px and vw/vh (measurements of DOM width and height). try playing around with min/max/width to find the perfect amount.
(1:2 aspect ratio)
element {
min-width: 10vw;
min-height: 20vh;
width: 50px;
height: 100px;
}
css size units
in my version you can edit ".imagecontainer".
This is my css:
html{
position: relative;
height: 100%;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
min-height: 100%;
margin-bottom: 60px;
}
.container {
padding-top: 50px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
.footer p{
line-height: 60px;
}
.messages {
/*background-color: blue;*/
min-height: 100% !important;
height: 100% !important;
}
This is my markup (using blaze for template rendering):
<template name="messages">
<div class="container messages">
<div class="row">
<div class="col-md-3 conversations">
{{> message}}
</div>
<div class="col-md-9 conversation-holder">
<h1>John Doe</h1>
<div class="conversation">
</div>
</div>
</div>
</div>
</template>
This is my output:
What I want is that the line between the list of conversations and the title(John Doe( on the right) should be of 100% height and that any overflow should be scrollable.
I have set the min-height and height of the .messages container to be 100% with the !important but it does not work i do not know why.
How do I make it 100%? Thanks.
P.S: Here is the template after rendering:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="__blaze-root">
<nav class="navbar navbar-inverse navbar-fixed-top">
<!-- navbar stuff removed for better understanding-->
</nav>
<div class="container messages">
<div class="row">
<div class="col-md-3 conversations">
<a href="#">
<div class="message">
<div class="conversation-title">
<img class="pull-left img-circle" height="50px" src="/images/dummy-profile-pic.png" width="auto">
<p class="pull-left">John Doe</p>
</div>
</div></a>
</div>
<div class="col-md-9 conversation-holder">
<h1>John Doe</h1>
<div class="conversation"></div>
</div>
</div>
</div>
<footer class="footer">
<p class="text-muted">Place sticky footer content here.</p>
</footer>
</div>
</body>
</html>
Just realized that you are using bootstrap framework. You have to cascade the height from the parent div to the inner div till it reaches the .message element.
Otherwise, you can't set the height as 100%. (Any padding or margin in the intermediate div would introduce vertical scroll)
Fiddle that shows the 100% to 2 level down from the body tag.
http://jsfiddle.net/skelly/zrbgw/
Solution 2: You have to use position:absolute for .message
Solution 3: You can use position:fixed
But solution 2 & 3 will remove the elements out of the content flow resulting in need of setting a proper parent height.
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?
We have HTML with CSS:
<div style="width: 80%"><!--This width can be different or expressed in % -->
<div>
<div style="width: 50%; background-color: blue; display: inline-block;">
<br/>A<br/>B<br/>C<br/>D<br/>E<br/>F<br/>G<br/>H<br/>I<br/>
</div><!--
--><div style="width: 50%; background-color: brown; display: inline-block;">
<br/>A<br/>B<br/>C<br/>D<br/>E<br/>F<br/>G<br/>H<br/>I<br/>
</div>
</div>
<div style="height: 110px; overflow-y: scroll;">
<div style="width: 50%; background-color: yellow; display: inline-block;">
<br/>A<br/>B<br/>C<br/>D<br/>E<br/>F<br/>G<br/>H<br/>I<br/>
</div><!--
--><div style="width: 50%; background-color: green; display: inline-block;">
<br/>A<br/>B<br/>C<br/>D<br/>E<br/>F<br/>G<br/>H<br/>I<br/>
</div>
</div>
</div>
And a result:
All divs have 50% width, but bottom ones are narrower, because of scroll bar. I know I could calculate scroll bar width and make top ones narrower, but is there better solution? Solution using HTML/CSS only is preferred.
Fiddle here: http://jsfiddle.net/s6rhs/6/
You can use custom jquery scroll bars for your page with the help of some jquery plugins like these
https://github.com/inuyaksa/jquery.nicescroll
So that you won't have trouble with default scrollbars of the browsers.
You could use flex layout, introduced in CSS3. Maybe there are too many browsers out there, you want to support, but they could use your current "solution".
Support: http://caniuse.com/#search=flex
If there's a scrollbar, your right container is a little smaller depending on the width of the scrollbar, but that shouldn't be noticed by users.
At the moment, the background scrolls out, but I think you'll find a solution for that.
Now, my answer isn't only text, there's also some code and a jsfiddle for you:
CSS
.flex {
display: flex;
flex-direction: row;
width: 100%;
}
.flex > div {
flex-grow: 1;
}
.flex > div:first-of-type {
width: 250px;
flex-grow: 0;
}
HTML
<div style="width: 500px">
<div class="flex">
<div style="background: green">
<br/>A
<br/>B
<br/>C
<br/>D
<br/>E
<br/>F
<br/>G
<br/>H
<br/>I
<br/>
</div>
<div style="background: yellow">
<br/>A
<br/>B
<br/>C
<br/>D
<br/>E
<br/>F
<br/>G
<br/>H
<br/>I
<br/>
</div>
</div>
<div class="flex" style="height: 110px; overflow-y: scroll;">
<div style="background: blue">
<br/>A
<br/>B
<br/>C
<br/>D
<br/>E
<br/>F
<br/>G
<br/>H
<br/>I
<br/>
</div>
<div style="background: red">
<br/>A
<br/>B
<br/>C
<br/>D
<br/>E
<br/>F
<br/>G
<br/>H
<br/>I
<br/>
</div>
</div>
</div>