I got an input form that is supposed to be 100% wide inside my .content class and have 20px padding inside that class and 8px padding to the left inside of that input form. The problem is that the left padding inside the input form overrides the padding inside the .content class to the right.
JS: http://jsfiddle.net/8AsxX/1/
CSS:
.content {
min-height: 100%;
background-color: #000;
padding: 20px;!important
}
input.text.big {
background-color: #ffffff;
height: 30px;
width: 100%;
border: solid 1px #cccccc;
padding-left: 8px;
color: #333;
}
HTML:
<div class="content">
<input class="text big" name="url" type="url" placeholder="Example: http://www.facebook.com/FANPAGE-URL" required="">
</div>
The whole width is calculated like 100% + 8px for the input element, so it is overlapping parent div with padding:20px. You can fix it using calc for the input :
width: calc(100% - 8px);
Example
Box sizing should do the trick.
.content {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
I believe the behaviour is by design. You can compensate for it by increasing the right-padding of the container:
.content {
min-height: 100%;
background-color: #000;
padding: 20px 28px 20px 20px;
}
Related
I'm trying to implement the following design (For now I'm just worried about the text box):
When typing:
Maximum height:
Notice the top and bottom paddings were decreased.
Now, this is what I have so far:
.chat-wrapper {
width: 100%;
}
.message-text {
resize: none;
box-sizing: border-box;
height: auto;
min-height: 41px;
max-height: 97px;
width: 387px;
border: 1px solid #e4e7ec;
border-radius: 20px;
background-color: #f9fafb;
outline: none;
padding: 0 24px 0 24px;
overflow: hidden;
}
textarea {
resize: none;
box-sizing: border-box;
height: auto;
min-height: 41px;
max-height: 97px;
width: 387px;
border: 1px solid #e4e7ec;
border-radius: 20px;
background-color: #f9fafb;
outline: none;
padding: 0 24px 0 24px;
overflow: hidden;
}
<div class="chat-wrapper">
<p>
Using div with contentEditable:
</p>
<div class="message-text" contentEditable></div>
<br/>
<p>
Using regular textarea:
</p>
<textarea></textarea>
</div>
Now for the input text box, I have two solutions:
Using div with contentEditable attribute, it works and it is expandable to a certain height. But the text is not centered vertically (I'm trying to avoid using Flex, just to make sure old browsers are compatible, not very strict about that though)
Using textarea, it is more semantic IMHO, but it doesn't expand automatically.
I want also to detect the keypress event (I don't think it is a problem in both solutions).
Which solution do you think is the web standard? If both are good, how do make the div centers the text, and shrink the paddings when it grows? Or in the case of textarea, how do I make it expand without JS?
Also if you have any better suggestions, let me know.
UPDATE:
I just realized how messy is the option (div with contentEditable):
As you can see, first I can't wrap the text to lines when the text is more than the width.
Second, the text inside the div, is not clean ! Especially when copy-pasting. I need it to be pure text so when I use JS to get the content, I get just the text not the html tags.
I'm assuming that you want your padding preserved and it that case you could do something like this with contenteditable.
Add the wrapper around the .message-text:
<div class="chat-wrapper">
<p>
Using div with contentEditable:
</p>
<div class="message-wrapper">
<div class="message-text" contentEditable></div>
</div>
</div>
Update CSS:
.chat-wrapper {
width: 100%;
}
.message-text {
min-height: 1em; /* prevent height collapsing when there is no text */
max-height: 97px;
width: 100%;
align-content: center;
outline: none;
overflow: hidden;
}
.message-wrapper {
width: 387px;
border: 1px solid #e4e7ec;
border-radius: 20px;
background-color: #f9fafb;
padding: 24px; /* the container will keep the padding untouched */
max-height: 145px; /* added padding to the height of the .message-text */
}
Check the snippet:
.chat-wrapper {
width: 100%;
}
.message-text {
min-height: 1em; /* prevent height collapsing when there is no text */
max-height: 97px;
width: 100%;
align-content: center;
outline: none;
overflow: hidden;
}
.message-wrapper {
width: 387px;
border: 1px solid #e4e7ec;
border-radius: 20px;
background-color: #f9fafb;
padding: 24px; /* the container will keep the padding untouched */
max-height: 145px; /* added padding to the height of the .message-text */
}
textarea {
resize: none;
box-sizing: border-box;
height: auto;
min-height: 41px;
max-height: 97px;
width: 387px;
border: 1px solid #e4e7ec;
border-radius: 20px;
background-color: #f9fafb;
outline: none;
padding: 0 24px 0 24px;
overflow: hidden;
}
<div class="chat-wrapper">
<p>
Using div with contentEditable:
</p>
<div class="message-wrapper">
<div class="message-text" contentEditable></div>
</div>
<br/>
<p>
Using regular textarea:
</p>
<textarea></textarea>
</div>
max-height: 145px for the .message-wrapper is actually the height of content box, and that helps with pushing the .message-text with padding from the top and bottom.
I hope I got the right idea of what you want to achieve,let me know if this helps.
hello guys i have a div which contains a link and a div , i gave a width of 70% to the link and a width of 30% to the div (summing it up to 100%). its working fine in chrome , but its not working in safari ..the width property of the link is not taking any effect in safari.Please help
.rec-p-b {
width: 70%;
background-color: #fff;
border-radius: 0px;
padding: 7px 10px;
}
.rec-p-b1 {
width: 30%;
background-color: #02020294;
border: 1px solid #034039;
border-radius: 0px;
padding: 0px 5px;
}
<div class="recomment_profile_b_view">
<a target="_blank" href="" class="recomment_pro_button rec-p-b">Profile View</a>
<button class="recomment_button rec-p-b1">
<img src="images/recommend.png" alt="recomment">
</button>
</div>
The link tag is an inline element, so you should set it display: block, or inline-block, or float: left to floating it as block element.
You had added the padding beside adding the width, the total size will be equal padding + width. To fix it, you should add box-sizing: border-box; to your css to merge the with as 100% of the size:
.rec-p-b {
float: left;
width: 70%;
background-color: #fff;
border-radius: 0px;
padding: 7px 10px;
box-sizing: border-box;
}
.rec-p-b1 {
float: left;
width: 30%;
background-color: #02020294;
border: 1px solid #034039;
border-radius: 0px;
padding: 0px 5px;
box-sizing: border-box;
}
I think the problem is the padding you add. Try use box-sizing: border-box
* { box-sizing: border-box }
.rec-p-b {
width: 70%;
background-color: #fff;
border-radius: 0px;
padding: 7px 10px;
}
.rec-p-b1 {
width: 30%;
background-color: #02020294;
border: 1px solid #034039;
border-radius: 0px;
padding: 0px 5px;
}
<div class="recomment_profile_b_view">
<a target="_blank" href="" class="recomment_pro_button rec-p-b">Profile View</a>
<button class="recomment_button rec-p-b1">
<img src="images/recommend.png" alt="recomment">
</button>
</div>
Apply display: block to anchor tag
Apply following properties to both(anchor & div):
box-sizing: border-box;
float: left;
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>
I have the fiddle here: https://jsfiddle.net/ufLpqdtj/
My problem is trying to get my search box and button to always sit full width on the page regardless of the device it is running on.
In Javascript I could always make the text box width 100% minus the pixel width of the button (the button is always the same size) but I feel as if im missing something and that it can be done natively in CSS.
Any thoughts or suggestions?
#commonSearchContainer {
display: block;
clear: both;
width: 100%;
position: relative;
}
#commonSearchTerm {
width: 100%;
margin: 25px 0px 0px 0px;
padding: 5px;
border: 1px solid #999999;
height: 35px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.common-search-term-wrapper {
width: 90%;
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.common-search-button {
background-color: #E9700D;
border: 1px solid #ccc;
display: inline-block;
margin: 25px 0px 0px 10px;
width: 80px;
color: #fff;
padding: 7px;
font-style: italic;
cursor: pointer;
}
<div id="searchSection" class="common-search-section">
<div class="common-search-term-wrapper">
<input id="commonSearchTerm" type="text" autocomplete="off" class="common-search-term">
</div>
<div id="commonSearchSubmit" class="common-search-button">
Search
<div style="clear: both;"></div>
</div>
</div>
What I typically do for that sort of layout is make a parent container around the elements (like you have) and give it position: relative and width: 100%.
Then I use position: absolute and display: inline-block on the inner elements. Set the width for the fixed-sized elements and use left or right to position all of the elements.
In your case, it would be something like this: https://jsfiddle.net/ufLpqdtj/1/
Well you shouldn't use the div as a button. There are html elements for that.
If correctly understood what you want to achieve...
form {
width: 100%;
display: inline-flex;
justify-content: center;
}
#commonSearchTerm {
width: 80%;
}
#searchButton {
width: 80px;
border-radius: 0;
background-color: red;
border: none;
padding: 2px;
color: white;
}
<form >
<input id="commonSearchTerm" type="text" autocomplete="off" class="common-search-term">
<input id="searchButton" type="submit">
</form>
This is using flexbox which is is more flexible when creating responsive stuff.
I can't seem to be able to wrap my mind around this one.
It seems that by adding some padding (padding-left: 3px) to my textarea, and it pushes it right out of my div with the border. Adding some padding for text inside the summary box would be useful as it would be more legible to the user.
Here is the result:
This is what it should look like:
Here is the HTML / CSS markup:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.fcontent_text {
font-size: 8.5pt;
text-align: right;
color: rgb(11,63,113);
}
#fcontent_container {
width: 800px;
display: block;
position: relative;
margin: 5px;
}
#fcontent_wrapper {
border: 1px solid rgb(128,128,128);
}
#summary {
width: 100%;
margin: 0;
border: 0;
position: relative;
padding-left: 3px;
height: 50px;
}
</style>
</head>
<body>
<div id="fcontent_container">
<div class="fcontent_text">Summary</div>
<div id="fcontent_wrapper"><textarea class="normal" id="summary"></textarea></div>
</div>
</body>
</html>
Add box-sizing: border-box to #summary so that you can set both width: 100% and left and right padding without the contents spilling over into the container.
box-sizing
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.
For cross-browser compatibility, be sure to include prefixes:
#summary {
width: 100%;
margin: 0;
border: 0;
position: relative;
padding-left: 3px;
height: 50px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Using box-sizing
You can use box-sizing: border-box;
Check this out: http://codepen.io/gopkar/pen/HiEjn
Without box-sizing
Change the width of your textarea from width: 100% to width: 795px;
Have a look at http://codepen.io/gopkar/pen/csxKo
width = <div-width> - <padding-you-have-given>
For some odd reason this solution seems to circumvent everything and works flawlessly:
<div style="width: 800px">
<div style="text-align: right;">Expand</div>
<div style="padding-right: 6px;">
<textarea style="width: 100%; padding: 2px; margin: 0; border : solid 1px #999"></textarea>
</div>
</div>