I have a two column layout in which I want to show some element offset from the left edge of the column. In Safari, these elements get cut off, no matter what overflow settings.
Firefox, works, the green "AHA" elements show:
Safari, fails, the green "AHA" elements get cut off if they are positioned outside the "columns":
See the sample code here:
https://codepen.io/kontur/pen/JjBQEVw
Essentially:
ul {
columns: 2;
column-gap: 3em;
list-style: none;
padding: 0 3em;
}
li {
column-width: 50vw;
outline: 1px solid red;
height: 3em;
position: relative;
}
li:before {
content: "AHA!";
position: absolute;
left: -3em;
width: 3em;
outline: 1px solid green;
}
The Safari version is 16.2, but I've seen this also in previous versions.
I am also happy to hear of workarounds, but I do need the specific column effect of having elements in sequence first in the left and the in the right column. I was also trying different paddings for the right column (I can give them classes) to keep the green element "inside" the column, but I do need the column splits of the red elements to be starting at the 50% width of the screen.
Related
I have a table, not the HTML table, but the one made of React styled divs, in which the top 4 row cells are sticky positioned, also 2nd, 3rd and 4th row cells are replaced by their replacers when corresponding data set is accessed through vertical scrolling, as per shown in gif, thats the reason why "fixed" position cannot be used. The first 2 columns of this table also consist of sticky cells, as shown, to effect horizontal scrolling with those 2 columns fixed.
Issue is when horizontally scrolled in iPad, the 8 cells in top left corner, move a bit horizontally from their places and are repositioned when scrolling (or touch, in case of iPad) is released, which creates a bad effect. However this effect is somewhat minimal on iOS Safari and works properly in Chrome/FF.
Here is css for one of those top-left-corner cells:
.efVzif.efVzif {
white-space: pre-wrap;
vertical-align: text-top;
overflow: hidden;
text-overflow: ellipsis;
background-color: var(--background-white);
display: inline-block;
font: var(--typography-body3);
-webkit-letter-spacing: var(--label-typography-letter-spacing);
-moz-letter-spacing: var(--label-typography-letter-spacing);
-ms-letter-spacing: var(--label-typography-letter-spacing);
letter-spacing: var(--label-typography-letter-spacing);
color: var(--black);
text-transform: none;
width: 160px;
height: calc(100% - 2px);
position: -webkit-sticky;
left: 156px;
/* right: 0px; */
z-index: 2;
padding: 5px 10px 0 10px;
text-align: left;
box-shadow: 8px 0 5px -3px rgba(133,146,166,0.2);
}
Have you tried changing the overscroll-behavior to none? If not, add this to your CSS and see if it helps.
body {
overscroll-behavior: none;
overscroll-behavior-y: none;
webkit-overscroll-behavior: none;
webkit-overscroll-behavior-y: none;
}
Here's the image i'm trying to replicate.
Here's the link I've got so far.
My issue is the border-bottom length corresponds to the fullwidth of containing element. From the image attached, the border-bottom should be a little shorter and centered.
http://jsbin.com/tukomuwuri/edit?html,css,output
You can add a pseudo after element to the list item and then add a border-top property.
li:after{
content: "";
display:block;
border-top: 4px solid color;
width: /* your desired width*/
}
You can give it an absolute position to center it or align it however you want.
By default, the border is going to stretch the width of the block-level element (in this case, the <a>).
To achieve your desired effect, you'll want to actually decrease the width of the <a>. You can do this by padding the containing <li>:
li {
background-color: white;
padding: 0 40px;
position: relative;
&:hover {
background-color: #e5e8e8;
a:before {
content: '|';
position: absolute;
top: 10px;
left: -15px;
}
}
}
Here's the example:
http://jsbin.com/ciqujidupa/3/edit?html,css,output
I have an icon in a :before pseudoelement, and if the textelement becomes to long and goes to the next row, I want it to not wrap around my pseudoelement but keep it's distance.
Here is a link to my example:
http://jsbin.com/yosevagaqa/1/edit?html,css,output
If you resize the window so that the text is forces into a new line, you can see the problem.
How can I avoid this?
As you can see from the other answers, there are multiple solutions!
If the size of the square in :before is always the same, one other solution would be to add
.link {margin-left:25px; text-indent:-25px;}
to the CSS. This causes the entire block to be shifted to the right, except for the first line, containing the square, which gets "outdented".
http://jsfiddle.net/MrLister/3xbfyqkh/
Or what I would prefer, with sizes in ems, so that the red square depends on the font size.
.link:before {
/* .. */
width: 1em; height: 1em;
margin-right: .5em;
}
.link {margin-left:1.5em; text-indent:-1.5em;}
Making sure, of course, that the indentation is the same as the size + the margin of the square.
http://jsfiddle.net/MrLister/3xbfyqkh/1/
Another approach, since the purpose is to make a custom "bullet", would be to treat the h5 like a list item. Then you won't need the ::before trick. You will need other tricks to make the square the right size though...
.link {
display:list-item; list-style:square;
color:red;
font-size:2em; line-height:.5em;
margin:.5em 0 .5em 1em}
.link a {
font-size:.417em; vertical-align:.3em}
http://jsfiddle.net/MrLister/3xbfyqkh/5/
You can add following CSS:
.link{
float: right;
width: calc(100% - 25px);
}
.link{
position: relative;
padding-left: 25px;
}
.link:before {
content: "";
background: red;
background-size: contain;
width: 15px;
height: 15px;
display: inline-block;
vertical-align: middle;
margin-right: 10px;
position: absolute; top: 0; left: 0;
}
<h5 class="link">A long link that might wrap and then it gets all weird and stuff</h5>
I am trying to make a tooltip for an anchor tag using only CSS. I have come this far. I am trying to achieve the functionality of having the box and the tip arrow positioned exactly at the center no matter what the length of the text is.
The above image is what I am trying to get at.
I've tried keeping the width:auto but it's not working either.
body
{overflow-x:hidden;}
div
{position:relative;width:700px;border:1px red solid;padding:20px;margin:0 auto;text-align:justify;}
a
{position:relative;white-space:nowrap;}
a > span.tooltip
{
position: absolute;
white-space: normal;
width: 100%;
top: 130%;
left: 0;
}
a > span.tooltip > span
{
position: absolute;
top: 0;
right: 0;
text-align: center;
bottom: 0;
left: -500%;
width: 1100%;
}
a > span.tooltip > span > span
{
display: inline-block;
background: black;
border-radius: 4px;
padding: 10px;
color: white;
max-width: 300px;
}
DEMO:
http://jsfiddle.net/b2Yqf/
works on msie 7 8 9 10, firefox, chrome
not what you might want... since markup is made with three nested <span>s... but YES. it could be done!
The main problem you're facing is that you need a white-space: nowrap this gets you about as far as hint.css by #robooneus. I can't figure out the centering either though. Any widths or margins are relative to the "Tooltip" link's width. A link to where you found the images might be helpful too so we can study the source.
EDIT1:
Additionally, a margin-left: -6px on the arrow (the :before) centers that on the word tooltip, it counteracts the move to the right by the border.
I don't think what you are trying to do (center the tooltip) is possible while having width:auto;.
If you declare a width, you can simple position the tooltip with:
.tooltip:hover:after {
width:100px; /* whatever you want */
left:50%;
margin-left:-50px; /* half the width */
}
EDIT
As #Alexander says in his answer, also repositioning your tooltip arrow using margin-left is a good idea, as it is slightly off center with just left:50%.
I'm having trouble styling text within a div, which is in the shape of a triangle. All done with CSS.
The triangle is currently positioned absolutely as it needs to be for a larger project (I've removed the code from the larger project as it's irrelevant).
Here is a jsFiddle
See the code below:
HTML
<div>Here is a Triangle</div>
CSS
div {
text-align: center;
color: #fff;
font-size: 1.125em;
width: 100%;
}
div:nth-child(1) {
position: absolute;
top: 100px;
left: 100px;
width: 0;
height: 0;
border-left: 126px solid transparent;
border-right: 126px solid transparent;
border-bottom: 126px solid #D30000;
}
since the div has zero width, there will be a line break between each pair of words.
A solution might be to create the shape with one element, and have the text in another one.
You need to realise the triangle is actually a very thick border of a 0x0 element located at the top vertex, and position accordingly.
Here I've positioned the text at the baseline of the triangle and made its width from one vertex of the base to the other. Feel free to play with the text element's size to avoid the text overflowing the triangle. I'm afraid, however, that you can't just let the text flow inside a triangular shape:
HTML:
<div class="triangle"><div class="text">Here is a Triangle</div></div>
CSS:
div { /*your original CSS*/ }
div.triangle { /* your original CSS for div:nth-child(1) */ }
div.text {
position: absolute;
bottom: -126px; /* baseline */
left: -126px; /* left tip */
right: -126px; /* right tip */
width: auto; /* reset width:100% from div */
height: auto; /* just in case */
}
http://jsfiddle.net/honnza/UPeCf/8/