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;
}
You might have a word-break property that your input is inheriting. Try adding word-break: normal; to the input.
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:
Javascript - check that there is no problem with input
The rest of your CSS - check that there is no problem with input
Any remaining styles for your input - check that there is no problem with input
Any missing HTML - check that there is no problem with input
Put the jigsaw back together one piece at a time and clean up your code as you go.
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.
Usually this kind of issues are related to the box-sizing context. You can try to define a border context for your input to ignore the padding calculation:
input {
box-sizing: border-box;
}
Related
So, to better explain, I am attaching a simple image of what I am trying to achieve.
There is a button, and three contents (two visible and one hidden located in between as shown above).
When the button is clicked, I want to show the hidden content which is located in between to contents.
Is it possible to achieve this with CSS alone?
For example, I can have the hidden content with display:none; then force it visible somehow?
I am not sure what the most efficient way to achieve this.
Any suggestions will be appreciated.
Thanks!
If you want to achieve this using CSS only then there is a way using check boxes or Radio buttons instead of HMTL button tag.
here is a demo https://jsfiddle.net/nileshmahaja/yt76h26n/
HTML
<input type="checkbox" class="check"/>
<div class="box one">1</div>
<div class="box two">2</div>
<div class="box three">3</div>
.box{
height:50px;
width:50px;
background: gray;
margin-bottom:20px
}
.two{
display:none;
}
.check:checked ~ .two {
display:block
}
And you can style checkbox or Radio button as per your convenience.
Do it purely in css solution here:
How to change an image on click using CSS alone?
However, with jquery it can easily be done in 3 seconds with only a couple of lines if you're not opposed to it as shown below!
$("#buttonsid button").click(function(){
$("#idofhiddencontent").toggle();
});
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.btn{
display: inline-block;
padding: 15px 45px;
border: 2px solid #000;
color: #000;
text-decoration: none;
}
div{
width: 100px;
height: 100px;
border: 2px solid #000;
margin: 25px auto;
}
.block-hidden{
display: none;
border: 2px solid #f00;
color: #f00;
}
.btn:focus ~ .block-hidden{
display: block;
}
Button Click
<div class="block">Block</div>
<div class="block block-hidden">Block Hidden</div>
<div class="block">Block</div>
.visible_content:hover > .hidden_content {display:block;}
when you hover on .visible_content , .hidden_content will be shown.
but with click , I don't think that there be any way to do this via css.
but in jquery , it is simple:
$(".visible_content").click(function(){
$(".hidden_content").fadeIn();
});
I'm trying to override the default form styling for two form elements so that the text box and button are both the same height and are side by side so that it looks like they are one element.
In some browsers it looks fine but in some they are a pixel or two off vertically.
Here is a jsfiddle demo. Opera and Firefox on OS X are giving me issues.
http://jsfiddle.net/QS3ec/6/
*, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
input[type="text"] {
background-color: #fafafa;
padding: 7px;
font-family: helvetica, arial, sans-serif;
font-size: 1.2em;
margin-bottom: 20px;
display: block;
border: solid 2px #bbb;
color: #6f6f6f;
}
input[type="submit"] {
background-color: #fafafa;
font-family: helvetica, arial, sans-serif;
font-size: 1.0em;
font-weight:bold;
padding: 7px;
color: #6f6f6f;
}
input[type="submit"]:hover {
background-color: #ff379f;
color: #fafafa;
}
#subscription-email-text-field {
display:inline-block;
font-size:0.9em;
font-weight:400;
border:0;
width:250px;
height:32px;
margin:0;
}
#subscribe-button {
display:inline-block;
border-width:0px 0px 0px 1px;
margin:0;
height:32px;
}
<div style="background-color:black; padding:20px;">
<form>
<input type="text" id="subscription-email-text-field" name="email" placeholder="Enter Email for Newsletter"><!--
--><input type="submit" id="subscribe-button" value="subscribe">
</form>
</div>
One simple fix is to modify the following CSS rule:
#subscription-email-text-field {
vertical-align: top;
display:inline-block;
font-size:0.9em;
font-weight:400;
border:0;
width:250px;
height:32px;
margin:0;
}
Adding vertical-align: top takes care of the baseline alignment.
See demo at: http://jsfiddle.net/audetwebdesign/EmAnr/
Footnote:
To add the left border on the button element, remember to add the border styling,
which can be done as follows:
#subscribe-button {
display:inline-block;
border: 1px solid black;
border-width:0px 0px 0px 1px;
margin:0;
height:32px;
}
All I've done is increased the height of the submit box:
height: 46px;
http://jsfiddle.net/QS3ec/9/
This is really tough. I've Tested in Safari, Firefox, Opera and Chrome on Mountain Lion so this may not be the right solution.
I believe the problem is that the inputs are replacement elements that have been rendered by the browser using non-CSS mechanisms so styling may not apply as you would expect. I had a similar question in the past that shed some light on this sort of thing. There always seems to be strange behavior when trying to style old UI components, buttons, inputs, etc.
Display Table Cell inconsistency.
Problem is the padding you have given to the text box. On certain
browsers padding has only horizontal effect on input type = button or submit.
// fix
add 'box-sizing: content-box' rule to the input[type='submit'] { } closure.
This will do on certain browsers as only few have implemented it.
As a workaround set height of the submit button to
"height of text-box + ( 2 * padding given to text-box')
inorder to account for the missing vertical padding.
This is the best way to achieve your goal (cross-browser).
eg: height of your text-box = 32px. so height of the button = 32 + 2 * 7 = 46px
I need an inline equal height search form that looks the same in all browsers.
http://codepen.io/mdmoura/pen/BcIFm
At the moment I have the following HTML markup:
<form method="get" action="#">
<input type="search"/><input type="submit" value="Search"/>
</form>
And the following CSS (LESS):
form {
box-sizing: border-box;
white-space: nowrap;
padding: 20px 116px 20px 0;
border: 1px solid red;
width: 40%;
input {
display: inline-block;
box-sizing: border-box;
&[type="search"] {
background-color: aqua;
border: 1px solid aqua;
font-size: 24px;
padding: 8px;
width: 100%;
}
&[type="submit"] {
background-color: #404040;
border: 1px solid #404040;
color: white;
font-size: 24px;
padding: 8px;
width: 100px;
}
&:-moz-focus-inner {
border: 0;
padding: 0;
}
} // input
} // form
THE PROBLEMS:
FIREFOX: The button seems to have one extra pixel on top and bottom;
IE 9, IE10: There is a padding on the right. No idea why ...
CHROME: The same as in IE 10 - There is a padding on the right.
SAFARI: Even worse. The Submit Input is higher then the Search Input.
And there is a right padding just as in IE 10 and Chrome.
All solved when using Normalize.css
Using overflow: hidden on the form also seems to better align the borders.
Could someone, please, help me out in improving this form and solving the problems?
Thank You,
Miguel
The padding issues you are having all stem from the way you have constructed the form div with a large right padding.
One idea would be to get rid of that right padding, and change the 'search' and 'submit' inputs so their widths equal 100% instead of both being 100%. If they were 80% and 20% for example you shouldnt need the large right padding on form. Then you can just set a margin around them or something to add space between them and the red line.
I'm using <button> to make a post request in a form. I also styled a a.button exactly like the <button> (I need the a.button to make some JS stuff).
The button has some padding, a fixed height. When I do specify the width of the button / a they both look the same. But when I add width to the <button> it ignores the padding.
I'm having this problem in Chrome, Firefox and Opera, so I guess it's not a rendering fault. Also same issue with <input type="submit" />
Here is the basic CSS:
.button, button {
margin: 0;
display: inline-block;
border: 0;
text-decoration: none;
cursor: pointer;
color: black;
background: #ddd;
font: 12px Verdana;
padding: 40px; /* 40px, so you can see that it won't be rendered with width */
text-align: center;
}
The HTML:
Some text
<button>Some text</button>
<!-- Works fine till here -->
<br /><br />
Some text
<button style="width:200px">Some text</button>
Fiddle: http://jsfiddle.net/9dtnz/
Any suggestions why the browsers are ignoring the padding? (top and bottom when using height / left and right when using width).
Very weird, I've seen my Chrome has a box-sizing: border-box; rule for input elements, so padding is included in width...
So to avoid that just specify box-sizing: content-box; (some prefix can be necessary).
It looks fine to me, so it might be a style sheet conflict issue. Try using !important to override whatever it may be and that could solve your problem.
.button, button {
margin: 0;
display: inline-block;
border: 0;
text-decoration: none;
cursor: pointer;
color: black;
background: #ddd;
font: 12px Verdana;
padding: 40px!important; /* 40px, so you can see that it won't be rendered with width */
text-align: center;
}
Hope this helps.
Michael.
Greetings. I'm having troubles with the following legacy code. It's fine in everything except IE7, where the submit button disappears. Space is still left for it on the page, but it doesn't show. I've tried various ways of forcing hasLayout, but without success. Any suggestions?
XHTML (XHTML 1.0 Strict DOCTYPE):
<div id="headerFunctionality" class="clearfix">
<div id="headerSearch" class="clearfix">
<form action="http://foo.com" method="GET">
<label for="q">Search</label>
<input id="q" name="q" type="text" class="text" />
<input type="submit" id="btn_search" value="Search">
</form>
</div>
</div>
CSS:
#headerFunctionality {
float: right;
display: inline;
margin: 24px 14px 25px 0;
}
#headerSearch{
float: left;
margin-left: 20px;
width: auto;
}
#headerSearch label{
position: absolute;
top: -5em;
color: #FFF;
}
#headerSearch input.text{
width: 133px;
height: 18px;
border: 1px solid #999;
font-size: 0.69em;
padding: 2px 3px 0;
margin: 0 6px 0 0;
float: left;
}
/* Replace search button with image*/
input#btn_search {
width: 65px;
height: 20px;
padding: 20px 0 0 0;
margin: 1px 0 0 0;
border: 0;
background: transparent url(../images/btn.search.gif) no-repeat center top;
overflow: hidden;
cursor: pointer; /* hand-shaped cursor */
cursor: hand; /* for IE 5.x */
}
form>input#btn_search { /* For non-IE browsers*/
height: 0px;
}
input#btn_search:focus, input#btn_search:hover {
background: transparent url(../images/btn.search.over.gif) no-repeat center top;
}
have you made sure that display:block has been added to the css on the input? That oughta do the trick.
This sounds like a text-indent / image-to-replace-button issue in IE6.0 and 7.0. This solution has worked for me a few times.
Make a separate stylesheet for these browser versions and put this code in your header:
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->
In the CSS file, try something like this (you can change this to input#btn_search or whatever you're targeting specifically)
#btn_search {
width: 85px;
height: 20px;
padding: 20px 0 0 0;
margin: 1px 0 0 0;
border: 0;
background: transparent url(../images/btn.search.gif) no-repeat center top;
cursor: pointer; /* hand-shaped cursor */
cursor: hand; /* for IE 5.x */
font-size: 0;
color: #fff;
text-align: right;
text-indent: 0;
}
"color" should be the same colour as your background.
"width" should be like 20-30 pixels MORE than the width of your image.
More information and help can be found here: http://mydrupalblog.lhmdesign.com/theming-search-submit-button-css-cross-browser-compatible-solution
There are two things I can see from the code that could cause this:
1 - the image btn.search.gif is either completely transparent, the colour of the background or not found. The button has no background colour and no border, so would not appear if not for the image/text
2 - the button visibility is set to none, which leaves space on the page but doesn't render the button. Can you look at the styles in firebug?
I finally sorted this by removing the:
form>input#btn_search { /* For non-IE browsers*/
height: 0px;
}
I had always included this with CSS image replacements after reading it somewhere ages ago, but leaving it out doesn't seem to have affected any other browser and has fixed the problem in IE7.
if you add a name attribute, does it work?
The problem likely comes from the Guillotine Bug. It's a bug in IE6 and IE7 that occurs when certain mixtures of :hover, float, and layout are present (see link for details). I believe that inserting this:
<div class="clear"><!-- --></div>
right before </form> and then applying the following CSS to it:
.clear {clear:both;}
would fix it.