I'm currently trying to break a child element out of it's parent which holds overflow: hidden.
The reason for me restricting the dimensions of it's parent are purely for a JavaScript hack. I have tried positioning the child however this still breaks the pages structure and position fixed will be uneffective.
This is the closest I have got so far to achieving this:
<div style="position: relative;">
<div>
<!-- Needs to be overflow hidden and 0 width -->
<ul style="overflow: hidden; width: 0px; height: 0px;">
<li>
<!-- Needs to be visible -->
<div style="position: absolute; top: 0px; left: 0px;">
Tab Content
</div>
</li>
</ul>
</div>
</div>
http://jsfiddle.net/0uwv3nyj/
Does anyone know any kind of css hack or workout to solve this while retaining a standard block display to the element?
Thanks,
Simon
I'm not sure I fully understand your question, but try setting the ul visibility to hidden and the div visibility to visible:
ul --> style="visibility:hidden; height:0;"
div --> style="visibility: visible;"
Related
I need to position the img element (along with other related info about the project) to the bottom right corner of the div with class 'projectItem green'.
Positioning works fine but I cannot get the img element under two parent divs to be visible on the screen. The element highlighting actually highlights the element but your can only see the grid around invisible element.
I tried to use that z-index with the img element instead of the div. I also tried to add display:block parameter to the img element and use z-index there.
Thanx a lot for any pointers!
Here is my code
<div class="projectItem green">
<div class="projectNumber">I-8000</div>
<div title="Testprojekt 25.05.2018" class="halfWidth">Testprojekt 25.05.2018</div>
<div class="halfWidth"><span>Start: </span><span>5/25/2018</span></div>
<div title="" class="halfWidth">UserName</div>
<div class="halfWidth"><span>End: </span><span style="margin-left: 8px;">6/1/2020</span></div>
<div class="halfWidth">Last status update:</div>
<div class="halfWidth"><span style="margin-left: 43px;">5/25/2018</span></div>
<div style="width: 100%; display: inline-block; position: relative; z-index: 1000;"><img style="position: absolute; bottom: 0; right: 0"
src="/system/pscbaf/ImagesLogos/IPM/IPM_NotReported_Icon.PNG">
</div>
</div>
Here is the screenshot from DOM
Here is what I am getting
Here is what I am trying to achieve
I'm trying to overlay two elements on top of each other:
<div style="position: relative;">
<input style="position: absolute; top: 0px; left: 0px">
<div style="position: absolute; top: 3px; left: 3px;">
XXXX-XX-XXX
</div>
</div>
So far so good... the two elements overlay fine, and this will work regardless of where on the page the DIV goes in the flow. But then I go to add the next element to the page:
<div>
PART 2 GOES HERE ABCDEFG
</div>
Uh oh, we have a problem! The next element gets placed under the previous one. How do I get subsequent content back into the normal static flow? The rest of the content can't have to know about this special element, i.e. if the element with the overlay is inserted anywhere in the document it should behave the same as if it was a single element of the same size.
Here's the Fiddle demonstrating the problem.
As #Santi points out, the content of absolutely positioned elements does not actually contribute to setting the height of the element. But, instead of setting a specific value for height (which may not be correct for all viewports), you can just change the input style to be position:relative so that it's height will be set. Then, you can position the overlay on top of it.
<div>
Content that goes first.
</div>
<div style="position: relative;">
<input style="position: relative;">
<div style="position: absolute; top: 1px; left: 3px;">
XXXX-XX-XXX
</div>
</div>
<div>
PART 2 GOES HERE ABCDEFG
</div>
Now, it should be said that you should avoid using inline styles as they create spaghetti code, don't promote code reuse and are difficult to override later, if you need to and, it seems that what you are actually trying to do can be done with basic HTML and no CSS at all:
<div>
Content that goes first.
</div>
<div>
<input placeholder="xxxx-xxx-xxx">
</div>
<div>
PART 2 GOES HERE ABCDEFG
</div>
Elements that are positioned using position: absolute; won't take up any actual height. Your position: relative; div will now also have a height of 0, because none of its children occupy any height.
By simply adding a height to this div, your elements should behave as you expect:
<div>
Content that goes first.
</div>
<div style="position: relative; height: 25px;">
<input style="position: absolute; top: 0px; left: 0px">
<div style="position: absolute; top: 3px; left: 3px;">
XXXX-XX-XXX
</div>
</div>
<div>
PART 2 GOES HERE ABCDEFG
</div>
EDIT: If you don't want a forced-height, you might be better off with this solution by Scott Marcus.
I have a div element that wraps items in it
<div id="#wrapper" style="overflow: scroll; max-height: 100%;">
<ul>
<!--lots of li's go here.
When an li is clicked, "#details" pop from below.
-->
</ul>
</div>
<div id="#detils" style="display:none; height:30%;">item details</div>
Since there might be lots of items, the div has:
max-height: 100%;
When an item is clicked, details section should pop from below.
Its height is 30%.
How can I make the div wrapper scrollbar height automatically adapt to the new situation in CSS only. In other words: its height should now change to 100%-70%=30%
You can add a class which has height:30; when the item is clicked.
I hope this can help you.
I'm trying to figure out how to stack two boxes in my view using HTML/CSS, for a mobile web application. I don't want to use JavaScript, or hardcode values anywhere within this skeleton design.
Requirements:
top box is dynamic height, contents need to be absolutely positioned and account for overflow (which is to be hidden if out of bounds)
bottom box is fixed height
http://i.imgur.com/Zun8oIi.png
I've been messing around, and came up with this here. It works in Safari and Firefox. However, what I am not sure of, is that it is valid CSS. Basically, if I deploy this web app, do I have to worry about it breaking in the future because I'm violating some arcane and obscure styling rule? If so... how can I fix the code, so that it's valid?
I'm not concerned about a browser breaking it because they farked up the rendering engine... because it'll get fixed. I'm concerned about whether or not this is valid code to begin with.
Here's the code, there's the CSS styling included in the fiddle
<!-- this is the body of the page, with padding -->
<div class="BodyContainer" >
<!-- define our table -->
<div class="table" style="padding: 0; margin: 0; width: 96vw">
<!-- row -->
<div style="display: table-row; padding: 0; margin: 0">
<!-- cell -->
<!-- this is the cell that needs to be dynamic height -->
<!-- and overflow hidden any possible content as well -->
<div class="cell" style="width: 100%">
<!-- relative inner cell -->
<div style="position:relative; height: 100%; padding: 0">
<!-- absolute hidden cell that takes up the entire space -->
<div style="position:absolute; top: 0; bottom:0; left: 0; right:0; padding: 0; background: yellow; overflow: hidden;">
This text appears on the top
<!-- fixed bottom content -->
<div style="position: absolute; bottom: 0">
This text appears on the bottom of the cell
</div>
</div>
</div>
</div>
</div>
<div style="display: table-row">
<!-- bottom row that's fixed size -->
<div class="cell" style="background-color: red; border-top: 2vw solid black;">
<!-- content that will change on page to page -->
<div style="height: 20vw !important;">
foo
</div>
</div>
</div>
</div>
</div>
Looks solid to me. It's valid CSS3 and I can't find anything to suggest support for the style here will be dropped.
I've this dropdown, to make it work, i see only one solution is taking off the overflow, but if i take it it stays like this:
but if i apply an overflow: hidden it stays like this:
How can i make this work. I've tried to apply overflow: hidden; in other div but dosen't work.
Link to website: http://store01.titus.biz/
<div class="span12 horizontal-category" style="overflow: hidden">
<span class="carousel-prev disabled" id="carousel-category-prev"></span>
<ul class="nav myCustomNav">
<li class="dropdown"></li>
... </ul>
</div>
You could try to use clipping. First remove the overflow on div.span12.horizontal-category. Then add a clip rect on the div that is between the 2 control buttons #carousel-category-prev, #carousel-category-next. The position of absolute is required to use clipping however. But this should be fine.
<div class="span12 horizontal-category">
<span id="carousel-category-prev" class="carousel-prev disabled"></span>
<div style="position: absolute; clip: rect(auto, auto, 500px, auto);"></div>
<span id="carousel-category-next" class="carousel-next"></span>
</div>
This should clip the overflow on the left and right. Then increase the bottom (500px) to whatever value you need it to be. Clipping is a way to control how the overflow works.
I have a try, first make the ul have enough height to display the dropdown menu, then apply margin-top: -xxxpx to the element below the ul.
I test the follow code in my Chrome:
edit margin-bottom: 200px; to .horizontal-category ul
add margin-top: -180px; to .ei-slider
This way don't need CSS3 , so it's more compatibility. Test it!
This will maybe help you:
Remove overflow:hidden from class="span12 horizontal-category".
Add overflow:hidden to class="main-container".
And you could give control buttons, like ../img/button-prev-disabled.png a white background, so you can't see the corners of the menu when it slides to left and right.