I've got a div that contains an unordered list that gets updated by an ajax query. It's used for a livesearch.
Now I have this problem that when I set the height of the div to a fixed height (let's say 200) that the results are shown as they should. But when I don't set the height, or set it to auto, the div has a height of 0 when the searchresults are added to the ul.
I think this has something to do with the ajaxquery and the browser not recognizing the new height, but I don't know how to set it the right way.
How can I fix this?
Thanks in advance,
Try adding some dummy content statically on the html page and see if the height is still 0. If it is then you have a CSS issue. Most probably the contents of the div (list) are absolute positioned so the parent div cannot know the list's height.
You can try adding adding a min-height to the div containing the ul.
min-height: whatever-you-want-minimum-height;
Related
I am making a header component and what I want to achieve is to make my header picture stretch to the full width of the webpage, even when it the browser shrinks, however when you shrink the browser the picture does not stretch 100% and is driving me insane. I don't want to remove the scroll-x property, so how can I fix this? What am I doing wrong? Here is is a picture of my issue:
https://imgur.com/YCZOYGE
And here is a codepen with my code:
https://jsfiddle.net/philipkovachev9/ax2Ljtvn/5/
So, as promised I found a solution.
Change display:flex from your parent div, to display: inline-block and remove width:100%. You div will have the size of your content, even when it overflows.
Setting the width to 100% will be relative to the parent, it was the body. However, the body didn't include the overflow.
I hope it works :)
PS: If you still need display:flex, create a child div, with flex attribute.
add this css
body{padding:0;margin:0}
I have absolute positioned div that is used as a tooltip with white background. So his position is set based on mouse coordinate.
I want my tooltip to have max-width but if smaller then width should be based on content.
If I put max-width and wrap text is wrapping after every word.
EDIT
here is an example of usage
https://jsfiddle.net/miniverse_solutions/sgct5qux/
I also realized that translate3d is missing in up. First I found this example where it works like I want it to work
http://jsfiddle.net/audetwebdesign/vVhWR/
Next thing I realized that my parent nodes have width = 0.
When I add width = 0 in that sample it works like mine, so then I tried removing in my example same width = 0 but it still didn't work. It looks like translate3d is messing with it.
Since having only one wrapped absolute div with width = 0 reproducing the same problem, it looks like to me that when two absolute positioned divs (one inside the other) automatically sets outer div width to 0.
Removing absolute positioning from outer div solved the problem.
Don't know why was outer div even absolute when he is always rendered right under body with top and left having value 0.
Without fixing the widths of any of the elements, I would like the parent div element to ignore the text when setting it's width. I want the element's width only to be affected by the width of the image.
<div>
<img src="https://lh4.ggpht.com/9BAW9uE48gxNUmnQ7T6ALpNTsrCHOZBMfF__mbamBC36edSw0uc-kjQxgtZ3O3aQWFY=h900"/>
<p>I want this text to wrap once this paragraph element reaches the width of the image.</p>
</div>
div {
background: green;
display: inline-block;
}
my jsFiddle
Any advice is greatly appreciated
Change display property of div to table-caption
(Tested in firefox and chrome)
Updated jsfiddle
Here's the best that I've found:
http://jsfiddle.net/y8Qnd/3/
What I've done is to take the p tag out of flow with position: absolute so that the containing div has the width of just the image. Then, have the p tag inherit the width of its parent, the container. This does not fix the width of the p tag, and is completely cross browser.
This would mean you would have to move up the DOM tree, as you want the image to determine it's parent width. Moving up the DOM tree is unfortunately not possible (yet).
As an alternative, you could position the text absolute, to lift it out of the document flow, and therefore not influence the width of it's parent div. This however would also mean that the height does not get influenced, which is probably not what you are after. You could mimic the correct height by repeating the parent background, but the content underneath would not get pushed down, so that is also not really an option I think. I set up an example anyway: http://jsfiddle.net/y8Qnd/2/
The only option I can think of is javascript. Get the width of the image and apply it to the parent container. In jQuery (I will probably get bashed for using jQuery for such a trivial thing, but I am just not used to writing 'old school javascript' anymore...) it would look something like this:
var $wrapper = $('div'); // you will probabaly want to use some id or class here
var width = $wrapper.find('img').width();
$wrapper.css('width', width);
and an example: http://jsfiddle.net/y8Qnd/6/
I've posted a fiddle Click Here
i've set the display property of both div's as table-cell. and width of one of the div is set to 24%. but i don't get the result in screen. am i doing something wrong?
I don't know gor what reason you set the display of the divs to table-cell. That makes not really sense in your case.
Set the divs "recent-cell" and container to float:left and you will have no problems with the fluid behaviour.
I'm currently developping a Chrome extension (which means that I don't need a cross browser solution).
Basically, I want my web page to be separated into two parts. A left panel which would take 20% of the width and 100% of the height and a right panel which would take 80% of the width and 100% of the height. Those panels would contain various elements, textareas, list, select.
The issue is that I don't know how to achieve this and to handle resizement. Currently, I'm using jQuery with a window.onresize hook. I keep changing the width and height based on the window's size.
I want to know if that could be done in a simplier way, using CSS for instance. And what should I use? A div, a table, etc...
Thanks in Advance.
You could put the existing panel, or element divs & spans inside a containing relative div. If
you use position:absolute for the panel divs, they will then be positioned
absolutely, relative to the containing div, not the page body.
http://css-tricks.com/791-absolute-positioning-inside-relative-positioning/
Please adding css into your div, add min-height, and max-height properties
#mydiv{
min-height: 700px;
}