My React input is set to 'width: 300px' in CSS. But on the screen, the width is '322px'. Here is all of the input CSS:
input {
width: 300px;
padding: 15px 10px;
border: 1px #818181 solid;
border-radius: 12px;
box-shadow: 0px 0px 3px #818181;
}
Here is what the input looks like on the screen:
The 'Submit' button is the right length '300px'. But the input is '322px'. I inspected the input in Chrome and it says the width is set to '300px', but if you hover over the input the actual width is '322px'.
How do I make the input 300px?
padding was extending the width of the input. The solution was to add this to the input CSS:
box-sizing: border-box;
Related
Inside of my textarea, I wish to maintain a padding of 30px from the top.
textarea {
display: block;
width: 300px;
height: 50px;
padding-top: 30px;
}
However, once the text-area is filled with text and the content starts scrolling. The padding is no longer maintained.
http://jsfiddle.net/w47wbq77/
When you run this fiddle, initially you'll notice that the padding from top (inside of the textarea) is maintained. However, the minute you have more than 150 characters, the padding is gone.
Any solution to this ?
I would remove all styling from the text area, and wrap it in a div that looks like a text area
.wrapper {
border: 1px solid #aaa;
padding-top: 30px;
}
textarea { padding: 0 }
You might have to fiddle about with border radius etc, but that would maybe do it
It looks like for the textarea element the padding is added, but the text is still visible in the padding zone.
I haven't really found a good solution so I came up with a workaround using a combination of border and outline to mimic the padding inside the textarea:
textarea {
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-right: 0px solid transparent;
border-left: 0px solid transparent;
outline: 1px solid #dadcde;
}
The top and bottom transparent borders are the actual padding. They add extra space between between the text and the textarea.
The left and right transparent borders prevent border artifacts left due to how the borders are calculated and drawn in the browsers.
The outline is the actual visible border of the textarea and replaces the border property.
Here's a jsFiddle example to show how it works
I think the correct it's usage a "margin", but for you request can be:
http://jsfiddle.net/Lhderpup/
.padTextarea {
background-color: white;
padding-top: 30px;
display: table;
border: 1px solid #CCC;
}
Adding a new DIV. More about, Margin, Padding, etc:
Difference between margin and padding?
I hope I have helped.
Morning,
I have the following code that works in all browsers other than IE. I want a blue border to appear when clicking on input boxes, however did not want to see the elements resizing and positioning. I fixed this by putting a border colour to match the background colour, thus removing the resizing effect. However, on IE, you get ghost borders which seem to be a combination of both the border radius and border colour (background colour). Any ideas of how to fix this without using box shadow?
Screen Shot showing ghost borders:
input,
textarea,
select {
position: relative;
display: block;
border: 3px solid #4f4f4f;
border-radius: 10px;
margin: 6px auto 22px auto;
width: 260px;
font-size: 13px;
text-align: center;
&:focus {
outline: none;
border: 3px solid #4cc7fa;
}
}
Many thanks!
You can do like this to overcome the ghost/resize/re-positioning effect, where you change border-width on focus and compensate its re-positioning with a negative top
body {
background: gray;
}
input,
textarea,
select {
position: relative;
display: block;
border: 0px solid gray;
border-radius: 10px;
margin: 6px auto 22px auto;
width: 260px;
font-size: 13px;
text-align: center;
}
input:focus {
top: -3px;
outline: none;
border: 3px solid #4cc7fa;
}
<input type="text">
I would use the following javascript:
Your-function() {
document.getElementsByTagName('input','textarea','select').classlist.toggle('show')
}
add display:none to input:focus
add the following css
.show
{
display:block;
}
Note: Add onclick="Yourfunction()" to your markup to load the js.
I'm on Chrome (38.0.2125.101) and have something that looks like this:
The css is:
.if-container{
border: 1px solid black;
border-radius: 12px;
width: 400px;
}
.social-row{
background-color: yellow;
padding: 5px 20px 10px 10px;
}
How would I make the css of the embedded element be clipped to the container (or fix it)?
The .social-row <div> is overflowing outside of its parent container. Simply add this to your stylesheet:
.if-container {
overflow: hidden;
}
I have a text-field and background-image style for the field. Below is the style applied :
.leftPaneContent INPUT {
background-color: #FFFFFF;
background-image: url("../images/icon-search-large.png");
background-position: 4px 3px;
background-repeat: no-repeat;
border: 1px solid #D1D1D1;
height: 14px;
margin: 5px 0 5px 3px;
overflow: hidden;
padding: 2px 10px 4px 23px;
width: 85%;
}
The image is displayed properly in FF even when I type a long value in the text-field. Whereas the image is overwritten in IE for a long value.
The problem can be seen in below image in IE
Is there a fix for this?
text-indent didn't fix the problem in IE. Hence I had to move the image out of text-field and wrap that inside a div :)
I am using AjaxControlToolkit's ComboBox control. The DropDown arrow appears quite far from the actual position where it should be. See this image:
How to fix this to make it appear like an ideal DropDownList?
If the image doesn't appear, click this link: http://postimage.org/image/99yqullkb/
**** Edited (CSS Code) ****
.WindowsStyle .ajax__combobox_inputcontainer .ajax__combobox_textboxcontainer input
{
margin: 0;
padding: 0px 0px 1px 0px;
border: solid 1px #7F9DB9;
border-right: 0px none;
font-size: 13px;
height: 18px;
width:200px;
}
.WindowsStyle .ajax__combobox_inputcontainer .ajax__combobox_buttoncontainer button
{
padding: 0px 0px 10px 0px;
height: 21px;
width: 21px;
}
.WindowsStyle .ajax__combobox_itemlist
{
border-color: #7F9DB9;
}
Looks like a CSS styles side-effect. Check calculated styles for arrow button and it's container with some tool like FireBug or Developer Tools.
IAE try to apply the style rule below, maybe it fix the issue:
table.ajax__combobox_inputcontainer td
{
padding: 0 !important;
text-align: left !important;
}
table.ajax__combobox_inputcontainer td.ajax__combobox_buttoncontainer button
{
margin-left: 0 !important;
}
If you are using width property like width="20%" then this problem occurs. Avoid "%" in width property and try with exact width in pixels like width="200px".