I don't understand why a <div> in my HTML code is being taken out of its container height computation, despite it having a non-zero height and not being absolutely positioned.
I've tried simplifying the code and reproducing the problem in a jsfiddle, but I couldn't reproduce it there, so it seems to me my only choice is to let you look at the real code.
The problem is that when you shrink the window just below 768 pixels of width (which is a breakpoint in my CSS) the <div class="vs-month-timepicker-container">, that contains the calendar and the timepicker, gets a computed height that does not include the timepicker (heck, it does not even include the full calendar), so it happens the <div class="wpv-booking-option-title wpv-booking-accommodation-title"> below it, that contains the text "Which accommodation do you want?" overlaps the calendar and the timepicker.
Can you help me understand why?
Remove the flex-wrap: wrap; of the element .wpv-calendar-wrapperand the height is okay.
Related
I tried to replicate the react-resizable-panels example component usage by copying over the code to Codesandbox. But in the codesandbox, the content doesn't take up the whole viewport height. There's absolutely no difference in styles as far as I can tell. The body height is 100%. It seems to expand it to full-height only in the react-resizable-panels example.
Here are the two identical code examples for reference:
Original extracted: https://react-resizable-panels.surge.sh
Codesandbox clone: https://y6yhjv.csb.app
Any help with debugging the difference between the two examples would be highly appreciated.
Thanks. :)
It looks like the missing <!Doctype html> makes react-resizable-panels example revert back to 'quirks' mode and cause html and body take up 100% of the page height. Just tested with a quick code and below is the result.
See thoroughly for the structure in both and their respective computed height.
height: 100% requires a parent element to reference for height. I'm actually more surprised that the first example goes to full height.
Either way, adding height: 100vh; to your <div id="root"> element (ie. parent element) will give you full height. Optionally, you could add it to the element that's currently set to height: 100%.
I have an html element that I want to be height 400px. I set that via style tag and css. The contents of this element only extend to 350px. I want the remainder 50px to be the margin-bottom of this element.
Now it is the classified as the actual element rather than margin. Is there an elegant css solution to this?
I know this can be done with javascript, but I'd prefer not to as the element has varying height and I would have to add more to the on-load and on-resize functions, making it more laggy to resize.
Thanks
First of all, it would be a good idea to post a live demo of your needs, either on CodePen or JSFiddle. This allows us to understand your problem, so that we can solve it.
On to your question, the remaining space should act as a margin without any additional code. Here's a demo: http://codepen.io/awesomeaniruddh/pen/bVwZdM
This is the HTML code in the codepen:
<section class="foo">
Foo
</section>
Bar
There is one line of text in the HTML element, whose height is set to 400px. There is another line of text after the element. The margin is automatically applied.
Hope I helped. If I misunderstood your question, please let me know!
See My Fiddle:
http://jsfiddle.net/5BEsZ/
I've discovered something very strange that I haven't seen documented anywhere else... Was wondering if you all had a solution.
You'll notice the negative margin hits a limit at around -212% for image elements. Is there a reason for this? Can you think of a work around?
Why I Need This (what I've tried):
I'm making a fluid layout and I want to display a rating system. I have a sprite sheet of stars (similar to the one in the fiddle) that I want to reuse at various sizes.
Because the size changes I can't use a background image. So I decided to use an image inside a container with a variable width and overflow:hidden. The sprite sheet adjusts to the width of the container and the container's viewable content is determined by a padding-top:20%. This is so it can be fluid with its width (since every star is a box, the total height is 20% the width).
Then I try and position the star image inside the container with margin-top. I tried using position:relative and a top:-X%, but because the container technically has no height this was causing issue on mobile phones (-100% of 0 is 0, etc).
So I assumed negative margin would work, but then discovered this strange issue!
NOTE: Because it affects only the last row I can make it work in my situation by using a padding-bottom instead of top (thereby bumping every star row up 1), but this isn't an adequate solution for me because it just ignores the problem. What if I wanted quarter stars?
I've updated your fiddle. img tags are "inline" elements by default, which impacts the way margin is calculated relative to the containing element. By forcing the image element to be rendered like a block (display: block), you're able to achieve the results you were expecting. A div element is a block by default.
As a side note, you'll want to avoid using inline styles (a different sort of "inline"!) wherever possible. Typically your styles would be included in a stylesheet instead of in a style attribute directly on the element. I included the fix (display: block) in the attribute to match the code style of your html.
I don't know why, but if you float the image the problem goes away.
<img src="http://www.whitepages.com/common/images/sprite_stars.gif?1343868502" id="stars" style="width:100%; float: left;" />
So, the answer to fix your problem: http://jsfiddle.net/5BEsZ/2/
If anyone could explain why this happens?
I have simple page using a two-column page layout that breaks on zooming. Here it is - try zooming in with cmd+:
http://jamesabbottdd.com/ems-with-max-width.html
The header breaks on the right side, causing a horizontal scrollbar to appear. Originally I thought this was due to using pixels for sizing elements and setting max-width. This article is about that very problem:
http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/
Then I overrode pixels with ems but the problem persists.
This intrigues me to no end. I’ve been using CSS for about a decade now, the last 3 years on a high level, but haven’t yet figured out why the above page breaks but this one:
http://framelessgrid.com/
does not, regardless of how closely I zoom in.
Any help greatly appreciated.
Hmmm, it looks a bit like you've inadvertently linked together two slightly unrelated observations, making it a bit more difficult to diagnose the actual problem.
Separating the Symptoms
Based on your screenshot, it does appear that your header is coming up with some visual glitches. Additionally, a horizontal scrollbar appears - but rest assured that this is not due to any property of your header. In fact, it is due to your wrapper div below the header, which has a width of 1130px. So when you zoom in that much, it can't all show on the screen, and thus creates the scrollbar.
The True Issue
Returning to the problem with your header though, the reason why the colour is disappearing is because your header div has a width of 100%. If, when you took that screenshot, you were scrolled all the way to the left, you would have seen no problem with the header's background colour, because it would have covered 100% of the browser's width. (If you're wondering where this width of 100% came from, it's due to the h1 element inside the header; an h1 generally has a default width of 100%, a style you wouldn't be able to see even with an element inspector like Firebug open.)
Note that the site you provided does not display this issue due to a few things: first, its header doesn't have a background colour, so you wouldn't see any kind of issue in that respect (if it did have one though, you'd immediately see that the div doesn't actually span the whole screen as yours does; it is only a little wider than the text within, and has a fixed width. The title is centred not through only usage of the h1 element's width of 100% and text-align:center, but is also due to the margin:0 auto applied to the header div. But now, how to fix your issue?
A Solution
With the current structure of your page, the easiest solution would be to give your header div a defined width. Well, not a width per se, but rather a min-width, one which is identical to the width of your wrapper div. If you give it the style of min-width:1130px, you should see your problem solved.
I hope this was helpful! (Sorry if it was a little long to read, though.)
Is there a way to make an element not contribute to parent overflow, but keep it visible? Let me clarify
There is a watermark-like logo to be applied to a page in the manner below. It is supposed to be positioned partly outside the main content (dashed blue line)
I'm not aware of the option to set an element background in such a manner that it would persist as the browser window is resized horizontally, so I've just added a <div> with the logo as its background and position:absolute with the necessary offset relative to main content container.
Previously, the page would not get a horizontal scrollbar as long as the browser was wider than W1. Now, with an additional "watermark" element added outside of the main content box, the scrollbar would appear whenever the browser is narrower than W2
Is there something obvious I'm missing? A background setting, or possibly a neat margin workaround/
Update:
I've added a rough jsfiddle to illustrate the issue
Unfortunately, just because you nested the "watermark" div and positioned it absolutely doesn't make it outside of the document. If you put it outside of the document, the page will scroll (as you see).
To me, the first solution I think of is to move the watermark outside of the "content" div and apply the watermark to its parent container. I'm guessing you haven't done that because you need it to be relative to the "content" div, but it's something to try.
Also, the reason it scrolls is because the document has been overflow. The quick fix, yet not recommended, is to use "overflow-x: hidden;" on the parent container of the "content" div.
It's harder to give you a solution since you've stripped the rest of your HTML, and some "fixes" may not be as applicable if your structure is complicated in certain ways.
Remember that the width of your elements is greater than the actual "width" it includes padding & margins, if you have padding on your div reduce the "width" by the equivalent amount.
does that make sense? if you post the actual css & html it might be easier to give you a more detailed answer
additionally could you not assign the image as the background of the actual body element and set it to centered?
I've had a play with the code and come up with a possible solution for you.
set
body{overflow-x:hidden;}
then add
#media all and (max-width: 400px)
{
body{overflow-x:auto; }
}
as soon as your screen is smaller than 400px (the width of the div) your overflow:hidden will be overridden and you'll be given you scroll bars.
at this point you may also want to reduce the width of your watermark.