Menu
Im seeing some strange behavior on my text inputs, they are wrapping on to 2 lines when the text is too long.
They have padding and are 100% width. If I remove either of these 2 CSS rules the text stops wrapping.
I cant put my actual site live and when I try and recreate the issue (eg with jsfiddle) I cant recreate it. Here are screen shots from my iPhone:
What could be causing this? This is not default behavior but the padding and 100% width are required from my design, so I need to find another way of preventing the wrapping.
UPDATE As I said I cant recreate the issue. My attempt is below. Ive used chrome dev tools to copy all the CSS rules, and the html is the same, however the result does not wrap.
http://codepen.io/anon/pen/uHCav
<div class="cont">
<div class="one">
<input placeholder="Middle name" type="text" maxlength="40" name="middle" id="edit-middle" size="60" value="" >
</div>
</div>
.cont {
background: grey;
width: 300px;
margin-left: 100px
}
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
input {
border-left-color: #e35235 !important;
}
input {
border-left-style: solid;
border-left-color: #c9d8e6;
border-left-width: 6px !important;
font-size: 1.2em;
border-top: none !important;
border-bottom: none !important;
border-right: none !important;
}
input {
background: white;
}
input {
padding: 15px 37px 15px 14px;
}
input {
margin: 0;
border: none;
outline: none;
}
input {
width: 100%;
-webkit-appearance: none;
appearance: none;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
background-color: transparent;
}
input {
font-weight: 300;
}
input {
-webkit-text-fill-color: #19465e;
}
input {
color: #19465e;
}
.one {
margin-left: -20px;
margin-right: -20px;
}
561
Start by paring back your document.
Create a new (blank) page with just the basics
<!DOCTYPE html>
<html>
<head>
<title>My page title</title>
</head>
<body>
<div class="cont">
<div class="one">
<input placeholder="Middle name" type="text" maxlength="40" name="middle" id="edit-middle" size="60" value="" >
</div>
</div>
</body>
</html>
Simplify your inputs CSS, just the basics
input {
font-size:1.2em;
background:#DDD;
padding:15px 37px 15px 14px;
border:none;
outline:none;
width:100%;
}
You will notice the input will not wrap and you still have width: 100%; and padding.
Add the rest of your document one bit at a time:
Put the jigsaw back together one piece at a time and clean up your code as you go.
33
You might have a word-break property that your input is inheriting. Try adding word-break: normal; to the input.
94
Replace the width:100% to position:absolute; left:0; right:0; if you need a quick and dirty fix for this. Just ensure that your container div then has the appropriate rules.
As a side note, it's really bad practice to have all those input rules in separate style blocks. Try consolidating those into one, if possible.
27
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
