I'm using rickshaw and have a graph hover/annotation where a colour swatch (defined using a <span> is overlapping with text within the <div> that they're both contained in.
Here's my HTML:
<div class="detail" style="left:250px">
<div class="item active" style="top: 200px">
<span style="background-color: #30c020" class="detail_swatch"></span>
Very very very very very long label: 67<br/>
<span style="color:#A0A0A0">Wed, 12 Feb 2014 18:51:01 GMT</span>
</div>
</div>
and here's my CSS:
.detail {
position: absolute;
}
.detail .item {
position: absolute;
padding: 0.25em;
font-size: 12px;
font-family: Arial, sans-serif;
color: white;
white-space: nowrap;
}
.detail .item.active {
opacity: 1;
background: rgba(0, 0, 0, 0.8);
}
.detail_swatch {
display: inline-block;
float: right;
height: 10px;
margin: 0 4px 10px 10px;
width: 10px;
}
The detail_swatch correctly displays in the upper right hand corner, but will overlap the very very ... long label. Most solutions I've read to this problem involve changing the position statement of the containing div. That's not an option.
Is there any way I can ensure the detail_swatch does not overlap the text, and instead expands the div they're contained in (horizontally)?
This code is available on JSFiddle here, which also displays the problem.
You can add a padding-left: 15px; to the .detail .item.active {} to ensure that the item will not be overlapped by text. Then I made the .detail_swatch to be positioned absolute instead of float: right; so it overlaps the padding I added.
Here is the changed css:
.detail .item.active {
opacity: 1;
background: rgba(0, 0, 0, 0.8);
padding-right: 15px;
}
.detail_swatch {
display: inline-block;
position: absolute;
right: 2px;
height: 10px;
margin: 0 4px 10px 10px;
width: 10px;
}
Finally, a fiddle: Demo
Fiddle with very very long text: Demo
If you want the element at a fixed width you could use text-overflow: ellipsis
jsfiddle
.detail .text {
display: inline-block;
max-width: 90%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
The root cause of the issue is that span is an inline elemenent, it is meant to be shown inline. You want the span containing the date to behave like a block-level element, so your choice of element is wrong.
The solution is simple; use a divs instead of span to contain the date and remove the br.
Related
Quick question here. I'm using a database and inserting an 'Image Name' on top of the image, as can be seen here:
Currently the padding of the Image Name is a number, however I want the padding to go until the border of the image. I tried doing 'Padding: right 250;', however clearly that won't work as the right padding starts at the end of the Image Name, which can be of varying length.
This made me start thinking that it needs to be Dynamic, and I am most certainly new to this. I've looked at various things online however can't seem to find similar things, which probably means I'm searching for the wrong thing. Anyway, any help woud be great.
Cheers,
Jake
**Current CSS (obviously lots more exists, but this is requried bit)- **
h3.imageName {
position: absolute; top: 278px; left: 10;
width: 100%;
z-index: 20;
}
h3.imageName span {
color: white;
font: bold 18px Helvetica, Sans-Serif;
background: rgba(0, 0, 0, 0.7);
padding: 8;
}
**Current HTML - **
<h3 class="imageName"><span><?php echo $row['name']; ?></span></h3>
You could just give the whole text area a width if the image container width does not change. Also consider using bottom: 0; rather than top:# in this instance too.
You're using a span which is a display:inline; element which means it's width is not auto or 100%. You've added a background colour to the span meaning the background doesn't stretch to the edges of the parent element. Put your background on the parent being your h3 element. You've already used width:100%; and if you want it in the bottom left corner you should try this:
h3{position:absolute;left:0;right:0;bottom:0;background:#000000;background:rgba(0,0,0,0.7);}
Also I see you're adding a padding and position of 10px. So you could use a margin like so
margin:0px 10px;
This will keep the h3 element 10px alway from either side of the parent element.
to keep it 10px away from the bottom. Add bottom:10px; or even margin-bottom:10px; to be consistent.
Also we don't really need any styles on the span itself as it's a child element of the h3. So just put your styles from the span the the h3 so all together
h3{position:absolute;left:0;right:0;bottom:0px;margin:10px;marign-top:0px;background:#000000;background:rgba(0,0,0,0.7);color:#FFFFFF;font-family:Helvetica,Sans-Serif;padding:8px;}
Also! Don't forget to add a position relative to h3's parent element!
`position:relative;`
It's not entirely clear how this is structured but an absolutely positioned element is positioned according to the edges of the closest non-static positioned ancestor.
Unfortunately, this includes borders and padding.
One option would be to wrap them image in another element and apply the border to that:
* {
box-sizing: border-box;
margin: 0;
}
body {
text-align: center;
}
.wrap {
margin: 1em;
display: inline-block;
}
.inner {
position: relative;
border: 10px solid pink;
}
img {
display: block;
}
.imageName {
position: absolute;
width: 100%;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.7);
z-index: 2;
text-align: left;
padding: 8px;
}
h3.imageName span {
color: white;
font: bold 18px Helvetica, Sans-Serif;
}
<div class="wrap">
<div class="inner">
<img src="http://lorempixel.com/400/200/sports/" alt="" />
<h3 class="imageName"><span>Image Title</span></h3>
</div>
</div>
As an alternative to the border...a box-shadow might be an option as this does not affect the size of the element.
* {
box-sizing: border-box;
margin: 0;
}
body {
text-align: center;
}
.wrap {
margin: 1em;
display: inline-block;
position: relative;
}
img {
display: block;
box-shadow: 0 0 0 10px pink;
}
.imageName {
position: absolute;
width: 100%;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.7);
z-index: 2;
text-align: left;
padding: 8px;
}
h3.imageName span {
color: white;
font: bold 18px Helvetica, Sans-Serif;
}
<div class="wrap">
<img src="http://lorempixel.com/400/200/sports/" alt="" />
<h3 class="imageName"><span>Image Title</span></h3>
</div>
Fiddle: https://jsfiddle.net/wa51kdh7/
Code:
HTML:
Hello world
<span class="span2">
Goodbye cruel world
</span>
CSS:
span {
display: inline-block;
margin: 0;
padding: 0;
line-height: 16px;
font-size: 16px;
height: 16px;
}
.span1 {
background-color: lightblue;
}
.span2 {
background-color: pink;
overflow: hidden;
width: 130px;
text-overflow: ellipsis;
}
Here I am trying to create two spans next to each other, only one of them has overflow: hidden and the other shouldn't have overflow: hidden. For some reason the overflow: hidden affects the heights and they don't line up - even when I use an explicit height.
Any idea how to fix this?
This can also be fixed by adding vertical-align: top to the span's CSS rule. The reason that both rules fix the problem is that they enforce the vertical alignment of the divs.
Adding a vertical-align rule will keep you from potentially having the elements that follow from needing to be cleared.
span {
display: inline-block;
margin: 0;
padding: 0;
line-height: 16px;
font-size: 16px;
height: 16px;
vertical-align: middle;
}
Hi I just updated your span to float: left and it works. It's not the overflow but the fact the spans aren't floated that they are misaligned.
For a given word wrapped in a span element, I am trying to make a tooltip appear on hover using plain CSS only (without the various tooltip functions, the reason being that I need to have LaTeX displayed within the tooltip). The tooltip itself is a span within its parent span. Currently I'm getting a tooltip that is off center (left) while I'm trying to achieve the result on the right:
JSFiddle here. I've tried various combination of display (inline, table, block) with auto 0 margin etc. unsuccessfully.
Try adding the following css property and let me know how that works for you:
.link-cont:hover .tooltip{
display: table;
left: 10%;
}
You ought to be able to adjust to suit your needs - 10% seemed to do the trick with this particular example.
(I've updated your JS fiddle for you with the above)
It's because your tool tip is position absolute. You can't use margin auto on absolute.
Try having your container to place the tool tip above the text absolute and then have another child element inside that is relative. You can the give that element margin auto.
A fairly easy way to center the tool-tip is to create a wrapper .tip-wrap that is
a child element of the link text block .link-cont. tip-wrap has the same width
as its parent and has text-align: center to center the inline-block .tooltip.
.tip-wrap is absolutely positioned just above the top border of .link-cont.
Since you specifiec a height of 20px, and the decorative triangle is 5px, the
top offset is 25px.
Note: If your tool tip is longer than the link text, then you need to make some
adjustments to the positioning of the .tip-wrap. Specify a sufficiently long
width (the exact length does not matter), and then apply a negative margin equal
to half of the specified width.
.tip-wrap {
position: absolute;
left: 50%;
margin-left: -100px;
bottom: 25px;
width: 200px;
display: none;
text-align: center;
}
.link-cont {
display: inline-block;
cursor: default;
position: relative;
background: grey;
width: auto;
text-align: center;
white-space: nowrap;
overflow: visible;
}
.tooltip {
background: #000;
color: #fff;
text-decoration: none;
padding: 15px;
border-radius: 10px;
display: inline-block;
height: 20px;
height: auto;
text-align: center;
}
.link-cont:hover .tip-wrap {
display: block;
}
.tooltip .tooltip-triangle {
display: block;
position: absolute;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
content: "";
}
.tooltip .tooltip-triangle {
border-top: 5px solid #000;
bottom: -5px;
left: calc(50% - 5px); /* slightly more accurate */
}
<p>Text.
<br>
<br>
<br>This is a <span class="link-cont">loooooooooooooooooooooooooong
<span class="tip-wrap"><span class="tooltip ">the content<span class="tooltip-triangle"></span></span>
</span>
</span> word.</p>
<p>This is a sentence containing a <span class="link-cont">short
<span class="tip-wrap"><span class="tooltip ">the short word content<span class="tooltip-triangle"></span></span>
</span>
</span> word and a few extra at the end.</p>
I am trying to make responsive design with CSS. Everything works great, with one problem: I can not put few divs with text in the needed location. It is hard to understand what I mean, so here is a fiddle.
As you see a text Filename Some descr is shown in the bottom and I want it to appear inside of the ligth-grey box.
<div class="OD-grid">
<span class="OD-template">
<span class="OD-template-folder">Folder</span>
</span>
<span class="OD-template">
<span class="OD-template-file">
<img src="public/img/image.png"/>
<span class="OD-template-info">
<div> Filename</div>
<div> Some descr</div>
</span>
</span>
</span>
</div>
.OD-grid > .OD-template{
display: block;
float: left;
height: 90px;
width: 33.333333%; // this should be responsive. 50%, 25%, 33.33333%
}
.OD-template-folder{
display: block;
margin: 5px;
cursor: pointer;
height: 70px;
background-color: #9FB9CA;
padding: 10px 0 0 10px;
background: #0072c6;
color: white;
font-size: 17px;
}
.OD-template-file {
display: block;
margin: 5px;
cursor: pointer;
height: 80px;
background-color: #eaecee;
}
.OD-template-file > img{
padding: 16px;
width: 48px;
height: 48px;
background: #b1b1b1;
}
in such a way that if I change the line before // this should be responsive. 50%, 25%, 33.33333% to any of these numbers, it should work properly.
Give the .OD-template-info class the style display:inline-block This shall make the text go inside the light grey area
Demo: jsFiddle
You can add float: left style to .OD-template-file > img and .OD-template-file > .OD-template-info.
I dont now how did you decide to use that labels in that way, but you could add float:left; to .OD-template-file > img
I have updated your fiddle.
I used inline-table and tabledisplays so that their widths are relative to its content.
Having vertical-align:top makes the text align to top, similar to the other ones.
.OD-template-info {
display: inline-table;
vertical-align: top;
}
.OD-template-info > * {
display: table;
}
Before I explain...
This is the HTML part:
<div class="HeadingTabs">
<ul>
<li>Google</li>
</ul>
<div class="TitleTab">This is some very very long title. This is some very very long title. This is a very long title.</div>
</div>
This is the CSS part:
.HeadingTabs {
display: block;
padding: 8px 8px 8px 2px;
margin: 0;
border: 0;
background: transparent;
}
.HeadingTabs ul {
display: inline;
margin: 0 0 0 10px;
float: right;
position: absolute;
bottom: 0;
right: 8px;
}
.HeadingTabs li {
display: inline;
margin: 0;
}
.TitleTab {
margin: 0;
display: inline;
font-weight: bold;
text-decoration: none;
padding: 5px 10px;
line-height: 2.6;
white-space: nowrap;
/* I haven't included the styling info like
borders and background to avoid unnecessary
distractions in code. */
}
Now... as you can see, the ul element is floating right and is absolutely positioned to the bottom-right of the parent div. This is what I meant, when I said 'an absolutely positioned, floating element.'
Dispite the giving it a margin, I am unable to prevent the title (<div class="TitleTab"> element) from protruding into it. The image below should make it clear.
What am I missing?
Points of note:
I cannot modify the HTML. My only go is CSS.
I want the title to wrap around the ul element. So, I can't use width.
I am using position: absolute; because I want the ul element to stay at the bottom of the div right above the content div (just cut-off in the image).
PS: I am not very proficient with CSS.
The absolute:position function is designed to be protruded into.
you should try floating the elements instead without the absolute:position
.HeadingTabs ul {
margin:10px;
float: right;
}
.TitleTab {
float:left;
margin: 0;
font-weight: bold;
text-decoration: none;
padding: 5px 10px;
line-height: 2.6;
white-space: nowrap; // you need to remove no wrap, so it wraps instead of cuts off
}