I am examining a third party CSS file, and I am coming across the same class that has the same property set multiple times but with different values each time. I cannot figure out why this is, could someone please shed some light on this?
Example below:
.tabulator .tabulator-header .tabulator-col {
display: inline-block;
position: relative;
box-sizing: border-box;
border-right: 1px solid #aaa;
background: #e6e6e6;
text-align: left;
vertical-align: bottom;
overflow: hidden;
}
.tabulator .tabulator-row .tabulator-cell {
display: inline-block;
position: relative;
box-sizing: border-box;
padding: 4px;
border-right: 1px solid #aaa;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tabulator .tabulator-header .tabulator-col{} - Means that those CSS settings are applied to any HTML element with the class .tabulator-col that is inside an element tabulator-header and that is inside of an element tabulator
So as per your question the both styles are different.
and here is documentation for selectors https://www.w3schools.com/cssref/css_selectors.asp
if two selectors have the same specificity, the last one to be declared wins.
Related
I am battling with the css to wrap text inside div. I have applied white-spacing, word break but nothing happened.
Link http://fiduciaryconsulting.org/index.php/services/90-services/200-demo
Screenshot of section with issue
Remove white-space: nowrap from the selector .boxes li a and it will work
Remove white-space: nowrap; from the link tag.
Check out these articles for more info about wrapping long words and URLs:
https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
https://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/
https://justmarkup.com/log/2015/07/dealing-with-long-words-in-css/
white-space: nowrap; would be the culprit for this one. remove it from the following CSS, or you can comment it out like below:
.boxes li a {
color: #fff;
display: block;
padding: 60px 10px 60px 10px;
text-decoration: none;
background-color: #3366ff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
min-height: 30px;
word-wrap: break-word;
/* white-space: nowrap; */
}
You can find this selector's CSS rules on lines 29-44 on the file: http://fiduciaryconsulting.org/templates/jsn_pixel_free/css/template.css
First off here's what I'm trying to accomplish: http://i.imgur.com/EfKt16k.png
But I'd like to be able to vertically center the icon regardless if the text is one line or two. I've tried using an tag as well as using a psuedo :after element. And I've just not even gotten close. I'd like the entire area to be clickable. Any suggestions?
Here's an example: http://jsfiddle.net/a4x8p/
body { background: #e8e8e8; }
a { background: #68cdf0;
border: 1px solid #fff;
display: block;
color: #fff;
width: 200px;
text-decoration: none;
padding: 5px;
}
a i { float: right; vertical-align: middle; }
You can override the class .fa using specificity and avoid using !important.
Set display:table-cell; vertical-align: middle; on the the icon font element using high level of specificity for the selector in order to override the CSS properties inherited by the font-icon .fa class.
a i.fa.fa-caret-right { display:table-cell; vertical-align: middle; }
And then add display:table; to the a link.
a { background: #68cdf0;
border: 1px solid #fff;
display: block;
color: #fff;
width: 200px;
text-decoration: none;
padding: 5px;
display:table;
}
DEMO http://jsfiddle.net/a4x8p/4/
I have an element which will contain an unspecified number of inline-block elements which may wrap if there are enough elements.
I want the last element to fill the remaining space on the line. How can this be accomplished?
Example HTML
<div class="tags">
<span class="tags__item">First Tag</span>
<span class="tags__item">Another One</span>
<span class="tags__item">Long Tag Name Here</span>
<span class="tags__item">Last tag should fill</span>
</div>
Example CSS
.tags { border: solid 1px #000; padding: 0; }
.tags__item {
display: inline-block;
margin: 2px;
padding: 1px 5px;
background: #eee;
border: solid 1px #eee;
}
.tags__item:last-child {
background: #fff;
border: dashed 1px #eee;
}
Attempt #1 (doesn't work)
One answer (which was deleted) mentioned trying table-cell layout like this..
.tags {
border: solid 1px #000;
display: table-row;
white-space: nowrap;
}
.tags__item {
display:table-cell;
width:auto;
margin: 2px;
padding: 1px 5px;
background: #eee;
}
.tags__item:last-child {
background: #fff;
border: dashed 1px #ccc;
width:99%
}
This solution works reasonably well for a single line. However, it doesn't allow wrapping. http://cdpn.io/omFuy
Attempt #2 (doesn't work)
Someone else linked to another SO answer as a possible solution.
.tags {
border: solid 1px #000;
}
.tags__item {
display: block;
float: left;
margin: 2px;
padding: 1px 5px;
background: #eee;
}
.tags__item:last-child {
float: none;
display: block;
border: dashed 1px #ccc;
background: #fff;
}
.tags__item:last-child::after {
clear:both;
}
But it doesn't work. See my implementation.
For browsers that support it, the natural solution is to use the flexible layout module, aka flexbox—this is exactly the sort of scenario it is intended for. Here are the bare essentials:
Demo on Dabblet
.tags {
display: flex;
flex-wrap: wrap;
}
.tags__item:last-child {
flex: auto;
}
The (not insignificant) downside to this approach is the lack of browser support and the attendant mess of prefixes and fallbacks if you need to support older browsers. As suggested by Rafael in the comments, this CSS Tricks article outlines the required prefixes and the legacy syntax.
Definitely not the best solution ... but I just did not resisted to try a javascript solution.
http://codepen.io/rafaelcastrocouto/pen/morlb
Still need to check for "line-breaks", but it can be useful since jQuery probably turns this cross browser.
I have tag me box to add the tag.
http://jsfiddle.net/hailwood/u8zj5/
I was trying to change it's looks using css.
I wanted to create tags and box to look like in this code:
http://jsfiddle.net/hAz5A/20/
I added the css in first but does not make change. Can any css guys help me out?
Just add the css from the second fiddle into the first fiddle
Note: if you want to remove the 'x' - delete tag (for some reason) then add display: none to your tagit-close class
FIDDLE
FIDDLE without delete button
ul.tagit.ui-widget li.tagit-choice {
display: block;
float: left;
position: relative;
line-height: inherit;
border-radius: 6px;
background-color: #EFEFEF;
border: 1px solid #DDD;
padding: 5px 15px 5px 5px;
margin-right: 10px;
color: #08c;
text-decoration: none;
}
ul.tagit.ui-widget li.tagit-choice a.tagit-close {
cursor: pointer;
position: absolute;
right: 5px;
top: 50%;
margin-top: -8px;
}
The stack overflow community helped me figure out how to add two different sized lines behind my section title on my website. The method can be viewed in this JS Fiddle: http://jsfiddle.net/dCZR4/1/
It was working properly, until I included the Twitter Bootstrap 3.0 CSS in my layout. Now, the two lines appear right on top of each other, making one thick line behind the text. This can be seen here: http://onedirectionconnection.com/tester/
If anybody could advice me on what could be causing this hiccup, it would be greatly appreciated.
The CSS for the header is below:
.section-title{
font-family: 'Lato', 'Asap','Quicksand', 'Droid Sans', sans-serif;
position: relative;
font-size: 30px;
z-index: 1;
overflow: hidden;
text-transform: uppercase;
text-align: center;
}
.section-title:before, .section-title:after {
position: absolute;
top: 40%;
overflow: hidden;
width: 50%;
height: 4px;
content: '\a0';
border-bottom: 3px solid #DA5969;
border-top: 1px solid #DA5969;
}
.section-title:before {
margin-left: -52%;
text-align: right;
}
.section-title:after {
margin-left:2%;
text-align:left;
}
And the HTML is:
<div class="section-title">Title Goes Here</div>
(In the JSFiddle, it is simply defined as h1, but I changed it in my layout)
Thanks in advance for any help offered!
Bootstrap applies the box-sizing: border-box by default.
You would need to reset that to box-sizing:content-box for this particular requirement.
.section-title:before, .section-title:after {
position: absolute;
top: 40%;
overflow: hidden;
width: 50%;
height: 4px;
content: '\a0';
border-bottom: 3px solid #DA5969;
border-top: 1px solid #DA5969;
box-sizing: content-box; /* + vendor specific versions here */
}