Is there a way to increase the height of the clr-dg-action-overflow item? Is setting the height of the .action-item class in the CSS sufficient? Does it affect other components?
The easiest thing would be to set a larger line-height on the .action-item. This would increase the space without affecting anything else.
.datagrid-action-overflow .action-item {
line-height: 2rem;
}
Related
Is it possible to reduce the size of all element of DOM by a specific value?
I am using bootstrap style now.
Like for h5 it is 14px and I need 12px, for h1 it is 36px and I need 34px so on.
I have 2 options to do it
To rewrite a custom css for all element. It needs a huge change.
Using jQuery. I need to traverse all element of DOM. Find out there
font-size and reduce it by 2px. It will slow down page load time.
Is there any better way to do it?
What you can do is, you can set a base font-size for your body in rems.
Meaning, you have to set a font-size property for your body like so:
body {
font-size: 10px;
}
After this, a rem unit becomes equal to your base font-size:
1rem = 10px
Therefore, you need to set the font-size of all your elements to rem's.
When you want to scale everything down or up, simply change the body font-size property and it will scale everyting else accordingly.
Thus, the units become relative.*
If you want to go down the JS ways, you can use a plugin like FitText or some other alternative.
I want to have a smaller font for "Konfuzius" here: http://www.kine-stammheim.ch/index.html
I tried to add a span around "Konfuzius" with the smaller font definition but somehow it does not work...
Here is the CSS file: http://www.kine-stammheim.ch/css/screen/screen-PAGE-layout.css
You need to change your font-size for the class quote-author. As 100% font-size of any inherited font-size which is even though higher than 100%, but 100% shall render the same size irrespective of its inheritance being higher than that. So you need to reduce quote-author class to a value < 100% to your convenient small-size in order to make it smaller.
For Instance,
.quote-author {
font-size: 50%;
}
PS: 50% value is just for illustrative purposes.
Hope this helps.
Seems like you have worked out how to do it because the css was changing every time I reloaded, but the answer as I think you have found is to use
.quote-author {
font-size: Xpx; /*You can also use x%*/
}
You use font-size:100% it represents 100% of the size in its parent (180%) so you don't change anything.
You should use something like font-size:50%; or whatever size you want specified in px...
http://jsfiddle.net/mJxn4/
This is very odd: I have a few lines of text wrapped in an <em> tag. No matter what I do, lowering the value for line-height below 17px has no effect. I can bump the line-height up to greater than 17px and it'll apply, but I can't get it lower than 17px.
The CSS in question is:
#others .item em {
font-size: 13px;
line-height: 17px;
}
Try adjusting the line height both higher and lower and run the updated fiddle after each change, and you'll see what I mean.
Why would this be? No line-height is specified anywhere else in the CSS, so nothing is overriding it. That couldn't be the case anyway because I'm adjusting the line-height up and down within the same selector, so it doesn't make sense that a higher value would apply, but a lower value would get overridden.
Because the em tag is inline and its line-height cannot be lower than its parent div.
For example, if you set the line-height of the parent to 10px, then you would be able to decrease the line-height of em tag to 10px as well.
In order for line-height property to work, div should has display property equal to block
.app-button-label{
line-height: 20px;
display: block;
}
I was facing this problem with divs in mobile view - the line height was way too big and line-height wasn't working! I managed to make it work by adding "display:block", per advice here: Why isn't the CSS property 'line-height' letting me make tight line-spaces in Chrome?
Hope this helps anyone else facing the same problem in future
You seem to be using normalized css option in jsfiddle - which equates to the CSS rules being reset - ala http://meyerweb.com/eric/tools/css/reset/
You can either reset the reset, or use a different reset if you really need it.
See here for more details:
http://sixrevisions.com/css/a-comprehensive-guide-to-css-resets/
The best way to do it is using css reset.
Write your own or use popular one like
http://meyerweb.com/eric/tools/css/reset/
Yes, the block level elements(h1, h2, h3...h6,div) sets the minimum line-height for its inline children elements(span, em etc.). Which means if there is a element inside (with line-height 1.5), then the can set minimum line-height of 1.5 and no less than it.
The simplest way is to specify the line height with a higher priority, for example you could write: line-height: 14px !important;
If it is still not working set high priority in both where you u would like to decrease the line height (inline css) and also put in the body css .. remember the high priority (!important;) because it overrides any other unknown css rules.
Hope this helps
Ahmed
I have a sidebar DIV on my web page that has buttons. I have the width of the sidebar set as follows:
width: 20%;
but when the browser size is reduce then there's sometime not enough space for the buttons. Is it possible for me to have the width as 20% but also specify a minimum in px?
Yes. This is pretty common, too. Have fun!
And protip: you can always just try and find out ;)
Yes. The W3C CSS recommendation generally does not require that units for different dimensions like width and min-width be the same. (Not quite relevant side note: You can even mix different units for dimensions like padding, e.g. padding: 2px 1em;.)
Using “min width”.
min-width: 20px; for example.
But if you want its width to always be at least the size of whatever is contained, consider using display: table-cell;
I'd like to try and convert my designs from pixels to ems. I've read so many tutorials that... and I'll leave it right there.
Starting with this as my base:
body {
font-size: 62.5%;
line-height: 1.4;
}
... now this is where I get lost...
Should I be defining my font-size like this:
div#wrapper { font-size: 1.5em; }
... or like this:
blockquote, li, p, dt, dd, etc { font-size: 1.5em }
And then the next thing I don't really understand is where ELSE should I be using ems in addition to font-size and line-height? I will be using a fixed-width layout using 960.gs.
line-height: 1.4em;
Probably isn't what you want. The line-height will stay at the same computed height for the size of an ‘em’ on that element, even when you change the font-size on a descendant element.
line-height has a special case where it allows a unitless number:
line-height: 1.4;
Which makes each descendant line-height depend on its own font-size rather than the ancestor's.
Should I be defining my font-size [on a wrapper or on many element types]?
Well that rather depends on what you're trying to do. With relative font-sizes it is generally best to keep the number of declarations down to a minimum, because they nest: that is, with your blockquote { font-size: 1.5em; }, if you put a blockquote inside a blockquote you'd get a font-size of 1.5*1.5=2.25em compared to the body font size. Is that what you want? Maybe, maybe not.
where ELSE should I be using ems
Anywhere you want the size of an element to respond to the user's preferred font-size. One common example would be something like:
#maintext {
width: 60%;
min-width: 8em;
max-width: 40em;
}
to try to restrict text lines to a reasonable column width when doing liquid layout.
But if you are limiting yourself to a fixed-width layout it may not make sense to make element widths font-size-dependent.
You may find How to size text using ems an interesting and helpful read. The thing that I try to remember is my conversion from ems to pixels.
In your example:
body {
font-size: 62.5%;
line-height: 1.4em;
}
1 em is equal to 10 pixels if the browser default text-size is 16px. The line height would then be equal to 14 pixels. Like bobince beings out, I would use a unitless line-height value.
To help you with your calculations, you can use an Em Calculator. It allows you to easily convert between ems and pixels.
The problem with em is that it is a relative unit. Inheritance and relativity don't mix well in HTML documents. What I do is use px for font size and box dimensions / positioning, but try to use em for line-height, margin / padding, etc...
I'm sure it's not the "proper" way to do it, but the system was pretty poorly designed from the start, if you ask me.
ems are relative, so if you set:
body {
font-size: .6em;
}
Everything will be relative to that.
Which means (and this is where my head starts to hurt too) that if an h1 has a default font size of 250% larger than most other text (p, li), the header will now be 60% of that default size. So it will still be 2.5 times bigger than the other stuff, but it will be 60% smaller than if you hadn't set the rule at all.
Now, if you then say that :
h1 {
font-size: 1.2em;
}
The h1 will now be 20% larger than what it would be if you hadn't set the rule, so it's 20% larger than the already shrunken down 60% smaller from the first rule. This means that it will no longer be in direct proportion to the browser's default for h1 and other elements.
So basically, you should set your font-size up front for the whole document (like in the first rule I showed), and this is your baseline. After that, you set how you want any individual elements to be sized in relationship to each other (basically in relationship to what they already are)...
So if you know you want all of the fonts in the #wrapper div to be 1.5em from their default, setting it there is perfect. But if you want to change the size of blockquote so that it's a tad smaller, you'd still set the rule for #wrapper, but then make a second rule for blockquote.
If you want to set up page width by using em's, follow this pattern provided by YUI development team
Divide your desired pixel width by 13; the result is your width in ems for all non-IE browsers. For IE, divide your desired pixel with by 13.3333 to find the width in ems for IE.
Here's an example of a custom page width of 600px, and here's what the CSS looks like:
600 px / 13 = 46.15 (non-IE browsers)
600 px / 13.33 = 45.00 (IE browsers)
#custom-doc {
margin:auto;text-align:left; /* leave unchanged */
width:46.15em;/* non-IE */
*width:45.00em;/* IE */
min-width:600px;/* optional but recommended */
}
regards,