I've been trying to fix this layout problem for an hour or so with no luck. I simply want my li to expand to match the height of its contents, so that margin-bottom will work correctly. Here's my code (note: this is just a draft, so the relevant CSS is mixed in via style attributes):
<!-- This uses ASP.NET markup syntax but should still be legible to anyone -->
<h2>Related</h2>
<ul class="list-unstyled owner-list">
#foreach (var package in Model.RecommendedPackages)
{
<li style="position: relative; word-break: break-all; height: auto;">
<a href="#Url.Package(package.Id)" title="#package.Id" target="_blank">
<img class="owner-image" aria-hidden="true" alt="" width="32" height="32"
src="#(PackageHelper.ShouldRenderUrl(package.IconUrl) ? package.IconUrl : Url.Absolute("~/Content/gallery/img/default-package-icon.svg"))"
#ViewHelpers.ImageFallback(Url.Absolute("~/Content/gallery/img/default-package-icon-256x256.png"))
/>
</a>
<div style="display: inline-block; position: absolute;">
#package.Id
</div>
</li>
}
</ul>
Here are the results:
Here are the dimensions of the div inside the li:
Here are the dimensions of the li, which is clearly shorter than its child div:
I tried using height: auto; to fix this (as you can see in the picture) but it didn't work. Am I doing anything wrong?
It's because you have an absolutely positioned element inside of a relatively positioned element. When you have an absolutely positioned element, it doesn't take up any visual space inside the containing non-statically positioned element.
An absolute element is an element positioned relative to it's nearest non-static ancestor.
So, if you have a fixed, relative, sticky, or another absolute element ancestor (outer element), the inner element won't take up any space there.
The li element gets the 32 px height from the image inside, since li will automatically be the height of the contents, and additionally, it is explicitly (and unnecessarily) set to auto.
What you describe as the desired affect is the default. The height of the outer element will automatically fit the contents. The solution is to either put no position, and that will default or explicitly set position to a attribute that does take up space in its ancestors (static, relative, etc.).
Related
Using Draw2d and the menu selection code from the demo but I don't get the expected result...
In the demo, the menu appears on the right side of the clicked element. In my version the menu appears way off to the top.
This seems to be caused by the fact that I have some HTML directly above the canvas (header, etc...). On the contrary if the canvas is at the very top of the page it works well.
Found a way to fix this.
It's all about where you append the menu's HTML and relative positionning
In the demo there isn't any HTML above the canvas (on the website it's an iframe so what you see above is not really there from the canvas perspective) so it works.
The demo is misleading because in the code they add the HTML menu in the body tag. They can do that simply because their page is composed of only two elements : the body and the canvas.
In my case and probably yours too, doing this results in adding the HTML menu far far far far away from the canvas itself resulting in a position that is wayoff !
What they do is :
$("body").append(this.overlay);
What you should do is append the HTML menu (this.overlay) as a sibling of the canvas. Do NOT add it in the canvas itself. If you do, you won't catch click events anymore.
Your HTML should look like this :
<div id="some-parent">
<div id="gfx_holder">THE CANVAS</div>
</div>
And the code updated to
$("#some-parent").append(this.overlay);
But it's not finished yet. As the menu is added using position: absolute you'll need your parent containers set to position: relative so the the child's absolute position would become relative to the parent and not web page. It's CSS... You know...
Also, the parent should be the exact same size as the child canvas !
So the HTML should evolve to this :
<div id="some-parent" style="position: relative; height: 800px">
<div id="gfx_holder" style="height: 800px">THE CANVAS</div>
</div>
And when the menu's HTML is added it should look like that at runtime :
<div id="some-parent" style="position: relative; height: 800px">
<div id="gfx_holder" style="height: 800px">THE CANVAS</div>
<div class="overlayMenu" style="top: 230px; left: 197.391px;">⊕</div>
</div>
See ? The overlayMenu has position: absolute which allows it to be rendered at a correct position...
hf
I need to build a tooltip, but I need to position the tooltip based on the body because its position is absolute and I don't want any relative parent to break my style.
<div style="position: relative;">
<input>
<p class="tooltip">tooltip</p>
</div>
I need the tooltip to be on the input but always relative to the body.
How can I calc this?
Elements with position: absolute are always realtive to the first parent Element with relative. (or anything except static and fixed)
So to fix it you need to avoid using position: relative on the parent
<div>
<input>
<p class="tooltip">tooltip</p>
</div>
or since it's anyways absolute positioned move the tooltip out of the relative element.
<p class="tooltip">tooltip</p>
<div style="position: relative;">
<input>
</div>
Using position:absolute; should position the tooltip relative to the nearest positioned element—in this case, the div marked position:relative;. (See the CSS3 reference on absolute positioning.)
So in your example, you don't need to worry about any parent elements with relative positioning, as they shouldn't affect the absolute positioning context. You should be able to simply use:
<div style="position: relative;">
<input>
<p class="tooltip" style="position:absolute; top:0; left:0;>tooltip</p>
</div>
Unless I'm misunderstanding your question, in which case, please provide more detailed examples.
EDIT:
If you're trying to avoid using position: relative, you can set the tooltip position with javascript:
var input = document.getElementById('input-id');
var tooltip = document.getElementById('tooltip-id');
tooltip.style.left = (input.offsetLeft)+'px';
tooltip.style.top = (input.offsetTop)+'px';
change class to style:
<div>
<input>
<p class="tooltip" style="position:relative;">tooltip</p>
</div>
Assuming I have 2 elements on a responsive design like this:
<div id="container">
<div class="first"></div>
<div class="second"></div>
</div>
both of them with style contains:
width: auto;
display: inline-block;
float: left;
And because I'm expecting different screen sizes to view page, so, according to screen size, sometimes they will be rendered/displayed on the same row, and sometimes they will not!, the second DIV will be moved to a separate row.
So, I'm wondering, how can I check if they are on the same line with JavaScript?
Thank you
"on the same line" would require inline elements or floating block elements of the exact same height. DIVs are block elements by default. So either use <span> tags instead of <div>, or add display: inline-block;to the CSS rule of those DIVs
ADDITION after EDIT OF QUESTION:
width: auto for a <div> means 100% of the parent element (in this case full width). As I wrote: If you have blocks, use display: inline-block; in their CSS. If you want them to have the same height, put them into a common container DIV (which you already have) and apply the following CSS:
#container {
display: table;
}
.first, .second {
display: table-cell;
width: 50%;
}
Aha (edited question), Javascript: Well, read out the DIV widths, add them and compare the result to the (read-out) container width.
You can use the element bounding boxes and check for overlap:
var rect1 = $('.first')[0].getBoundingClientRect();
var rect2 = $('.second')[0].getBoundingClientRect();
var overlaps = rect1.top <= rect2.bottom && rect2.top <= rect1.bottom;
This checks for any overlap which will probably be sufficient for your use. I used jQuery to get the elements but you can use pure js in the same way, it would just be a bit more verbose.
There is no concept of line on a page. You can check the x and y position of any element in the window and then decide if that meets whatever criteria you have for "on the same line".
By default, a div is the full width of a window so the two divs inside your container in this HTML:
<div id="container">
<div class="first"></div>
<div class="second"></div>
</div>
will be one above the other unless there is some other CSS you have not disclosed that controls the layout to allow them to be in the same row. If they are indeed width: auto and don't have any other layout rules affecting this, then they will each be full width and thus first will be above second in the layout stream. They would never be "on the same line" by any typical definition of that phrase.
Feel free to try it out here: https://jsfiddle.net/jfriend00/y0k7hLr8/ by resizing the right pane to any width you want. In all cases, the first will stay on top of the second.
If, on the other hand, you allow the div elements to have a different type of layout such as let them be display: inline-block and define a width for them, then the layout engine will fit as many on a given row as possible like here: https://jsfiddle.net/jfriend00/229rs97p/
Something tells me display: flex might help you in this. Read https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for more info.
See this JSFiddle
I want to make the .newslink links all the way to the borders of the .content divs.
I have a slideshow of different content that gets messed up either if I set the a tag around the div or if I apply display:block / display:inline-block to the a element.
Right now the links are only around the image and text because of the 15px padding in .content. You can check this by hovering your mouse over the div (near the border) compared to over the image and text area. I want each link to completely fill the surrounding div.
Is it in this case possible to accomplish without setting the a tag around the div or applying display:block / display:inline-block to the a element?
Working Fiddle: http://jsfiddle.net/8tqryvu5/
Firstly, let's get rid of the Table markup as you're not marking up a table.
<div id="tableNews">
<div class="cell2">
<div id="slideshow">
<div class="content">
<a href="#" id="rightLink1" class="newsLink" target="_blank">
<div class="picDiv">
<img id="rightPic1" class="pic2" src="http://static3.businessinsider.com/image/5238c9c5ecad047f12b2751a/internet-famous-grumpy-cat-just-landed-an-endorsement-deal-with-friskies.jpg"/>
</div>
<div class="text">
<h2 id="title1">title 1</h2>
<p id="rightBoxSubText1">asdasd</p>
</div>
</a>
</div>
</div>
</div>
</div>
To achieve the effect you should apply the padding to the anchor link as this wraps both the images and text (essentially forming the border). Here's the part to take note of:
.newsLink {
display: block;
padding: 15px;
}
As it's an inline element you will need to set it to display:block in order to make it wrap the elements inside it. If you correctly apply the style to the surrounding elements then setting it to display:block will not effect the layout.
Hope that helps.
I am not 100% sure that I got right the whole thing but I think you can achieve this by using
.newsLink{position:absolute;top:0;left:0;bottom:0;right:0;background:red}
It will take the wodth of the slideshow, which is the relative element. If you want it to take the size of the .content and not more you will have to add a wrap in display block around you tag
Here is a jsfiddle: http://jsfiddle.net/8c041xy7/5/
You just need to absolute position anchor tag
.newsLink {
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
I have very simple example of an un-ordered list with a black border, and one of its child elements hidden: http://jsfiddle.net/spryno724/Sm9Lx/1/. Notice how the hidden child element is considerably wider than the visible element, but the container only scales to the width of the visible child.
Is there a way within CSS to automatically scale the width of this container to the width of its widest child element, even if that element is hidden?
I know that this is possible with JavaScript, but I would like to avoid a scripting hack and go straight CSS, if possible.
Also, I'd like to avoid setting a specific width because in my actual application, my container will contain visual objects of unknown widths.
Thank you for your time.
use visibility: hidden; rather than display: none; on the hidden li
visibility: hidden; retains the elements space
display: none; acts as if the element doesnt exist in the markup
How about:
<li style="visibility: hidden; height: 0;">This is not the first list element, ok?</li>
Instead of display: none you can use opacity: 0