I encountered something very strange today. When adding the style overflow: hidden to a div, if its content has a header, it gets some extra blank space which seems like margin or padding. The amount is small, so I usually would not have even noticed, or cared, but the problem is that I'm making an animation, and that margin/padding is messing it up. For hours I thought it was the animation which was wrong, but I finally managed to narrow it down to this.
Here's the code with overflow:
<div style="overflow:hidden">
<ng-content select="wizard-step"></ng-content>
</div>
The ng-content renders this:
<h5><strong>testing bootstrap header</strong></h5>
<search-select #select [placeholder]="'Busca audiencias...'" (selected)="onSelected($event); select.text = ''" [template]="template" property="name" [items]="catalogAudiences | filterAudiences:audiences"></search-select>
<div class="mt-3">
<div *ngIf="!audiences?.length" class="alert alert-primary">
No has agregado audiencias.
</div>
<audiences-list (remove)="onRemove($event)" [readOnly]="true" [audiences]="audiences"></audiences-list>
</div>
And it looks like this:
I want you to notice the arrows which show the extra space I'm talking about. To compare, this is what it looks like if I remove style="overflow:hidden":
I know it might be hard to tell, but it's almost like if the "testing bootstrap header" is getting some unwanted margin whenever that div has overflow: hidden, which messes up my animation. How can I fix this?
I'm using Bootstrap 4 and Angular 5 if that's of any help.
Chances are, the h5 (the "testing bootstrap header") has a top margin either from browser defaults or Bootstrap, that's being affected by the div's overflow: hidden (which causes it to establish a block formatting context that blocks child margins from collapsing with their parent margins). See collapsing margins in the spec.
If removing the top margin fixes this, that's your answer.
Related
I'm using bootstrap, angular and angular-ui-router
what I want to achieve is this mockup:
where the menu on the left is a navigation bar, a toolbar on the top, some breadcrumbs, content and a footer.
I can get all these elements in place. However, I need to populate the content with a variable number of elements from a rest data source. I want to wrap these nicely, so I am using the following angular / html
<div class="col-lg-12 ">
<div class="row">
<div class="col-md-4 " ng-repeat-start="item in $ctrl.items">
<div> card details here </div>
<div class="clearfix" ng-if="$index % 3 === 2"></div>
<div ng-repeat-end=""></div>
</div>
</div>
</div>
this works, and shows all the data. However, as there is more data than can fit into the div, scrollbars appear on the window
What I would like to acheive is to get the scrollbar to appear in the content div , like the screenshot
I have tried all sorts of css, like overflow: scroll-y, but can't figure it out.
Your problem seems to be related to dynamic heights. Using fixed heights (also %, vh, ... are useable), you can get that layout to work properly. There are a lot of solutions for that.
1. Using %
If you're going to use %, and that would by far be the best option, you have to start at the root tag which basically is <html>. After that you've to add the proper height value to it's child elements you want to use. Keep in mind to start at 100% and shrink your child element to the desired heights.
2. Using vh
The vh value is kinda same as %. You just don't need to set a height to every parent element. Demo
Note: You may have to check if that's working with your target browser.
3. CSS3 calc() function
Propably the newest method. You can calculate values through CSS(3), by using e.g. calc(100% - 100px). That's pretty cool though, but also isn't supported by every browser. See here.
4. Fixed layout
You could also use some fixed positionings. Setting up your footer, header and nav to position: fixed; would also keep up everything smooth and clean. I'd use a fixed layout in order to get that done, since I'd like it the most. Also it doesn't have any incompatibility with legacy browsers.
instead of overflow: scroll-y,
please try:
height:100%;
overflow-y:scroll
*giving it a height enables the scroll bar to appear.
I am currently developing a site and have encountered a strange problem with getting two of my divs to stay on the same line. The page in question is here: http://bit.ly/13QE7Zi and the divs I'm trying to fix are the text div in the middle and the small image beside it. In the CSS, I have these divs set to take up 1000px (20+640+20+300+20) which is the width of the container element, but if I do this, the second div gets pushed onto the next line. It only works if I decrease the width of the text div by 3 px, which is undesirable because then the edge of the image is not aligned with the right side of the page properly. This occurs in Chrome and Firefox. I'd prefer not to use floats because that breaks other aspects of the page. How do I get these two divs to stay on the same line and still fill the full 1000px of width?
The reason this is happening is because you have a 'space' character between your two inline blocks.
HTML doesn't really ignore all white space. You can have 1000 spaces and new lines between two elements and HTML would condense all those down into 1 single space when displaying.
Your inline blocks are setup in such a way that they there widths add up to be exactly 1000px, however you have a new line in between your two containing elements which condenses down to 1 space. Your precise measurement doesn't account for this extra space and so your inline blocks wrap to the next line.
Instead of decreasing your text's width by 3 px, decrease the padding-right on .looktrai-text it won't change the way it looks but will give enough room for both to fit.
You can use border-box box-sizing. That way the width of the elements will include the padding and the borders.
You can simplify your code, and even implement text wrapping around the image by doing the following.
Disclaimer: This is a suggestion based on the results you are trying to achieve.
Remove the .looktrai-text and .looktrai-sidediv divs
Format the HTML inside of #looktrai-content like this:
<div id="looktrai-content" class="clear">
<img src="content/looktrai_side.jpg" alt="" class="align-right" />
<p>My paragraph text</p>
<p>My second paragraph</p>
</div>
Add the following CSS:
img.align-right {
float: right;
margin: 0 20px 20px;
}
The result will look something like this: http://codepen.io/anon/pen/yjdxh
This is a cleaner, simpler approach that allows you to reduce code, and maximize flexibility.
I would use float: left for the text div, and float: right for the image div and remove the display: inline-block property. This creates a clearing issue for the footer, but this is easily fixed using one of the many 'clearfix' hacks. My preferred method is using a .group class on the parent container div, as per this article on CSS Tricks. In your case this would be <div id="looktrai-content" class="group">
Okay so this question is asked all over teh interwebs, including on this site multiple times. But I can't seem to apply the answers to others' problems to my own. So here's my specific case:
<div class="logo-align_container">
<div class="logo_image">
<img src="images/logo.png" />
</div>
<div class="logo_text">
<div class="site_name">
<h1>foo</h1>
</div>
<div class="site_slogan">
<h2>bar</h2>
</div>
</div>
<br class="clearBoth" />
</div>
How do I centre logo_image and logo_text vertically and horizontally within logo-align_container? Whenever I apply the fixes scattered across the web I manage to horizontally center the divs, but logo_text will always be aligned at the top of logo-align_container, and nothing I can do repositions it.
Moreover, the image and text make up a considerable part of the page. When the window is too small for them to be positioned inline (which they currently are, through float: left on both and .clearBoth { clear: both; }, I'd like to have them collapse so that logo_text falls below logo_image (which is already happening so far) but also so that both are still horizontally and vertically aligned. If this doesn't come as part of the fix to the first problem, it'd be really great if it could be accomplished separately.
If I had to give logo-align_container a fixed height, it would be 532px.
Thank you for your time!
EDIT: wheresrhys' solution almost hits the mark. Here's what it's not accomplishing which I would like it to do: http://i.imgur.com/BhHMv.png
This fiddle demonstrates a solution: http://jsfiddle.net/wheresrhys/t6pUq/ using display:inline-block
A few points
It won't work in ie7 and below as inline-block isn't supported on elements which have display:inline by default. A decent fallback in that scenario would be to use display block and then set margin: x auto 0 on logo_wrapper, where x is a value that puts the logo and title roughly in the vertical center.
I modified the html slightly - adding a wrapper around all the elements needing to be centered is necessary, and also the comments prevent the whitespace affecting the positioning of the inline-block element.
I am creating my first site from scratch using PHP, MySQL, CSS, HTML, and some script languages. It is a dating site. Sorry for my bad english, but it's not my native language.
I have found a solution to every other problem/issue I have faced. But as I started testing cross-browser compatibility, a weird bug happened in Chrome.
The website is here http://www.writech.net.ee/testsite
The site's idea is that everyone who wants to date someone fills a form with his/her contact data and description and submits it. Every advert shows up as a floating div. These divs are floated left. The divs have fixed height, so if anyone writes a longer description and it doesnt fit to the div a scrollbar appears. The divs which should hold the description text are outlined with 1px red border.
The advert divs are OK in IE9 and Firefox 11 but in Chrome the div with too much text to fit the div which should be applied the "overflow: auto" to show vertical scrollbar for some reason renders to elevated position compared to other divs. At first I thought the problem is related to appearing scrollbar, tried "overflow:hidden" - overflow:hidden hides the excessive text but the div still appears elevated compared to other divs. So the problem is related to how much text the div contains.
As I have no previous cross-browser adaption experience I don't know where to look and what to do. Does anyone have thoughts on which CSS hacks to try?
Have to say I think it's a bit weird that this happens, but if you set the vertical-align property of your .boxes to top it works: .box {vertical-align: top}.
I had a similar problem once before, and float:left worked for it. You can use the same solution, but you'll have to change how the div containing the boxes is centered. I managed to get it to look right in Chrome on a Macbook with the following (you can move the styling to you CSS file, of course):
<div style="margin-left: auto; margin-right: auto; width: 1080px;">
<div class="box" display="float:left">
...
</div>
<div class="box" display="float:left">
...
</div>
...
</div>
You could try applying block display(it's inline-block atm) on the .box class and also throw a float:left on it. (line 324)
When I specify a height in the style for any element inside of this, IE makes the entire thing 100% width, rather than keeping it "autosized" for width.
Other browsers display it fine, but not IE. How do I fix this?
<div style="position:absolute;top:50px;left:50px;background:green;">
<div>
<div>test</div>
<div style="height: 20px;">this makes it 100% width in IE. why?</div>
</div>
</div>
Thanks!
Here's something that may work for you. It's a little hacky, but if you're trying to find a good width for some text, this is the only way besides javascript that I know of. We're basically forcing the width by not allowing the line to break. You can put in <br/>s if you need line breaks.
<div style="position:absolute;top:50px;left:50px;background:green;width:0px">
<div>
<div>test</div>
<div style="height:50px; white-space:nowrap">This is normally sized in IE6</div>
</div>
</div>
On second thought, don't check out the link. It's old and doesn't work as advertised.
Old answer:
http://snippets.dzone.com/posts/show/216
I believe that non-absolutely positioned DIVs automatically expand to fill their container horizontally. Since you haven't specified any container size for this div, it expands to fill the whole page.
I find it odd that Firefox doesn't expand the div... I'm not sure which of them actually has it "right".
At a guess, I would say it's something to do with the hasLayout bug in IE6. My suggestions:
1. Give the containing div (the one with the absolute positioning) a set width.
2. Post an example of what you are trying to achieve. We might be able to suggest a more all-browser friendly way of doing what you want.