HTML <textarea> shows dynamic text half its height when it first loads [when the page loads] like this:
When you focus and start typing or pushing left or right arrow keys, then it shows the text to its full height as it should like this.
How to make the dynamic text appear at its full height when it first loads without having to focus on the <textarea> and push right/left arrow keys? Here is the HTML and CSS codes:
textarea {
height: 55px;
background-color: #009688;
font-size: 55px;
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: none;
border-bottom: 2px solid white;
}
<textarea id="location" style="overflow:hidden"></textarea>
Thank you.
I think it is because the padding/margin you have added. Try running by removing the padding/margin and see if that works for you.
You want the height to include the padding and border size as you have used box-sizing so your height should be the size of the font plus top and bottom padding and border
In this case that is 55px (font) + 24px (12px top and 12px bottom padding) + 2px (border - you have no top and 2px bottom) = 81px
textarea {
height: 81px;
background-color: #009688;
font-size: 55px;
line-height:55px; /* added this just to ensure the line height is the same as the font size */
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: none;
border-bottom: 2px solid white;
}
<textarea id="location" style="overflow:hidden">someText</textarea>
Please check the updated one. Added line-height and updated attribute to rows=1 instead of giving height to textarea.
textarea {
min-height: 55px;
background-color: #009688;
font-size: 55px;
line-height: 60px;
width: 100%;
padding: 0 20px;
margin: 8px 0;
box-sizing: border-box;
border: none;
border-bottom: 2px solid white;
}
<textarea id="location" rows="1" style="overflow:hidden"></textarea>
Just increase height as height and font-size is same:
textarea {
height: 80px;
background-color: #009688;
font-size: 55px;
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: none;
border-bottom: 2px solid white;
}
Adjust font-size and padding like
padding: 12px 12px;
and
font-size: 40px;
Try this: I just remove the padding. You can also add the padding just add more height
Explanation:
The size of font and the height of textarea is the same PLUS you have a padding.
textarea {
height: 55px;
background-color: #009688;
font-size: 55px;
width: 100%;
/*padding: 12px 20px;*/
margin: 8px 0;
box-sizing: border-box;
border: none;
border-bottom: 2px solid white;
}
<textarea id="location" style="overflow:hidden">Prefilled</textarea>
Related
I have an input element that has a height that is 2px greater than expected.
Below is the css
.input {
font-size: 16px;
padding: 15px;
border: 1px solid black;
border-radius: 3px;
width: 400px;
}
<input class="input">
I would have expected the content height of the input to be 16px due to the font size. For some reason Chrome says my content box is 18px rather than 16px. I even tried to set line-height: 1 but did not work. Can someone explain this? I'd rather not hard code the height as a solution.
You can set box-sizing: content-box and set height: 16px
.input {
font-size: 16px;
padding: 15px;
border: 1px solid black;
border-radius: 3px;
width: 400px;
box-sizing: content-box;
height: 16px;
}
<input class="input">
It says this because of 1px border but to resolve this add box-sizing: border-box; to it.
It will surely solve your issue but if it doesn't let me know in the comments, I will try my best to help you.
So I have this code:
<h1 id="result" style="color:black; font-family: Bradley Hand; font-size:50px; position:absolute; top:17%; left:60%">
text
</h1>
How can I make a border that if I put a longer text in, my border will keep its position and change its size, to make my text still in the border? Thanks!
Just adding border: 1px solid black (for example) to what you have works perfectly fine. The h1 element will grow and shrink to fit it's content and the border will do so as well:
const result = document.getElementById('result');
const sentence = "HELLO! IT LOOKS LIKE THIS IS WORKING FINE...";
let index = 0;
setInterval(() => {
index = (index % sentence.length) + 1;
result.innerHTML = sentence.slice(0, index);
}, 250);
#result {
position:absolute;
top: 10%;
left: 10%;
padding: 0 .5rem;
font-family: Sans-Serif;
font-size: 2rem;
line-height: 3rem;
color: black;
border: 3px solid black;
border-radius: 3px;
min-height: 3rem;
}
<h1 id="result"></h1>
Anyway, I suspect you may be referring to the border changing your element's dimension:
#bar1 {
width: 50%;
height: 1rem;
background: red;
margin: .25rem;
}
#bar2 {
width: 50%;
height: 1rem;
background: cyan;
margin: .25rem;
border: 3px solid black;
}
<div id="bar1"></div>
<div id="bar2"></div>
That's because by default, your element's width and height are actually a sum of the specified width and height properties, plus padding plus border, as you can see from the example above.
If that's the case, you have two options to keep the dimensions just as specified with width and height:
Using box-sizing: border-box. That will make padding and border included in the element's total width and height.
Using box-shadow instead of border. You can use the inset property to draw the shadow to the inside of the element instead of to the outside.
#bar1 {
width: 50%;
height: 1rem;
background: red;
margin: .25rem;
}
#bar2 {
width: 50%;
height: 1rem;
background: cyan;
margin: .25rem;
border: 3px solid black;
box-sizing: border-box;
}
#bar3 {
width: 50%;
height: 1rem;
background: yellow;
margin: .25rem;
box-shadow: inset 0 0 0 3px black;
}
#bar4 {
width: 50%;
height: 1rem;
background: lime;
margin: .25rem;
box-shadow: 0 0 0 3px black;
}
<div id="bar1"></div>
<div id="bar2"></div>
<div id="bar3"></div>
<div id="bar4"></div>
Note the 4th bar, the one with the outer box-shadow looks bigger, but if you inspect it, its dimensions are exactly the same as those in the other 3 bars.
Can you just add border: solid 1px black; to the style attribute, like this?
<h1 id="result" style="border: solid 1px black; color:black; font-family: Bradley Hand; font-size:50px; position:absolute; top:17%; left:60%">text</h1>
Fiddle: https://jsfiddle.net/myingling/LL57yd8j/
Here's some reading on CSS borders: https://www.w3schools.com/css/css_border.asp
I have the following code:
.mod-prb {
display: block;
width: 250px;
height: 35px;
border: 2px solid #809097;
border-radius: 8px;
padding: 3px;
}
.mod-prb > div {
display: block;
height: 20px;
height: 30px;
border: inherit;
border-radius: 8px;
text-align: right;
padding: 0 10px;
}
<div class="mod mod-prb">
<div class="perc"></div>
</div>
The problem is that the <div class="perc"> can go up to width:95%;. How would I go about calculating pixels so that I can use JS 1%-100%. To clarify: I'm adding width with JS, so that's not an issue.
Why this happens
This issue is happening because you are setting the width to 100%, but the inner box also has a padding of 10px (in left and right) and a border of 2px. That makes it have an actual width of 100% of its parent width + 20px (10px margin on both sides) + 4px (2px border on both sides).
How to fix it
You could fix it in different ways. The easiest one would be to use box-sizing with a value of border-box:
The width and height properties include the padding and border, but not the margin.
The code would look like this (note how the height changes too):
.mod-prb {
display: block;
width: 250px;
height: 35px;
border: 2px solid #809097;
border-radius: 8px;
padding: 3px;
}
.mod-prb > div {
display: block;
height: 35px;
width:100%;
border: inherit;
border-radius: 8px;
text-align: right;
padding: 0 10px;
box-sizing:border-box;
}
<div class="mod mod-prb">
<div class="perc"></div>
</div>
I had this problem quite a few times and never were able to solve it.
I basically just have a div with 20px padding and would like to fit the searchbox 100% relative to the divs' possible width (including the padding). But the searchbox keeps overlapping the padding from the div. Can anybody help me there?
<div class='content'>
<form id='submit' action='' method=''>
<input type='text' autofocus='on' placeholder='Search with DuckDuckGo' autocomplete='off' id='searchBox'>
</form>
<p>Lorem</p>
<p>Lorem</p>
<p>Lorem</p>
</div>
.content { # This is the main div!
background-color: rgba(240,240,240, 1);
padding: 20px;
display: inline-block;
text-align: center;
margin-top: 25%;
width: 40%;
box-shadow: 0px 0px 20px 3px #101010;
}
#searchBox { # This here is the search box that keeps overlapping the padding from the content div...
width: 100%;
height: 30px;
padding: 10px;
font-size: 20px;
border: 1px rgba(10,10,10, 0.2) solid;
#border: none;
color: rgba(10,10,10, 0.5);
font-family: 'Roboto', 'Tahoma', 'sans-serif';
}
Here is a JS fiddle example to visualize it a little bit better.
You can remove the padding property for #searchBox and explicitly set the padding-top and padding-bottom property to 10px (Which will remove left and right padding).
#searchBox {
width: 100%;
height: 30px;
padding-top: 10px;
padding-bottom: 10px;
font-size: 20px;
border: 1px rgba(10,10,10, 0.2) solid;
color: rgba(10,10,10, 0.5);
font-family: 'Roboto', 'Tahoma', 'sans-serif';
}
https://jsfiddle.net/0e2Ljgr8/1/
An alternative solution would be to reduce the width of #searchBox to 90% width, as shown in this JSFiddle:
https://jsfiddle.net/0e2Ljgr8/3/
i'm trying to customize a text input with css, i want the text inside it to have a margin of 10px to the left so i use:
#text{
text-indent: 10px;
border: 1px solid #333;
outline: none;
padding: 0;
margin: 0;
width: 168px;
height: 20px;
border-radius: 4px;
}
It works in all browsers except for IE10 which seems to ignore the text-indent property, how can i fix it?
<input type="text" id="text" />
you can use padding-left, it works on all browsers:
#text {
padding: 0 0 0 10px;
border: 1px solid #333;
outline: none;
margin: 0;
width: 158px; //decrease width with the same padding vale so that the width would stay the same
height: 20px;
border-radius: 4px;
}
If you want to use a special rule for IE, adding display: inline-block and a line-height, along with the text-indent rule, will fix this as well. This is an old trick for both IE7-9 as well.
input.special {
text-indent: 150px;
display:inline-block;
line-height: 18px;
}
Does the trick.
This is good if you are using liquid or responsive widths and you don't want to have to adjust your input's width on account of the padding.