If you take a look at this screenshot: http://img687.imageshack.us/img687/4350/photobenchmozillafirefo.png
You can see the text on the top right overflow the div. Eventhough I have placed vertical-align: top in there it still won't stick on the top. How do I make this text appear on the top?
It is at the top. Only the top for a font doesn't necessarily have to be the top visible pixel of a character. Trying to draw it even higher will force you to set the line height smaller than the font size, or set a negative margin. Both solutions may cause the text to be cut off on another computer and/or browser.
You should set line-heigth for the text.
Related
I'm struggling to build an iOS-style table cell component, with title, subtitle, info text on right side, disclosure arrow (chevron) and optional icon. From left-to-right, this can be thought of as:
fixed-width icon
variable-width title/subtitle
variable-width info text
fixed-width chevron image
Without the icon, I have this, which looks pretty good:
But once I make the icon visible, it pushes the chevron off the screen:
Because both text fields are variable-width, I cannot set a width on them (instead I have flex: 0 on the left one, and flex: 1 on the right, which causes the left one to be as big as it needs to be, and the right one to resize to fill whatever remaining space there is). In general, this all works well, except that the fixed images on left and right (icon and chevron) cause the left text to start pushing the chevron off the screen (the right text is zero-width at this point, so whether it's off-screen doesn't really matter).
I've tried all manner of fixes, but the only things I've come up with require measuring the size of components. The two hacks were:
1) Set maxWidth on the left text, subtracting the icon / chevron sizes from the total container width.
2) Set paddingRight on the top-most View, to include the measure width of the icon.
I'm trying to avoid either of these, because the size of the icon/container are unknown, and I don't want to have to add an onLayout handler to measure them and recompute. Any ideas how this would be possible?
Here's a gist of where I'm at, I've replaced the chevron with a fixed-size orange view: https://gist.github.com/jd20/36456c95011b65c0280cba920365b1f6
For me it helped to simply add flex: 1 to the styling of the Text. Then it adjusts appropriately and lets everything else fit in.
You can try to give position: 'absolute' into styling & some padding according to if need be.
When I float images on my WordPress site, the text is not aligned vertically with the image, but appears a bit lower on the page. I suspect this is to do with line-height of the text, but I'm not sure how to fix it.
Here's the example. Scroll to the bottom of the page under Recommended by:
http://www.myfiveacres.com/hidden-gems/saison-market-vineyard-duncan-bc-canada/
You should post your code, but one thing you could try is adding a negative top margin to your text.
margin-top:-*px;
And of course, replace the * with however many pixels are needed.
I have a fluid layout consisting of a header and a content area. The header is meant to occupy 10% of the window's height and the content area is expected to occupy the remaining 90%. Text in the entire screen should scale proportionally to the window's height. Also text in the header should be centered vertically. I am able to meet all these requirements except the last one. Anyone know how to do this?
Here's what I have so far: http://jsfiddle.net/nareshbhatia/h2s4h/
I am using Em units to do relative sizing of the text. I use JavaScript to change the font-size of the body element whenever the window is resized. This approach scales the fonts beautifully for the entire window. Finally, I tried to center the header text vertically by setting the line-height of the header to be the same as its height (i.e. 10%). This usually centers the text vertically (when the height is defined in pixels), but in this case the text does not center vertically. Any ideas on how to fix this?
Edit The jsFiddle is updated to show the suggested answer.
The line-height approach centers the text when you only have one line. You are using percentages, so I think this question might help in that respect.
What you could do instead is use some more jQuery or JS to, on load:
Measure the outer height of the paragraph (or whatever element you are using) in the .content
Calculate the bottom offset of this paragraph in relation with the .content (how much space you have remaining from the bottom border of the paragraph to the bottom border of the .content div)
Divide the remainder in two, and add that number as a top margin or top position for the paragraph.
This will let you have longer text without messing with the line-height.
If you want a pure css solution, check these alternative ways of centering vertically.
How would you change the vertical positon of text of a HREF? I would like to move the text down by 1 pixel AND STILL preserve the padding. I'm at a loss.
If you take a look at the following fiddle, http://jsfiddle.net/2vjbz/, the numbers is what I'm referring too.
The easiest fix is to change the top padding to one pixel more, and the bottom padding to one pixel less.
Alternatively if you don't want to change the padding for any specific reason, try setting the line-height to 2px higher.
Whenever i use a large line-height like 1.6em it always adds a margin in the very top of the text which i don't want.
Example: http://jsfiddle.net/EstpJ/1/
i want the text to be sharply lined with the borders and not have any kind of top or bottom margin.
How to fix that?
That's exactly what line-height is, it's a manual way to set the height of a line of text for the purposes of wrapping text and such. The actual visible size is determined by the font-size and to a lesser extend by the font-family. The average line-height for normal text/font is around 1.2em. Anything larger than that will cause visible letterboxing, which is exactly what you are describing. Using a smaller value will cause successive lines to overlap each other.
The only way to fix your exact example is introduce more markup to determine line numbers so that you can style the first/last line differently.
You could maybe slightly alter your markup (I prefer wrapping <p> tags around lines of text) and use a negative top margin?
As Matthew said, this is what lineheight does.
You could try to set the line height on an inner div (inside the one with borders), and counteract the top and bottom effect by also setting a negative top and bottom margin. But it's likely that the negative margin won't work in all browsers.