I have a paragraph tag that I defined elsewhere with a line height of 15px, and I have another paragraph tag further down the page where I want to make the line height around 10px. Funny thing is, it won't let me get down to 10px or anything smaller than that, but when I set it to 25px or higher, the line-height property seems to be working.
I checked the relevant CSS (all hand-coded) via the Chrome browser's web developer tools (Chrome's version of Firefox's Firebug) and couldn't find anything relevant. Is there a common CSS bug that prevents me from shrinking the line-height beyond a certain minimum amount?
I've noticed in both Firefox and Chrome that if you set the HTML5 doctype there's a minimum line-height for inline elements. For block elements you can set the line-height to whatever you want, even make the lines overlap.
If you don't set the HTML5 doctype, there's no minimum line-height for either block or inline elements.
I ran into the same issue, worked well with:
.element { display: block; line-height: 1.2; }
After testing this in IE 8-11, Firefox 38.0.1, and Chrome 43, the behavior is the same: inline elements have a minimum line-height that they won't go below. It appears this minimum height comes from the CSS spec:
On a block container element whose content is composed of inline-level elements, 'line-height' specifies the minimal height of line boxes within the element. The minimum height consists of a minimum height above the baseline and a minimum depth below it, exactly as if each line box starts with a zero-width inline box with the element's font and line height properties. We call that imaginary box a "strut."
If you want to maintain some benefits of inline elements, you can use display: inline-block. You can also use display: block. Both will allow you to make the line-height whatever you want in all the browsers I tested.
Two related questions for more reading:
why the span's line-height is useless
The browser seems to have a minimum line-height on this block that contains text. Why?
line-height is relative to font-size, you can't go any lower than that unless you declare negative margin.
Related
I notice that when I use LoginForm it has a default size. I can't quite figure out how it gets this size. I would like to standardize the sizes of all my forms, e.g. FormLayout and LoginForm. I do not mind making my FormLayouts match the size of the LoginForm -or- set the LoginForm and FormLayouts to my own preset size. The problem is that when I set the LoginForm's width as a percentage, it never seems to match the same size as the FormLayouts... the LoginForm always comes out smaller for the same percentage.
Is there any way to set my LoginForms and FormLayouts to have the same width consistently?
Currently, there does not seem to be a way how to get the fields from a LoginForm with the Java API. There is a GitHub issue for a similar issue.
As described in the issue, you could execute JavaScript to get the relevant element. Then, you could modify its CSS manually. To set the width of a LoginForm, you could use vaadin-login-form-wrapper.
UI.getCurrent().getPage().executeJavaScript("document.getElementsByTagName('vaadin-login-form-wrapper')[0].style.width = '200px';");
Alternatively, you could use raw CSS and change the attributes of this element.
After investigating the CSS, you could find out that the width of the form is defined by the CSS variable --lumo-size-m. The max-width of the vaadin-login-form-wraper is defined by calc(var(--lumo-size-m) * 10). Therefore, you could also change the theme or just get the width from there and use it for your FormLayouts.
If I add too many/too long captions to a vaadin7 timeline, they will only be displayed partially (i.e. the part we have space for is displayed and the remainder is truncated)
How can I increase this area in order to allocate enough space for all?
timeline.setGraphCaption(container, h.toString());
You need to add these rules in your scss file:
.v-timeline-widget .v-timeline-widget-modelegend{
background: inherit;
}
.v-timeline-widget-legend-label{
height: auto !important;
white-space: normal !important;
}
Before:
After
3 points:
While these rules may not met criteria of well-written CSS or good practice rules (I am looking at you !important), they do the trick. Still, better approach would be to get your hand dirty by editing Vaadin Timeline addon sources.
As you surely noticed text background has changed. That's because we override default background which was designed for only one line (you should provide your own background image)
Bottom of the widget is cut off by few pixels. Well, the only way to fix it is to jump into DOM and css and try fix it. Doable but I haven't tried.
I've run into a problem where the glyphs are positioned as I expect when I specify line height:1 UNTIL the font-size became greater than 255px. Set the font-size to 256 and bam, the glyphs change position dramatically and become too high on the line.
I'm using Google Web fonts to bring in Josefin Sans - http://www.google.com/webfonts/specimen/Josefin+Sans
Edit: I'm using Chrome on Fedora, not one of those cool machines with market share and funding
Simplified fiddle here - http://jsfiddle.net/jBAnc/
Edit: The fiddle isn't showing the code for me. If you click on "Bacon", it'll toggle between 255 and 256, causing it to bounce back and forth (at least for me).
I don't encounter this problem when the font is a basic web-safe font such as Arial, so I assume it has something to do with the google Web-font. Is this a problem with the font's encoding, possibly the program the font was created with (255 seems significant)?
I'm getting inconsistent line-height/spacing issues with this font. I'm beginning to suspect that it's a problem with the construction of Josefin Sans itself.
EDIT: after a little more Googlizing, it appears the issue is not so much the font itself, but the Google Webfont API.
http://webdesignandsuch.com/fix-fonts-that-dont-work-with-google-font-api-in-internet-explorer-or-chrome-with-font-face/
Short answer: Download and host the font yourself and you should have no issues.
There's nothing wrong at all. You're just expecting all fonts to have the same x-height, descender/extender-heights, and they just don't (9 times out of 10).
The following fiddle illustrates the differences between 4 fonts (3 being very common fonts found on Macs, PCs, etc). And Josefin Sans is in the house as well.
Pay particular attention to the differences in:
the top spacing between the capital Q and its parent's border
the various heights of the Xx (especially, the lower-case vs capital)
descender of the lower-case G (some actually come out of their
parent)
_http://jsfiddle.net/suK2U/
To answer your question about 255/256px, I'd venture to say that you just happened upon a 'sweet-spot' between your container and its parent. At 256, it starts colliding (and margins start to collapse, or the like).
If the sass file content is
#some-div
color: #333
font-size: 17px // This value actually has some issue on WebKit because it makes
// the label a little off centered, and is better if it is 16px.
// But on IE, the font turns out to be rather ugly, so we would
// use 17px for now since IE has a larger user base
the above will actually fail, because it will complain the indentation is not correct (starting the second line of comments). How might it be solved to have multiple lines like this? Note: It can be made into all indented the same level as the font-size line (and on top of it), but I'd rather not do it like that in this case.
Sass is very indentation-based. As such, there really is no choice but to either
Combine the comment onto the end of the line, which will be huge and unwieldy.
Move the comment above or below your line.
The documentation for the indentation syntax covers comments in this section.
You might find some of the options useful, for example, you only need to have the first line of the comment with slashes, the rest can be indented, which may be more readable for your purposes.
It would look like this then:
#some-div
color: #333
font-size: 17px
// This value actually has some issue on WebKit because it makes
the label a little off centered, and is better if it is 16px.
But on IE, the font turns out to be rather ugly, so we would
use 17px for now since IE has a larger user base.
SCSS is the preferred syntax to use now as all valid CSS is valid SCSS; it also allows for the type of comments you would like (in addition to quite a few very nifty additions such as using &:hover inside of a selector to group your variations on styles more logically).
I'd like to use CSS Sprites, but I haven't used it in massive scale before, and seems like when all the images are being displayed using CSS Spirites (image as background), then it must be inside a div or span with display: block so that it can have a width and height?
If so, then isn't it messy that, before, as an <img>, it can flow as an inline element naturally, but now, it has to be floated.
It might be able to be shown as inline-block, but I think it is not well supported by all browsers?
I use this fix for inline-block when spiriting (although I ignore the vendor style for Firefox as modern FF plays nice).
FTA:
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
Note that IE is generally fine as long as the element hasLayout.