I tried to use the maxlength attribute of an input element as a CSS width, but it does not seem to work:
input[maxlength] {
width: attr(maxlength em);
}
According to Mozilla I thought this might be the intended use case. Yes I saw the note. Is there any other way to get it working?
This works, but scales too much.
input[maxlength="2"] {
width: 2em;
}
input[maxlength="3"] {
width: 3em;
}
Related
I have a code that I can't change:
item.left,
item.centre,
item.right{
.MIXIN();
}
.MIXIN(){
width: 100px;
}
I need to apply width only to .right element. I can only change contents of MIXIN(). I was thinking of using &but it will result either in .right item.right or item.right .right which is not what I want. Is there a way to apply styling only for .right element using contents of MIXIN()?
You can use the negation CSS pseudo-class :not().
item.left,
item.centre,
item.right{
width: 20px;
&:not(.left):not(.centre) {
width: 100px;
}
}
Fiddle: https://jsfiddle.net/e0nd7pk4
You can not do it. The only way is to override the first declaration.
item.left,
item.centre {
width: inherit;
}
How about & but without the space:
.MIXIN() {
width: 100px;
&.right { color: red; }
}
It compiles down to item.right.right which is a bit weird but won't match left and center.
Fiddle: http://jsfiddle.net/c0634wg2/
don't know if it is possible, but I'd like to scale all images on my site with the following:
.myClass img {
height: auto;
}
However, all *.svg-files shouldn't match that pattern. Is there a way to do this via native css?
I found something like this:
.myClass img[src$=".svg"] {height: auto;}
But that seems to trigger only for svg-files. Trying to use != seems to be syntactically incorrect.
For this you'll want to refer to the attribute-selector.
Example:
.myclass[src$=".svg"]
Reference;
http://www.w3schools.com/css/css_attribute_selectors.asp
Edit;
Just saw your edit.
In css you can also use a :not(selector)
example:
.myclass:not([src$=".svg"]);
.myClass img {
height: auto;
}
.myClass img[src$=svg i] {
height: 100px;
}
first set height to all images, then reset the setting for all images having src with suffix svg case insensitively
I'm new to Less.
In my script, I'd like to use the width of box1 in box2.
Please review my script.
#box1
{
width: 1000px;
height: 500px;
}
#box2
{
width: #box1.width - 100px;
}
Is it possible or not? If yes, please give me correct Less code.
unfortunatly it is indeed not possible. You could work with variables and do something like this however:
#box1width: 1000px;
#box1
{
width: #box1width;
height: 500px;
}
#box2
{
width: #box1width - 100;
}
No, that's not possible. LESS processes the style sheet to produce CSS, and it doesn't have any knowledge of the elements in the page.
What you are looking for is CSS Expressions, but that was only supported in Internet Explorer, and support for that was dropped in IE8.
I'm using jstree to create a multi-level tree, and I want to be able to set a larger line-height than you usually see, so that I can have some large headings. (If I set the font larger, the lines simply overlap.)
I've tried setting the line-height CSS property on the li and a elements, but neither have an effect; jstree seems to be programmatically overriding those values. (I even tried using jQuery to re-set those values after the tree is created, but that didn't help.)
To make things more complicated I would like to have different levels have different spacing, so that the top levels can be larger than the deeper levels.
I've tried the theme plugin but I can't find anything to control line height.
Thanks...
FWIW, this worked nicely for me. It won't give you super-large heading-size, but it increases the size perfectly for my liking.
Setup my tree with variant: large
//jstree config
$("#tree").jstree({
"core" : {
"themes" : {
"variant" : "large"
}
}
// ...
});
and then also change the font-size for all nodes:
/* CSS */
.jstree-node {
font-size: 13pt;
}
Does it help to increase the height of the element?
.jstree-leaf {
font-size: 37px;
height: 50px;
}
.jstree-leaf a.jstree-hovered {
height: 50px;
}
.jstree-leaf a.jstree-clicked {
height: 50px;
}
On its own, MMeah's solution did not work for me. Combining this with the code here and changing the height to auto worked for me. See full answer here.
.jstree-default a {
white-space:normal !important; height: auto;
}
.jstree-anchor {
height: auto !important;
}
.jstree-default li > ins {
vertical-align:top;
}
.jstree-leaf {
height: auto;
}
.jstree-leaf a{
height: auto !important;
}
I would like to override following CSS styling defined for all tables:
table {
font-size: 12px;
width: 100%;
min-width: 400px;
display:inline-table;
}
I have specific table with class called 'other'.
Finally table decoration should looks like:
table.other {
font-size: 12px;
}
so i need remove 3 properties: width,min-width and display
I tried to reset with none or auto, but didn't help, I mean these cases:
table.other {
width: auto;
min-width: auto;
display:auto;
}
table.other {
width: none;
min-width: none;
display:none;
}
I believe the reason why the first set of properties will not work is because there is no auto value for display, so that property should be ignored. In that case, inline-table will still take effect, and as width do not apply to inline elements, that set of properties will not do anything.
The second set of properties will simply hide the table, as that's what display: none is for.
Try resetting it to table instead:
table.other {
width: auto;
min-width: 0;
display: table;
}
Edit: min-width defaults to 0, not auto
"none" does not do what you assume it does. In order to "clear" a CSS property, you must set it back to its default, which is defined by the CSS standard. Thus you should look up the defaults in your favorite reference.
table.other {
width: auto;
min-width: 0;
display:table;
}
Set min-width: inherit /* Reset the min-width */
Try this. It will work.
The default display property for a table is display:table;. The only other useful value is inline-table. All other display values are invalid for table elements.
There isn't an auto option to reset it to default, although if you're working in Javascript, you can set it to an empty string, which will do the trick.
width:auto; is valid, but isn't the default. The default width for a table is 100%, whereas width:auto; will make the element only take up as much width as it needs to.
min-width:auto; isn't allowed. If you set min-width, it must have a value, but setting it to zero is probably as good as resetting it to default.
Well, display: none; will not display the table at all, try display: inline-block; with the width and min-width declarations remaining 'auto'.
The best way that I've found to revert a min-width setting is:
min-width: 0;
min-width: unset;
unset is in the spec, but some browsers (IE 10) do not respect it, so 0 is a good fallback in most cases.
min-width: 0;
I ended up using Javascript to perfect everything.
My JS fiddle: https://jsfiddle.net/QEpJH/612/
HTML:
<div class="container">
<img src="http://placekitten.com/240/300">
</div>
<h3 style="clear: both;">Full Size Image - For Reference</h3>
<img src="http://placekitten.com/240/300">
CSS:
.container {
background-color:#000;
width:100px;
height:200px;
display:flex;
justify-content:center;
align-items:center;
overflow:hidden;
}
JS:
$(".container").each(function(){
var divH = $(this).height()
var divW = $(this).width()
var imgH = $(this).children("img").height();
var imgW = $(this).children("img").width();
if ( (imgW/imgH) < (divW/divH)) {
$(this).addClass("1");
var newW = $(this).width();
var newH = (newW/imgW) * imgH;
$(this).children("img").width(newW);
$(this).children("img").height(newH);
} else {
$(this).addClass("2");
var newH = $(this).height();
var newW = (newH/imgH) * imgW;
$(this).children("img").width(newW);
$(this).children("img").height(newH);
}
})
I have tried:
width:0%
Worked for me