I have a form with labels in fixed width and right text-align :
.form-horizontal label {
clear: right;
float: left;
font-size : 11px;
margin: 7px;
padding: 5px 5px 0 0;
text-align: right;
word-wrap:break-word;
width: 90px;
}
The problem is, when the label size exceeds 90px, it's rendering one letter over another. For instance, the label 'Tx Emis. Int. R$' is rendering like this image :
Is there a way using only CSS to reduce the font size automatically to avoid this ? Or if not, how can i force word-wrap to next line instead of this behaviour ?
Thank in advance !
Responsive Font Size
* {
/* Calculation */
--diff: calc(var(--max-size) - var(--min-size));
--responsive: calc((var(--min-size) * 1px) + var(--diff) * ((100vw - 420px) / (1200 - 420))); /* Ranges from 421px to 1199px */
}
h1 {
--max-size: 50;
--min-size: 25;
font-size: var(--responsive);
}
h2 {
--max-size: 40;
--min-size: 20;
font-size: var(--responsive);
}
Related
I would like to raise the meter bar X pixels to be centered with the text height (on either side of the bar). I want only the meter bar to be raised, and the text to remain in position.
I've tried padding-bottom but it raises the whole line.
Many thanks,
meter::-webkit-meter-bar {
height: 10px;
}
TEXT <meter value="0.5"></meter> TEXT
Give this a go!
meter::-webkit-meter-bar {
height: 10px;
margin-top: 2px; /* (16px - 10px) / 2 */
}
#meter {
font-size: 16px;
line-height: 16px;
}
<div id="meter">
TEXT <meter value="0.5"></meter> TEXT
</div>
If you wanted the font smaller, you would update it to something like this:
meter::-webkit-meter-bar {
height: 10px;
margin-top: 1px; /* (12px - 10px) / 2 */
}
#meter {
font-size: 12px;
line-height: 12px;
}
<div id="meter">
TEXT <meter value="0.5"></meter> TEXT
</div>
<html>
<body>
<div style="padding:0;margin:0;background-color:yellow">A</div>
</body>
</html>
This example shows there's still inner spacing above and below letter 'A'. Can that space be removed? Looking at this example: I would like to have no yellow pixels above or below letter 'A'.
In case that cannot be done, is there another way to have two elements one below the other with at most two pixels of space between text in those elements?
If you don't want the parent div to have any space above and below the character, you'll have to match the line-height of the div to the cap-height https://en.wikipedia.org/wiki/Cap_height - but it could be tricky with decenders - https://en.wikipedia.org/wiki/Descender . : / - but if you explain what you want to accomplish - I bet there is a better way. : )
div {
background: red;
margin-top: 2rem;
}
.normal {
/* no rules for space */
}
.line-height {
line-height: 0;
}
.line-height-b {
line-height: .1;
}
.height {
height: 0;
overflow: hidden;
/* not going to see this... */
}
<div class='normal'>A</div>
<div class='line-height'>A</div>
<div class='line-height-b'>A</div>
<div class='height'>A</div>
Try setting the CSS line-height property value less then the font-size.
padding: 0;
margin: 0;
background-color: yellow;
font-size: 16px;
line-height: 12px;
<div style="line-height: 11px; height: 12px;background-color:yellow;">A</div>
Use combination of line-height and height.
I want to have one of those "i" icons appear next to a name on my site so people can click on it and look up more information. I have this HTML
<div id="personName"><h2>PersonA</h2> <div id="moreInfo">i</div></div>
and the below style
#personName {
display: block;
}
#moreInfo {
border-radius: 50%;
behavior: url(PIE.htc); /* remove if you don't care about IE8 */
width: 36px;
height: 36px;
padding: 8px;
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;
font: 32px Arial, sans-serif;
font-weight: bold;
font-style: italic;
display: inline-block;
}
The problem is I also have this style
* {
box-sizing: border-box;
}
which I need for a lot of other elements on my site and it seems to be throwing off the way my "i" graphic is appearing -- https://jsfiddle.net/ds9sqr0y/ . It also doesn't seem to be appearing next to the name, but maybe that's a separate issue.
That's because box-sizing: border-box includes both the border and the padding in the height computations.
Which means that if you create an element with height: 30px and padding-top: 5px, it will be 35px tall (height + padding) but with setting box-sizing: border-box, it will be 30px tall.
In your specific case, you can increase the height and width to the following to make it look like you want to:
width: 57px;
height: 57px;
As per Jesse de Bruijne's answer, you can set the padding property within the #moreInfo selector to 0. If you can, try and reduce the font size of the i, to better position it (I'm using Chrome). Setting it to 30px seems to show it better.
#moreInfo {
...
padding: 0;
font: 30px Arial, sans-serif;
...
}
I am trying to vertically align the placeholder text in textarea (textbox). I am using textarea instead of text input because I need to use multiple lines.
.textbox1 {
width: 440px;
}
<textarea class="textbox1"name="mytextarea"placeholder="Name"></textarea>
One option is to use line-height:
.textbox1 {
width: 440px;
height:30px;
line-height:30px;
}
.textbox1 {
width: 440px;
height:30px;
line-height:30px;
}
<textarea class="textbox1"name="mytextarea"placeholder="Name"></textarea>
You can also use padding to control the position of the text.
Here's an example using padding-top
.textbox1 {
width: 440px;
padding-top:15px;
}
<textarea class="textbox1"name="mytextarea"placeholder="Name"></textarea>
UPDATE
Since the requirements include multi-line support, I'd recommend setting the top and bottom padding i.e:
.textbox1 {
width: 440px;
height:6px;
padding: 30px 5px;
}
.textbox1 {
width: 440px;
height:60px;
padding: 30px 5px;
}
<textarea class="textbox1"name="mytextarea"placeholder="Name"></textarea>
Instead of using padding-top which will increase the height of the textarea and extra space down use the line-height here is a sample, you can vary the line-height.
textarea::placeholder {
line-height: 90px;
}
you can also use transform property like this:
textarea::placeholder {
transform: translateY(-20px);
}
This works for latest Firefox, IE/Edge, Chrome in pure CSS:
textarea {
width: 440px;
height:600px; /* Note this is the same height as the placeholders line-height */
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
line-height:600px;
}
::-webkit-input-placeholder { /* Webkit */
line-height:600px;
}
:-ms-input-placeholder { /* IE */
line-height:600px;
}
See this fiddle. The key is to set the height of the textarea to the same line-height as the placeholder.
Sadly vertical-align: middle; seems not to be supported yet.
Your best bet is to use padding, as line height will not work over multiple lines.
Additionally, make sure to take into account the line height / font size when calculating your padding.
I guess this is not exactly what you want, But try to look ..
To center it vertically, I multiplied the height of the element to 7.5% and make it line-height.
.textbox1{
width: 440px;
height:100px;
line-height: calc(100 * 7.5%);
}
.textbox1:focus{
line-height: 14px;
}
Check it here. pure CSS jsFiddle
Note: CSS3 calc() function only works on modern browsers. You can manually change/calculate the line-height if you want it to work on older browsers.
or you really have to use jQuery
I made a help of jQuery here jQuery jsFiddle
.textbox1 {
width: 440px;
height:70px
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
line-height:70px;
text-align: center;
}
:-moz-placeholder { /* Firefox 18- */
line-height:70px;
text-align: center;
}
::-moz-placeholder { /* Firefox 19+ */
line-height:70px;
text-align: center;
}
:-ms-input-placeholder { /* IE 10+ */
line-height:70px;
text-align: center;
}
You can check here CSS jsfiddle
Use the line-height property to make the placeholder vertically centered.
Just as an alternate solution - you could set the rows to an odd number and add half the rows rounded down in line feed characters to put the placeholder in the middle...
.textbox1 {
width: 440px;
}
<textarea class="textbox1"name="mytextarea"placeholder="
Name" rows=3></textarea>
<textarea name="example" onFocus={onFocus} onBlur={outFocus} />
<label className={styles.Teaxarea_label}>Label</label>
and then you have those functions:
const outFocus = (event) => {
if (event.target.value !== '') {
event.target.nextSibling.style = "display:none;"
}
else {
event.target.nextSibling.style = "display:block;"
}
}
const onFocus = (event) => {
event.target.nextSibling.style = "display:none;"
}
CSS:
.Teaxarea_label{
position: absolute;
user-select: none;
pointer-events: none;
display: block;
}
textarea {
position: relative;
}
To improve on the padding answers, here is a way to guarantee calculations that center it. This works better than line-height for multiple lines, but it still means that once the user enters multiple lines of text, there will now be overflow to scroll, rendering the centering essentially useless
.textbox1 {
--title-modal--textarea--height: 100px;
/* font-size variable for calculations cannot be em, otherwise calculations become doubly-dependent on font-size */
--title-modal--textarea--font-size: 1rem;
--title-modal--textarea--line-height: 1.5;
height: var(--title-modal--textarea--height) !important;
font-size: var(--title-modal--textarea--font-size);
line-height: var(--title-modal--textarea--line-height);
padding-top: calc((var(--title-modal--textarea--height) - (var(--title-modal--textarea--line-height) * var(--title-modal--textarea--font-size)))/2);
/* I used these to make sure the border doesn't take away from the height, */
/* affecting the padding calculation, */
/* but you could similarly turn them into variables and subtract */
border-bottom: 0;
border-top: 0;
}
You can use absolutely positioned placeholder:
textarea::placeholder {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Check this example
How do I vertically align the characters/text inside an input without changing the height of the input (it has to be exactly 28px)? The input has this CSS, so I don't understand why it has some padding-top (?):
input {
font-family: arial;
font-size: 28px;
line-height: 28px;
height: 28px;
padding: 0;
border: none;
outline: none;
background-color:#cdcdcd;
}
<input value="asdg">
Some letters like g, p and q get cut off
Removing the margin-bottom doesn't help.
https://jsfiddle.net/4rtL6415/
There is no padding top, it's about font size. I've changed your snippet input with a special char that fit the whole height (I'll explain below):
input {
font-family: arial;
font-size: 28px;
line-height: 28px;
height: 28px;
padding: 0;
border: none;
outline: none;
background-color:#cdcdcd;
}
<input value="ￂgs">
This image:
Explain how a font is construct. 99% of the time you'll see characters with Body < EM and that's why we may think that there is a sort of padding-top.
Sometimes, you'll cross characters for which Body == EM, that's the case of ￂ (and a lot of others).
What you are seeing is not a bug but a feature. From here you have 3 choices:
Changing the font-size;
Changing the input height;
Changing the font-family for one that doesn't "overflow".
The choice is all yours.
The Problem
In some fonts, characters with descenders, like g, p, q, and y, "overflow" the vertical space defined by the font-size property. Normally, that's not a problem, because the line-height property provides enough extra space to accommodate the descenders. However, if the characters are placed in a container element with a fixed height that's less than the line-height, the descenders may get clipped if that's how the container handles overflow (text inputs being one example of such).
If you were hoping to bump the text up a few notches to avoid the clipping, then you'll be disappointed to know that there is currently no way to reposition text within its own line-height. (vertical-align, in case you were wondering, positions an inline element relative to its parent.) However, there are a few CSS tricks that we can use to achieve the same visual effect...
Solution 1 (Webkit only)
This one works by giving the input a large enough height to fit the font's lower extremities, and then using clip-path to trim it back down to 28px. This is probably the most elegant solution, but unfortunately, clip-path isn't well supported outside of Webkit browsers (Chrome, Safari, Opera).
input {
display: inline-block;
padding: 0;
border: none;
height: 32px;
font-size: 28px;
line-height: 32px;
font-family: arial;
background: #cdcdcd;
vertical-align: baseline;
-webkit-clip-path: inset(4px 0px 0px 0px);
clip-path: inset(4px 0px 0px 0px);
}
input: <input value="asdg">
Solution 2
This one was inspired by DebRaj's answer, but mine uses an inline-block wrapper instead of a block (not sure how you would use it otherwise). Like the previous solution, it increases the height of the input, but instead of using clip-path to trim it back down, it uses a container element with overflow: hidden;. This is probably the most practical approach until support for clip-path improves.
.text {
display: inline-block;
vertical-align: baseline;
overflow: hidden;
margin: 7px 0 -7px 0;
height: 28px;
}
.text > input {
margin-top: -4px;
border: none;
padding: 0;
background: #cdcdcd;
font-size: 28px;
line-height: 32px;
font-family: arial;
}
input:<span class="text"><input value="asdg"></span>
Solution 3
Although you can't reposition text within its own line-height, this may be the next best thing. If you set the line-height to something less than the font-size, the text will indeed move upward relative to its normal baseline. That means you can bring the clipped parts into view without changing the container height. Unfortunately, if you try this with a text input, you'll discover a strange quirk: line-height is completely ignored if it's less than the input's height. So we'll have to substitute a different element, and turn it into an editable textbox somehow. That can be accomplished with the contenteditable attribute.
.fauxTextInput {
display: inline-block;
vertical-align: baseline;
margin: 6px 0 -6px 0;
padding: 0 3px 0 3px;
width: 9em;
height: 28px;
overflow: hidden;
font-size: 28px;
line-height: 23px;
font-family: arial;
background: #cdcdcd;
}
Faux input: <span class="fauxTextInput" contenteditable>asdg</span>
As #Thomas mentioned there is a default spacing as per font construction rules. If we concentrate the output you want to achieve is make font exact same height at the input area, you can wrap your input into a div and give that a height to adjust the input into it using as a mask.
Here is the code:
<div class="input-wrapper">
<input value="asdg">
</div>
CSS:
.input-wrapper{
position: relative;
font-family: arial;
width: 100%;
height: 90%;
padding: 0;
background-color: #fff;
overflow: hidden;
}
.input-wrapper input {
display: block;
width: 100%;
height: 124%;
margin-top: -0.19em;
margin-bottom: 0em;
font-size: 28px;
padding: 0;
outline-offset: 0;
border: none;
}
.input-wrapper input:focus{
outline-offset: 0;
outline: 0;
border: none;
box-shadow: none;
}
fiddle: https://jsfiddle.net/x8jmLp8m/12/
Hope that helps.
Although there have been plenty of answers. I thought I'd add my solution to the bunch.
In this Fiddle, you can see how I managed to create an input field with a span tag, and the contenteditable attribute. The pros of taking this route are that the input field can stretch and wrap and that we can make it exactly 28px high.
In the CSS, I've added the following rules that are important:
span{
display: inline-block;
font-size: 25px; /*higher than 25px simply doesn't fit a 28px container*/
line-height: 1;
padding: calc(-.5em + 14px) 0;
}
display, of course, to style the bunch
font-size to declare the height of the font
line-height of 1 to make sure the text actually takes up 25px by default.
a padding of calc(-.5em + 14px) 0. And that's the tricky part
Because of this padding, the element will stay 28px high, while still centering the text. See the table below to see how the calculation works. The font-size and output * 2 always add up to a minimum of 28.
font-size | calculation | output |
--------------------------------------
50px | calc( -25px + 14px) | -11px | a negative padding translates to a padding of 0
25px | calc(-12.5px + 14px) | 1.5px |
20px | calc( -10px + 14px) | 4px |
15px | calc( -7.5px + 14px) | 6.5px |
10px | calc( -5px + 14px) | 9px |
With this code, you can edit the span's height by editing the 14px part in the calc, and edit the font-size without having to recalculate yourself
Hope this helps
Edited your fiddle here
The problem is your font is larger than the height of the element enclosing it. So you just need to set both the height and line-height to a couple of px larger than the font size you're using.
Hope this helps.
Just decrease the font-size:
input {
font-family: arial;
font-size: 20px;
line-height: 28px;
height: 28px;
padding: 0;
border: none;
outline: none;
background-color:#cdcdcd;
}
<input value="asdg">
I hope this will help you know what you want to achieve
In CSS, the line-height
property sets the height of
an entire line of text, so the
difference between the font-
size and the line-height is
equivalent to the leading (as
shown in the diagram above).
And our css is this
input {
font-family: arial;
font-size: 28px;
line-height: 28px;
height: 28px;
padding: 0;
border: none;
outline: none;
background-color:#cdcdcd;
}
Here we have set line-height and font size equal and because of that decent is getting cut.So you either need to decrease font-size or increase line-height.
input {
height:34px;
}
Just change height and line-height to 40px or more.
https://jsfiddle.net/525raf3L/
input {
font-family: arial;
font-size: 28px;
line-height: 40px;
height: 40px;
padding: 0 12px;
border: none;
outline: none;
background: yellow;
}
<input value="asdg">