I have a element and it is possible that it is longer than one line, so i have to set a line-height>1 otherwise it looks crappy. But if i do that, the lines are higher than the text, and the text is centered. So it does not match the top. How can i change the position of the text to the top of the line, or is there another way to get some space between two lines?
Line height by definition centers the font-size within the given line height. If you have a 12px font and a 16px line-height, the text will be centered within the 16px, leaving 2px on both the top and the bottom.
One solution to push this text up while maintaining the line height is to add a negative margin to the element and push it up negatively:
float: left;
margin-top: -2px;
Try this:
<style type="text/css">
.spacer
{
line-height:1px;
}
.spacer:after
{
content:".";
visibility:invisible;
line-height:1px;
}
</style>
You can increase the line height in the above CSS code there and use it like this:
your line one
<p class="spacer"></p>
your line two
Related
How should the CSS be adapted without setting fix column widths so that all columns are at least as wide as the titles? The only change was the setting of sticky on the table.
On this screenshot only 7 out of 17 column titles are readably visible:
Somehow the width of the regular cells must be specified so that they're at least as wide as the related headers.
This css makes it look acceptable, but still too wide for certain columns:
.projektTable th {
white-space: nowrap;
}
.projektTable td {
white-space: nowrap;
min-width: 180px;
}
I would import an overrides.css file with the following:
th.ant-table-cell {
white-space: nowrap;
}
I have a form, ending with an "I agree to these terms and conditions line" with a checkbox.
The code that I have for the checkbox is currently:
Although all is functioning well, the width of the checkbox element is too much. This causes a very wide space between the "I agree..." statement, and the actual checkbox. Any tips on how I can left align the checkbox, or reduce the width of the checkbox's element.enter image description here
Standard checkboxes in Rails could be changed with CSS in the following way:
input[type="checkbox"]
width: 10px //or however wide you desire
height: 10px
Although you should be detailed with your selector in case your checkbox is wrapped in some div with an ID, in which case the above will look slightly different:
#div input[type="checkbox"]
width: 10px //or however wide you desire
height: 10px
I have a body content in my wicked-pdf report with variable font-size
If i add font-size to paragraph like
p {
font-size: 16px !important;
}
then whole paragraph font-size will become 16px, there may be a word containing 22px font-size also in that paragraph
so i need to increase the font size to their normal font-size values
for example
If the word containg font-size 16px then i should make that to 17px; or if the word containing font-size 22px; then i should increase to 23px; in my pdf report
I mean If my tag contains the value <p style="font-size:16px"> then it should convert to <p style="font-size:17px">
I mean i need to increase or adjust the font-size values little bit more to their normal size values in my pdf report
You can pass in a value for zoom that is equivalent to zooming the page of a web browser:
render :pdf => 'mypdf', :zoom => 1.5
I need to create a a 2x2 grid for a mobile website where the cells are text areas. The problem is that when I do this there doesn't seem to be a way where the text boxes all join together at the inner-most corner. All I am able to achieve is two separate text boxes on top of two other separate text boxes none of which are touching vertically of horizontally. I have tried to manipulate the margins, padding, and borders, but nothing works. Thanks for your help!
Working example: http://jsfiddle.net/Gajotres/cGt2J/
CSS used:
.ui-input-text {
border-radius: 0 !important;
margin:0 !important;
}
I was under the impression that line height would be slightly larger than font-size(about 20%). What I am seeing instead is that I have to set line height below that of font size to get a reasonable line height.
I need to set line-height manually for layout purposes. What am I doing wrong?
Here's jsfiddle showing huge line-height when font-size and line-height are the same.
In case fiddle goes down:
HTML:
<h2>Contact Me</h2>
<p>You can Contact Me at sample#smaple.com or use the contact form below:</p>
CSS:
h2 {
font-size:2em;
line-height:2em;
float: left;
background-color:red;
}
p {
background-color:yellow;
font-size:2em;
line-height:2em;
}