Having difficulties with vertical align of inline element with overflow: hidden and differrent line height. Basically this is problem:
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<style>
.mybutton {
display: inline-block;
position: relative;
line-height: 36px;
vertical-align: middle;
text-align: center;
padding: 0;
border: 0;
background: transparent;
}
span {
font-family: Roboto, "Helvetica Neue", sans-serif;
font-size: 14px;
text-decoration: underline;
}
.mybutton span {
vertical-align: middle;
display: inline-block;
min-width: 4px;
text-align: left;
line-height: 20px;
}
.overflow-ellipsis {
overflow: hidden;
width: 100px;
display: inline-block;
}
</style>
<ul>
<li style="height: 36px">
<span>
<button class="mybutton">
<span class="overflow-ellipsis">11111111111111111111111111111</span>
</button>
<span>111</span>
</span>
<span>111</span>
</li>
</ul>
And concrete problems are:
This markup is well aligned in Chrome, however in IE 11 first element is a bit lower than second one.
Changing Font to Arial will make it bad aligned in Chrome also.
Any idea how to fix this is welcome.
Note: different line height, overflow: hidden and display: inline-block (on button and contained span) is a MUST
Adding a negative margin on .overflow-ellipsis solves the problem:
.overflow-ellipsis {
overflow: hidden;
width: 100px;
display: inline-block;
margin-top: -2px;
}
Preview it here: JSFiddle
Related
I am dealing with text blocks (background blocks over text) and face some issues with paddings on new line. The problem occurs when the browser(e.g. mobile) cuts the text into to two lines due to lack of width. text then looks like this:
I don't really know how to set a padding css on the end of the new lines, since it could break up anywhere of the sentence. You could say put a span on it with padding, but it is not fixed where the line will break down. It depends on the width. Any recommendations?
You could apply display: inline-block but that will turn the background color into an ugly box which doesn't look as nice as having an exact width background for each line. Unfortunately CSS doesn't let us target individual lines except for the first one.
If you don't mind getting a little "creative" (or hacky) you could wrap each word in its own element in the backend or using JavaScript and apply the background color to those elements. Adjust the parent's word-spacing accordingly to eliminate gaps.
.main {
font-family: sans-serif;
font-weight: bold;
background-color: #99c;
display: flex;
height: 400px;
flex-direction: row;
align-items: center;
}
.text-container {
max-width: 500px;
display: inline-block;
word-spacing: -15px;
position: relative;
padding-left: 20px;
overflow: hidden;
}
.text-container::before {
content: '';
background-color: black;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 100%;
z-index: 1;
}
span {
font-size: 36px;
line-height: 1.5em;
color: white;
background-color: black;
padding: 0.25em 0.5em 0.25em 0;
max-width: 360px;
}
<div class="main">
<div class="text-container">
<span>A</span> <span>Movie</span> <span>in</span> <span>the</span> <span>park:</span> <span>Kung</span> <span>Fu</span> <span>Panda</span>
</div>
</div>
You can use box-shadow for this issue and display inline:
<div class="text">
<span class="text-container">A Movie in the park: Kung Fu Panda</span>
</div>
And css:
.text > span {
display: inline;
box-shadow: 25px 0 0 black, -10px 0 0 black;
background-color: black;
color: white;
}
Try to add after "Park:" and before "Kung"
padding workded!!!
change width by console browser and see result:
h1{
background-color: #ff6a6a;
padding: 33px;
display: inline-block;
word-wrap: break-word;
width:300px
}
<h1>rert ert erttttttttttttttt 00000000000000000000 dfgdfgd dfgdfgdft ertert </h1>
Use <p> tag to wrap up the text and it apparently works demo
<div class="main">
<div class="text-container">
<p id="test">A Movie in the park: Kung Fu Panda</p>
</div>
</div>
css
.main {
font-family: sans-serif;
font-weight: bold;
background-color: #99c;
display: flex;
height: 400px;
flex-direction: row;
align-items: center;
}
.text-container {
max-width: 400px;
}
p {
font-size: 36px;
line-height: 2em;
color: white;
background-color: black;
padding: 0.5em;
max-width: 360px;
}
This should be very simple, and apologies if it's a duplicate. I can't get some text in a span to vertically align beside an icon.
Example:
.box {
width: 100px;
text-align: center;
background-color: #f0f0f0;
margin: 50px auto;
padding: 20px;
font-family: sans-serif;
cursor: pointer;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="box">
<a>
<span>Search</span>
<i class="fa fa-search fa-2x" aria-hidden="true"></i>
</a>
</div>
CSS I've tried:
Setting the span to display: inline-block and assigning padding and margin. This also moves the icon up.
Setting the link to position: relative and positioning the span. This causes the icon to move, as the span is now taken out of the flow.
Adjusting the line-height of the span. Again, this affects the icon.
Floating the span. This doesn't work.
Is there something I'm missing? I'm not very familiar with flex, would that be a solution? (Note I have to support very old browsers...)
Suggestions much appreciated!
Add following css:
.box a i,
.box a span {
display: inline-block;
vertical-align: middle;
}
.box {
width: 100px;
text-align: center;
background-color: #f0f0f0;
margin: 50px auto;
padding: 20px;
font-family: sans-serif;
cursor: pointer;
}
.box a i,
.box a span {
display: inline-block;
vertical-align: middle;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="box">
<a>
<span>Search</span>
<i class="fa fa-search fa-2x" aria-hidden="true"></i>
</a>
</div>
Give the <i> an id (or class, I named it #k), then add this ruleset:
#k { vertical-align: middle; }
.box {
width: 100px;
text-align: center;
background-color: #f0f0f0;
margin: 50px auto;
padding: 20px;
font-family: sans-serif;
cursor: pointer;
}
#k {
vertical-align: middle;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="box">
<a href='#/'>
<span>Search</span>
<i id='k' class="fa fa-search fa-2x" aria-hidden="true"></i>
</a>
</div>
Use CSS Flexbox. Apply display: flex property to .box a and use align-items: center (this will align your items vertically centered).
Have a look at the snippet below:
.box {
width: 30%;
text-align: center;
background-color: #f0f0f0;
margin: 50px auto;
padding: 20px;
font-family: sans-serif;
cursor: pointer;
}
.box a {
display: flex;
align-items: center;
justify-content: center;
}
.box a span {
padding-right: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="box">
<a>
<span>Search</span>
<i class="fa fa-search fa-2x" aria-hidden="true"></i>
</a>
</div>
Hope this helps!
You can easily adjust the positioning of your text in the span if you first make it a block element, and then apply a float. Once this is done, you can apply line-height as you initially mentioned, but without affecting the icon.
Here is a JSFiddle to show what to do. Incredible easy, and you don't have to touch your original CSS: https://jsfiddle.net/pgkjaa8c/
Solution using Floats
.box span {
display: block;
float: left;
line-height: 40px;
}
And you can change the float from left to right if you want the text on the right. Additionally, you can apply left and right padding to push the text away from the icon if you so desire: https://jsfiddle.net/rz4y4696/
.box span {
padding-left: 15px;
display: block;
float: right;
line-height: 40px;
}
Additionally, I advise against using flex. People are constantly pushing flex as a solution, but it eliminates many legacy browsers from support. This would be one of the more traditional ways of implementing this, with fully cross browser, and legacy browser support.
Solution without using Floats
If you want a solution that does not require floats, and will work for varying widths, then you'd have to remove the <i> tag and add your FontAwesome icon to your CSS. You can see the solution here: https://jsfiddle.net/rwkypte8/2/
You can get the value of the FontAwesome search icon here: http://fontawesome.io/icon/search/
The HTML and CSS is below:
HTML
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="box">
<a>
<span>Search</span>
</a>
</div>
CSS
.box {
width: 50%;
text-align: center;
background-color: #f0f0f0;
margin: 50px auto;
padding: 20px;
font-family: sans-serif;
cursor: pointer;
}
.box span {
display: block;
line-height: 40px;
text-align: center;
}
.box span:after {
padding-left: 20px;
font-family: 'FontAwesome';
font-size: 30px;
content: '\f002';
}
I have to following code:
<div class="playlist-item">
<a class="playlist-non-selected" href="#">
<span class="playlist-title">AudioAgent - Japanese Intro</span>
</a>
</div>
https://jsfiddle.net/4uyb7rh9/10/
The problem is when you rollover the text, in firefox and ie overPlaylistItem & outPlaylistItem are constantly called and cursor just keeps flickering. This works properly in chrome. Is there a way to make this work in all browsers?
This happens because when you set the class having pointer-events: none it triggers a mouse leave event, hence it flashes.
First of all, may I suggest you use :hover, second, whether you use :hover or script, you need to target the specific element that shouldn't be clickable, for example the span
.playlist-non-selected:hover span {
pointer-events: none;
}
Stack snippet
.playlist-item {
position: relative;
top: 0px;
left: 0px;
height: 40px;
margin-bottom: 5px;
overflow: hidden;
line-height: 40px;
}
.playlist-title {
display: inline-block;
position: relative;
top: 0px;
margin-left: 20px;
overflow: hidden;
font-size: 22px;
font-family: 'Gnuolane Free';
margin-bottom: 0px;
}
.playlist-non-selected {
color: #bbb;
}
.playlist-non-selected:hover{
color: red;
}
.playlist-non-selected:hover span{
pointer-events: none;
}
<div class="playlist-item">
<a class="playlist-non-selected" href="#">
<span class="playlist-title">AudioAgent - Japanese Intro</span>
</a>
</div>
And here is an updated fiddle using your script
Update based on comment about not working in Edge
Appears to be some kind of bug in Edge when the span has display: block so changing it to display: inline-block and it works.
For it to work in IE11, the span need display: inline (or just remove the display:...) so it use its default.
Update 2 based on comment about not working in Edge
If you need the span to display as block, changing it to a div and it works in both Edge and IE11.
An updated fiddle using your script
Why haven't you used :hover ? This can be done with CSS easily and will not pose any difficulty for browsers compatability like
.playlist-item {
position: relative;
top: 0px;
left: 0px;
height: 40px;
margin-bottom: 5px;
overflow: hidden;
line-height: 40px;
}
.playlist-title {
display: block;
position: relative;
top: 0px;
margin-left: 20px;
overflow: hidden;
font-size: 22px;
font-family: 'Gnuolane Free';
margin-bottom: 0px;
backface-visibility:hidden
}
.playlist-non-selected:hover{
color: red;
pointer-events: none;
backface-visibility:hidden
}
.playlist-non-selected {
color: #bbb;
}
<div class="playlist-item">
<a class="playlist-non-selected" href="#">
<span class="playlist-title">AudioAgent - Japanese Intro</span>
</a>
</div>
The blocks are being laid out vertically (one on top of the other), I'm trying to use inline blocks to place 2 blocks side by side. I wanted to use inline-block instead of floats which do work. The steps div class is the container for both inline blocks. Am I missing something?
img.down_image {
display: inline-block;
vertical-align: middle;
width: 465px;
}
div.steps {
display: block;
position: absolute;
height: 500px;
top: 50%;
text-align: center;
}
ol {
display: inline-block;
vertical-align: middle;
width: 400px;
height: auto;
padding: 0 0 0 40px;
list-style: none;
overflow: hidden;
counter-reset: numList;
font: 16px sans-serif;
color: #fff;
}
the html:
<div class="steps">
<div class="down_image">
<img src="pic1.png" class="down_image" />
</div>
<ol>
<li>sdsdgsdgsdgsdgsdgsdg</li>
<li>sdgsdgsdgsdgsdg install Java.
</li>
<li>sdgsdgsdgsdgsdg</li>
</ol>
</div>
Add the following in your style
div.down_image {
display: inline-block;
}
You made the image inline, but the container div is not inline!
If you still have same issue, check the widths! Total width of 400 (ol) + 465 (img) = 865px might be more than the area you are using.
This code works fine, when widths are fixed. jsfiddle
Add white-space: nowrap; to div.steps and change html:
div.down_image {
width: 60%;
display: inline-block;
background-color: #ded;
}
div.steps {
white-space: nowrap;
width: 100%;
display: block;
position: absolute;
height: 500px;
top: 50%;
text-align: center;
}
ol {
background-color: #dde;
display: inline-block;
vertical-align: middle;
width: 30%;
height: auto;
padding: 0 0 0 5%;
list-style: none;
overflow: hidden;
counter-reset: numList;
font: 16px sans-serif;
color: #fff;
}
<div class="steps">
<div class="down_image">
</div><ol>
<li> sdsdgsdgsdgsdgsdgsdg</li>
<li> sdgsdgsdgsdgsdg install Java.</li>
<li> sdgsdgsdgsdgsdg</li>
</ol>
</div>
Notice glued </div><ol>
Note: make sure to add div.down_image { display: inline-block; }
Also, you can try to give position: absolute; to image's div and ol.
I have a pretty specific question: I'm building something like a simple flat table (I don't use table itself because of rounded borders issue).
I'm using unordered list here and the problem is that I can't figure out how to align items in the second column, taking into account that the content should be dynamic (e.g. changing numbers).
Here's the markup for one row:
<section class="ktbl_head">
<ul>
<li>VALUE</li>
<li>VALIDITY</li>
</ul>
</section>
<section class="ktbl_mid_wht">
<ul>
<li>500 units</li>
<li>15 days</li>
<button class="btn btn-sm getdramz pull-right">GET</button>
</ul>
</section>
And CSS:
.ktbl_head {
padding: 15px 0 0 0;
height: 100%;
background-color: #ebe7e7;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.ktbl_head ul li {
display: inline;
padding-right: 135px;
font-family: "Open Sans", sans-serif;
font-size: 14px;
font-weight: 300;
color: #888888;
}
.ktbl_mid_wht {
background-color: #ffffff;
height: 100%;
padding: 20px 0 0 0;
}
.ktbl_mid_wht ul li {
display: inline;
text-align: left;
padding-right: 90px;
font-family: "Open Sans", sans-serif;
font-size: 18px;
font-weight: 400;
color: #888888;
}
Thanks for your attention!
here is my implementation on aligning the table without the table tag:
HTML
<div class="container">
<section class="ktbl_head">
<ul>
<li>VALUE</li>
<li>VALIDITY</li>
</ul>
</section>
<section class="ktbl_mid_wht">
<ul>
<li>500 units</li>
<li>15 days</li>
<button class="btn btn-sm getdramz pull-right">GET</button>
</ul>
</section>
CSS
.container {
border-radius: 10px;
border: 1px solid rgb(200,200,200);
overflow: hidden;
}
section {
font-family: "Open Sans", sans-serif;
width: 100%;
}
section:nth-child(2n+1) {
background-color: #ebe7e7;
}
section ul {
padding: 0;
margin: 0;
height: 65px;
}
section ul li {
width: 45%;
line-height: 65px;
display: inline-block;
}
section ul li:first-child {
padding-left: 35px;
}
Result
Explanation
You see, in the HTML, I added a new div as a container to create the curved corner with border-radius (the overflow: hidden needs to be used so that the content is encapsulated by the container).
For the CSS, section maintains general property such as font-family. Furthermore, section:nth-child(2n+1) is used to create background-color every other element starting with 1st,3rd,5th,... element. The selectors section ul, section ul li, and section ul li:first-child are used to make the CSS selectors more semantic (it makes clean code and easy to maintain in the future). Please see the code below for the demo. Happy coding!
PLAYGROUND
Give all the li's a width in which all of the content-length will fit..