I have the following HTML code:
<textarea type="text" class="dlk_q" rows="2" cols="98%" name="q[]">
in a page that has other stylesheets but I added this CSS right before the textarea in my HTML:
textarea, .dlk_q {
width: 98%;
height: 50px !important;
}
however the height of the textarea appears to be much bigger than 50 (ie the height is ignored)
What can I do about this?
Option height will be ignored if there is also min-height that has bigger value, because this is was it was designed for.
Docs: https://www.w3schools.com/cssref/pr_dim_min-height.asp
Based on demo that you provided in comments, you have this block in CSS:
textarea {
font-size: 12px;
line-height: 21px;
color: #444;
border: 1px solid #e1e1e1;
width: 100%;
max-width: 100%;
height: 168px;
min-height: 168px; // HERE
padding: 6px 9px;
}
Like you see, there is min-height: 168px;.
All you have to do is to remove this, or overwrite it if for some reason you cannot do this.
textarea, .dlk_q {
width: 98%;
height: 50px !important;
min-height: 0 !important; // ADD THIS
}
Since there was a min-heigth setting I've reset it like this:
textarea {
min-height:initial; /* resets the value set by theme */
}
Related
Is it possible to automatically adjust the height to the content's height using only css without using javascript?
For Example, When the height of the is 200px, when the text inside is written only as much as 100px in height, I hope that there will be no blank space.
I want the height of the text inside the to affect the height of the itself. There is way to use javascript all over the internet. But I want to implement it using only css and html. I need help!
Here is my code.
.code-wrap {
margin-top: 8px;
border-radius: 8px;
background: #1e1e1e;
max-height: 400px;
}
.code-title {
border-radius: 8px 8px 0 0;
background: #242E64;
padding: 21px 24px;
}
.area-wrap {
padding: 21px 24px;
}
textarea {
border: 0;
resize: none;
width: 100%;
height: 300px;
outline: none;
font-size: 20px;
font-weight: 800;
color: #fff;
background: none;
font-family: 'D2Coding';
}
<div class="code-wrap">
<div class="code-title"><p>Result</p></div>
<div class="area-wrap">
<textarea
rows="15"
cols="50"
name="quiz-editor"
id="mainResultArea"
class="ed-result"
readOnly
>
</textarea>
</div>
</div>
Unfortunately, to the best of my knowledge, there is no great way of doing this using raw CSS or HTML. However, you can stray away from the textarea element and use the contentEditable attribute on a div or text element.
Check out this basic example & write in this sample text box:
div {
border: solid 1px;
padding: 5px;
width: 300px;
min-height: 50px;
overflow: auto;
}
<div contentEditable></div>
I'm pretty newbie with HTML and CSS. So, I've got a problem with the width of 100%. It appears to go beyond the borders of the browser. Please take a look at the example below! Should I decrease the width per cents a little or is there some flaws in my code that could cause this?
I found some other posts here about the width 100%, but neither of them didn't really help me. Here's the example I made: http://jsfiddle.net/gj53jbz9/
body{
font-size: 15px;
margin: 0px;
background-color: lightgrey; }
#header{
padding: 30px;
width: 100%;
height: 250px;
background-color: grey; }
#name{
padding: 5px;
font-size: 25px;
float: left; }
#navbar{
float: right;
text-align: right; }
#navbar a{
background-color: black;
display: inline-block;
width: 120px;
text-align: center;
padding: 10px 0px;
text-decoration: none;
color: lightgrey; }
#title{
clear: both;
text-align: center;
padding-top: 100px;
font-size: 45px; }
#content{
text-align: center;
width: 80%;
margin: 0px auto; }
<div id=header>
<div id=name>Name</div>
<div id=navbar>
Link1
Link2
</div>
<div id=title>Insert title here</div>
</div>
<div id=content>
<h3>Age of aggression</h3>
<p>We drink to our youth, to days come and gone. For the age of aggression is just about done. We'll drive out the Stormcloaks and restore what we own. With our blood and our steel we will take back our home.</p>
<p>Down with Ulfric! The killer of kings! On the day of your death we will drink and we'll sing. We're the children of Skyrim, and we fight all our lives. And when Sovngarde beckons, every one of us dies! But this land is ours and we'll see it wiped clean. Of the scourge that has sullied our hopes and our dreams!</p>
</div>
Thats because you have both width and padding set to one element. And by default padding is added on top of width. (Making it 100% + 2*30px of width).
#header{
padding: 30px;
width: 100%;
}
Either remove padding and add it to an inner element with no width set, or use:
box-sizing: border-box;
Which makes the width calculation include padding. :)
https://www.w3schools.com/cssref/css3_pr_box-sizing.asp
Take a look at this part of your code:
#header{
padding: 30px;
width: 100%;
height: 250px;
background-color: grey; }
This is telling the browser that the width of #header should be 100% with a padding of 30px. Since padding is not counted into the width, the actual width ends up to be 100% + 60px. So, in order to make sure this fits into the page, you need to subtract 60px (30px to the left + 30px to the right) from the 100% width and it will fit into the browser. Luckily you are easily able to do this with CSS:
#header{
padding: 30px;
width: calc(100% - 60px);
height: 250px;
background-color: grey; }
It seems to work if you remove margin: 0px; from the properties inside body {}
I don't know why it has this behaviour
Every HTML element has some default values. Please check here:
https://www.w3schools.com/cssref/css_default_values.asp
You can also try to set all elements margin and padding as 0. Just like that:
*{margin: 0; padding: 0}
By default, HTML elements calculate their sizes based on the content only, so excluding the padding, borders and margins. To change that behavior, use:
box-sizing: border-box;
This makes the calculation include the padding and borders. You can add it to any element you want, but it is a common practice to add it to all elements:
* {
box-sizing: border-box;
}
Don't give padding from left and right to your header div.
Add some margin to name and navbar div
just like this
#header {
padding: 30px 0px;
width: 100%;
height: 250px;
background-color: grey;
}
#name {
padding: 5px;
font-size: 25px;
float: left;
margin-left: 40px;
}
#navbar {
float: right;
text-align: right;
margin-right: 40px;
}
It is because padding is being summed to width 100%.
Try to use box-sizing, like that:
#header{
padding: 30px;
width: 100%;
height: 250px;
background-color: grey;
box-sizing: border-box;
}
Header.Width=100% and Header.Padding=30px are causing the problem.
You are telling the browser that the header will use the 100% of the width, PLUS a pad of 30px. So the width is 100%+30px of the space created by the padding.
Try moving the width to the body property so all the page will use the 100% of the available space. That should fix it.
left: 0px;
right: 0px;
width: auto;
position: relative;
I made an input form that has horrible cross browser compatibility. I used browser specific CSS hacks to fix most of my issues but that got really complicated really fast and I don't want to keep going down that path.
The form is an 800px wide text input (785px width + 5px border + 10px padding) and 100px wide submit button, all inside a 900px wide div keeping them together.
The problem is that the text input width varies by 1px from browser to browser which causes the input button, which is located on the right of the text input, to get pushed down by the extra pixel. I fixed this for most browsers with browser specific hacks by changing the width from 785px to 784px but was wondering if there's something else I'm missing that's causing this.
Here is a JSFiddle.
CSS:
div.formdivholder {
width: 100%;
height: 70px;
padding-top: 20px;
}
div.formdiv {
width: 900px;
height: 70px;
margin: 0 auto;
}
input.text {
z-index: 20;
height: 38px;
width: 785px;
float: left;
padding-left: 10px;
border: solid;
border-width: 5px;
border-color: #3374DC;
border-right: 0px;
background-color: #F0F4FA;;
border-top-left-radius: 7px;
border-bottom-left-radius: 7px;
box-shadow: inset 0px 0px 8px 0px rgba(0,0,0,0.3);
}
input.submit {
z-index: 1;
height: 50px;
width: 100px;
float: right;
color: #F0F4FA;
font-weight: bold;
background-color: #3374DC;
border-top-right-radius: 7px;
border-bottom-right-radius: 7px;
border-width: 0px;
}
HTML
<div class="formdivholder">
<div class="formdiv">
<form class="search" role="search" method="get" action="/searchresults.php">
<input type="text" name="input" class="text" placeholder="Search for">
<input type="submit" class="submit" value="Search">
</form>
</div>
</div>
Just use CSS box-sizing property, it is supported by all browsers and IE>=9. You would need to change the following (only):
input.text {
height: 50px;
width: 800px; /* OR even this: width: calc(100% - 100px) */
box-sizing: border-box;
....
}
Take a look in Fiddle.
Definition of the property value border-box:
The width and height properties include the padding and border, but
not the margin. This is the box model used by Internet Explorer when
the document is in Quirks mode. Note: Padding & border will be inside
of the box e.g. IF .box {width: 350px}; THEN you apply {border: 10px
solid black;} RESULT {rendered in the browser} .box {width: 350px;}
You can see these days people drop support to IE8, so at the start of CSS they simply put:
*, *:before, *:after {
box-sizing: border-box;
}
(and make their life easier).
try using % instead of pixel, should do the trick, later on you might have to do some responsive so the % will save you time on that one also
I have a similar HTML structure like this Fiddle: http://jsfiddle.net/hAMmK/3/
The HTML structure:
<span class="all">
<span class="group-1">
<span class="a">A</span>
<span class="b"><input type="text" placeholder="b" /></span>
</span>
<span class="group-2">
<span class="c">C</span>
<span class="d">D</span>
</span> </span>
The current result with the css is
but my desired result would be
This result should be responsive, I mean, the width for the input text should be the maximum with the correct current width of the device/browser. Furthermore, I need compatibility with the most common browsers (as desktop as mobile/tablet).
What is the best way to solve this?
Use CSS3 Calc: Running Demo
input[type="text"]{
width: calc(100% - 100px);
}
Not (yet) supported everywhere, though, and you need to know the width to subtract.
If your buttons are static, ie you know the width/number of the left/right span's then you could use floats. It's gives a smoother responsive feel, but uses negitive margins which sometimes aren't that nice.
I changed the CSS to:
.group-1 {
width: 20px;
float: left;
margin-top: 6px;
}
.group-2 {
margin-left: 30px;
margin-right: 70px;
}
.group-3 {
width: 60px;
float: right;
margin-top: -20px;
}
Have a look at:
http://jsfiddle.net/hAMmK/16/
Like I said, it will only work if you can fix your left/right width's but seems to give a clean responsive feel.
As an alternative to css3 style calc if you need to support other browsers here is another solution.
If A is a label and C and D are buttons (as I guess), you can use width 100% in the input field and float it left, then you have to display block its parent (if it is an span as in that case) and add a margin-right the sime size than your buttons. The margin will collapse because the content is floated and the buttons will appear at the right side of your input field.
You could then do the same for the label if you know its size or you can better use a table to allow changing the label text (maybe for internationalization).
You can see it applied to your example:
http://jsfiddle.net/cTd2e/
/*Styles for position here*/
.all{
line-height: 22px;
}
table {
width: 100%;
float: left;
}
.second-cell input{
width: 100%;
float: left;
}
.b {
display: block;
margin-right: 130px;
}
td.first-cell {
white-space: nowrap;
}
td.second-cell {
width: 100%;
}
.group-2{
vertical-align: middle;
margin-left: 10px;
}
Also if the buttons contain text then you can use a table inside a table to have the input field 100% and the rest auto.
I am not aware if there is a more modern compatible way of doing that, it would be great!
Change the widths to use a percentage.
.a {
padding: 3px 7px;
background-color: LightBlue;
border: 2px solid CornflowerBlue;
border-radius: 5px;
color: SteelBlue;
width: 10%;
}
.c {
padding: 3px 7px;
background-color: Moccasin;
border: 2px solid BurlyWood;
border-radius: 5px;
color: DarkKhaki;
width: 10%;
}
.d {
padding: 3px 7px;
background-color: LightSalmon;
border: 2px solid Brown;
border-radius: 5px;
color: IndianRed;
width: 10%;
}
input{
width: 70%;
}
JS Fiddle: http://jsfiddle.net/hAMmK/4/
So I was trying to align a textarea inside of a div using the padding property:
#content {
background: #FFFFFF;
width: 80%;
height: 800px;
margin: 4em auto;
padding: 20px;
border-radius: 2px;
}
textarea {
width: 100%;
height: 790px;
}
But it appears that the sides are uneven even so:
I was wondering how I could fix this so the sides are even?
BONUS QUESTION: How can I make it so the text box is not scrollable if the text amount goes over the box size?
On the textarea set the border to 'none'. Edit - set padding to 0
textarea {
border: none; /*optional */
padding: 0;
height: 790px;
width: 100%;
}
to remove the scrollbars add overflow: hidden
textarea {
border: none;
height: 790px;
overflow: hidden;
width: 100%;
}
Make sure you always reset before adding ANY styles. Each browser comes with it's own set of 'defaults', so it can make your site vary from browser to browser (and add unwanted spacing, such as your issue).
Check this link http://meyerweb.com/eric/tools/css/reset/
You can put that at the top of your main style sheet or as the first external to load.