I try to view show modal window. This window contain multiple span. But there are limited by width and height. And when span content is smaller, than span width: all is OK, I can see this icon.
But when text is to big I could not see this icon. And I didn't have any ideas, how to do this on pure CSS without using Javascript (jQuery).
HTML:
<div class="wrapper">
<span class="first">First</span>
<br/>
<span class="second">Second contain a lot of text. Really long span is here</span>
</div>
CSS:
.wrapper{
width: 300px;
height: 500px;
background: green;
overflow: hidden;
}
span{
display: inline-block;
width: 236px;
height: 30px;
line-height: 30px;
font-size: 16px;
padding: 0px;
margin: 10px 20px;
padding: 0 16px 0 8px;
white-space: nowrap;
overflow: hidden;
background: #fc0;
text-overflow: ellipsis;
border: 1px solid green;
border-radius: 4px;
}
span:hover{
border: 1px solid blue;
cursor: pointer;
}
span:hover::after{
font: normal normal normal 12px FontAwesome;
line-height: 30px;
content: "\f040";
float: right;
}
First screen, first span: it's OK
Second screen, second span: it's not normal
Third screen, second span: so must be
Have any ideas? Also padding, margin must be "user-friendly" and the same in both cases.
Try it here:
http://codepen.io/anon/pen/KpMdvx
.wrapper {
width: 300px;
height: 500px;
background: green;
overflow: hidden;
}
span {
display: inline-block;
width: 236px;
height: 30px;
line-height: 30px;
font-size: 16px;
padding: 0px;
margin: 10px 20px;
padding: 0 16px 0 8px;
white-space: nowrap;
overflow: hidden;
background: #fc0;
text-overflow: ellipsis;
border: 1px solid green;
border-radius: 4px;
}
span:hover {
border: 1px solid blue;
cursor: pointer;
}
span:hover::before {
font: normal normal normal 12px FontAwesome;
line-height: 30px;
content: "\f040";
float: right;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="wrapper">
<span class="first">First</span>
<br/>
<span class="second">Second contain a lot of text. Really long span is here</span>
</div>
Because your text has a whitespace: nowrap; setting and is reaching the end of the box, this won't work without using position: absolute; on the icon. Just give the span position: relative; and apply an extra right-padding on hover.
Related
i have created a tooltip the data its showing is getting overflowed. so want to fit the content inside the width of the tooltip. its more of the badge on hover i need to show the content also we can have a max width of 500px and height no restrictions. Also you could see that on hover the tooltip is not coming exactly down of the respective item on which it is hovered. This is what i have tried, below is my code
.lightgrey-badge {
width: auto;
height: 20px;
padding: 0px 8px 0px 8px;
border-radius: 4px;
background-color: #f2f2f2;
}
.lightgrey-badge-text {
font-size: 12px;
font-weight: 600;
text-align: center;
color: #595959;
vertical-align: middle;
}
.border {
border-radius: 20px;
border: solid 2px #595959;
}
.lightgrey-badge-text-elipses {
display: inline-block;
max-width: 40px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tooltiptext {
visibility: hidden;
max-width: 250px;
height: 50px;
opacity: 0.6;
box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.04);
background-color: #000000;
color: #ffffff;
text-align: center;
border-radius: 6px;
position: absolute;
z-index: 9999;
margin-top: 28px;
margin-left: -150px;
}
.tooltiptext::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
.lightgrey-badge:hover .tooltiptext {
visibility: visible;
}
<span
class="lightgrey-badge border"
style="margin-right: 5px"
>
<span
class="lightgrey-badge-text lightgrey-badge-text-elipses"
>Element
<span class="tooltiptext">
<span style="width: fit-content"> this s the dummy data the orifinal will look something like this a big long test.i have created a tooltip the data its showing is getting overflowed. so want to fit the content inside the width of the tooltip</span></span
>
</span>
</span>
The reason for the element is not in the proper width is that it should increase the max-width. I changed the max width to 50px. it was at 40px
.lightgrey-badge-text-elipses {
max-width: 50px;
}
I added a min-width, max-width and padding for the long text as follows
.tooltiptext {
min-width: 100px;
max-width: 500px;
padding-left: 100px;
padding-right: 50px;
}
You can break the lines of the paragraph to get the long text in different lines so you can see the entire thing. Like this
<span class = "new-content"><span style="width: fit-content"> this s the dummy data the orifinal will look something like this a big long test.i have created a tooltip the data its showing is getting overflowed. so want to fit the content inside the width of the tooltip</span></span></span>
You will have to add a class in the css too.
.new-content {
white-space: pre-wrap;
}
Try this code It will help you
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
display: block;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
<!DOCTYPE html>
<html>
<body style="text-align:center;">
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
<br><br>
<div class="tooltip">Hover over me Hover over me
<span class="tooltiptext">blah bla blaa a bal blak a ba b alj ang</span>
</div>
<br><br>
<div class="tooltip">Hover over me Hover over me 3
<span class="tooltiptext">askdjf ksfjlskd flsaa flsjdlfj sdfk sadkjflskd af sdkjf lsdkf sdljf</span>
</div>
</body>
</html>
Verify my answer if it's work for you
Kind of a convoluted title, but easy enough to demonstrate
#txt {
padding: 5px;
}
#txt:hover {
font-weight: bold;
}
#test {
display: inline-block;
border: solid 1px black;
min-width: 100px;
}
<div id="test">
<div id="txt">This is some text</div>
</div>
So I have the above situation.
Is there anything I can do with CSS that will avoid the container (test) from resizing when I hover over the text? Like take up the padding or margin for the resize. Or set the width so that it is enough to handle the bolded text (but still be dynamic).
Here is an idea, use the before and after attributes to size the element based on the bold text width. Unfortunately, this requires a change to your markup.
#txt {
line-height: 1.4em;
padding: 5px;
text-align: center;
}
#txt::before {
content: attr(data-content);
display: block;
font-weight: bold;
height: 0px;
visibility: hidden;
}
#txt::after {
content: attr(data-content);
font-weight: normal;
}
#txt:hover::after {
font-weight: bold;
}
#test {
display: inline-block;
border: solid 1px black;
min-width: 100px;
}
<div id="test">
<div id="txt" data-content="This is some text"></div>
</div>
Alternately, use text-shadow to bold your text.
#txt {
padding: 5px;
}
#txt:hover {
text-shadow: 0.5px 0px 0px #555, -0.5px 0px 0px #555;
}
#test {
display: inline-block;
border: solid 1px black;
min-width: 100px;
}
<div id="test">
<div id="txt">This is some text</div>
</div>
I'm trying to use a style that will grow a border until you reach 300px and then will use text-overflow: ellipses when you reach the maximum. Click Here to go to a JSFIDDLE that contains what I'm working on.
I want the longest message text to stop at 300px and then show an ellipses. The shorter texts should make the border shrink to the size of the text. Any help is greatly appreciated.
.border{
background-color: #ffffff;
border: 3px solid #ffffff;
border-radius: 5px;
box-shadow: 0px 0px 10px #999999;
margin-left: 20px;
margin-top: 5px;
padding: 2px;
position: relative;
z-index: 4;
}
.border.small {
/* background-image: url('%Image(G3VISIF_EXP_BKGRD_SM)'); */
box-shadow: 1px 1px 10px #999999;
background-size: 100% 100%;
height: 22px;
width: auto;
}
.message {
color: #5c5d60;
font-family: Arial;
font-size: 17px;
font-weight: bold;
padding-left: 5px;
padding-top: 2px;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 300px;
display: block;
overflow: hidden;
}
<div class="border small">
<div class="message">
Is [GRIDREC:EMPLID] Equals 123456789012345678901234567890
</div>
</div>
<div class="border small">
<div class="message">
Is Part Time
</div>
</div>
<div class="border small">
<div class="message">
Recieves Full Benefits
</div>
</div>
It's very simple.
Here are two ways (without changing your current html structure):
1- If you want the messages to be on new lines, keeping your current structure:
.expression {
/* rest of styles */
float: left;
clear: left;
}
Demo http://jsfiddle.net/L66fs1y5/2/
2- If it's ok to have the messages on the same line, keeping your current structure:
.expression {
/* rest of styles */
display: inline-block;
}
Demo http://jsfiddle.net/L66fs1y5/3/
I apologize if someone can immediately direct me to the right place, but I'm unsure what to even search for this particular problem. It seems to be a Chrome-specific bug, but I'm unsure how to fix it.
What's happening is that when I replace the text in a span, it's moving a (grand)parent anchor to the left. (see fiddle for demo : http://jsfiddle.net/Sj3Gj/2/) I've simplified the HTML, but for various reasons, this is the structure/CSS I need. If you put float: left on the anchor element, it works fine, but I have this structure in a larger and this additional float breaks the positioning of the larger structure.
I'm at a complete loss here. If you look at the fiddle in chrome, the anchor floats left, but in Firefox/IE, it's fine. Any ideas?
Here's my code:
<a class="trigger">
<div></div>
<span>Some text</span>
</a>
a.trigger {
width: 337px;
height: 16px;
padding: 2px 20px 2px 5px;
margin-top: 3px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
a.trigger, a.trigger:link, a.trigger:visited {
display: inline-block;
border: 1px solid;
border-top-color: #BFD6F1;
border-left-color: #BFD6F1;
border-bottom-color: #9EBCE1;
border-right-color: #9EBCE1;
padding: 2px 18px 2px 7px;
background-color: #FFF;
text-decoration: none;
cursor: pointer;
}
div{
background-image: url('http://placekitten.com/200/300');
height: 16px;
width: 16px;
display: inline-block;
float: left;
}
a.trigger span {
margin-left: 10px;
}
a.trigger, a.trigger:link, a.trigger:visited {
cursor: pointer;
}
This is sbecause you are floating the div to the left. remove the float, it is not needed as you have already declared inline-block
DEMO http://jsfiddle.net/kevinPHPkevin/Sj3Gj/5/
div{
background-image: url('http://placekitten.com/200/300');
height: 16px;
width: 16px;
display: inline-block;
}
I have this really weird problem, button and input have a same CSS (except background), but Firefox renders those differently. There are no problems in IE or Chrome.
#searchInput {
width: 80%;
margin: 0 auto;
display: block;
height: 40px;
border: 1px solid #D8D8D8;
font-size: 1rem;
padding: 10px;
text-align: center;
}
#searchButton {
width: 80%;
margin: 4px auto;
display: block;
height: 40px;
border: 1px solid #D8D8D8;
font-size: 1rem;
padding: 10px;
text-align: center;
background: #F2F2F2;
cursor: pointer;
}
I have also included container CSS, where they both are.
.section {
width: 100%;
display: inline-block;
margin: 10px auto;
background-color: #FAFAFA;
border-radius: 5px;
border: 1px solid #D8D8D8;
padding: 30px;
position: relative;
}
.toggleIcon {
width: 28px;
height: 20px;
top: 0;
right: 10px;
position: absolute;
border-radius: 5px;
background: #FAFAFA;
margin-top: 10px;
padding: 10px;
border: 1px solid #D8D8D8;
cursor: pointer;
box-sizing: content-box;
}
HTML:
<div id='search' class='section'> <a href="#sidebarNav" class='toggle'><img class = 'toggleIcon' src = 'img/icons/glyphicons_158_show_lines.png' alt = 'Open navigation'></a>
<img id='logo' src='img/logo.png'>
<form id='searchForm'>
<input type='text' id='searchInput' name='searchInput'>
<button type='submit' id='searchButton' name='searchButton' value='Search'>
<img src='img/icons/glyphicons_027_search.png' alt='Search'>
</button>
</form>
<div id='searchResults'></div>
</div>
NB! I use PageSlide for navigation and search is using AJAX
Based on your last comment...
Margin doesn't cause my problems, problem is that input is much wider
and higher
You have to add box-sizing:border-box property to your input#searchInput
Like:
#searchInput {
....
box-sizing: border-box;
-moz-box-sizing: border-box; /* Firefox */
}
Working Example: http://jsfiddle.net/XLyBR/1/
Your margin differs in the searchInput and searchButton css classes
Also what about the default css line-height on these elements - do they differ - try specifying line-height.
Wing
BTW - it would help if you tell us how the rendering differs