I'm trying to get an <input /> to line up correctly next to a <button> in IE7.
Ideally, the rendered HTML should appear as: (or similar)
but instead it's appearing as
This is an example of the HTML/CSS I'm using: http://jsfiddle.net/wLpQg/1/
Note how the textbox appears on a different line to the button. This works correctly in all browsers except IE7 (and maybe IE6, but I haven't checked that!)
How can I get this to appear on the same line as the button, preferably as similarly to the first image as possible?
float in the input box to the left, and float button to the right. Then add margins until they're lined up correctly.
If you want the <input> and <button> to always exist on the line below, the easiest way to do this is wrap them in a container, for example:
<div class="search">
<input type="text" watermarktext="Enter share class name or partial name" value="" name="Search" id="Search" class="search-input watermarkOn">
<button id="btnViewResults" type="submit" class="linkButton medium submit"><span><span id="resultCount">View 27090 matches</span></span>
</button>
</div>
with the associated CSS:
.search {
position:relative;
padding:16px 0;
}
.search button {
position:absolute;
right:12px;
}
I ended up commenting out a lot of the CSS in your example, since the container now takes care of the padding and positioning. I forked your fiddle into a new demo to demonstrate. This is working for me in IE6/IE7/IE8 and Chrome 14.
Related
I am trying to make an input field with a (right-aligned) label in semantic ui. The documentation shows an example of a cornered label that works fine (http://semantic-ui.com/elements/input.html) , but when I try to use a plain label it breaks the layout of the input field
I made a fiddle that explains my attempt (http://jsfiddle.net/26fqd39d/ ).
The following code works fine (taken from the documentation): It shows an input field with a label on the right which fits in the layout of the input field.
<div class="ui labeled input">
<input type="text" value="#"></input>
<div class="ui corner label"><i class="copy icon"></i></div>
</div>
I don't want to use a cornered label though, since there is not enough room for my scenario (I would like to display some units in this label, like km, mi, etc).
I change it to use a regular label:
<div class="ui labeled input">
<input type="text" value="#"></input>
<div class="ui label"><i class="copy icon"></i></div>
</div>
As you can see in the fiddle, the label breaks on the new line.
How can I create an input field with a right-aligned label using semantic-ui ? An explanation of why this doesn't work will also help me understand how to build layouts using semantic-ui.
Thanks.
I played around a bit and found a work-around that uses right (or left) aligned icons instead of labels. Hope this helps.
<div class="ui right icon input">
<input type="text" placeholder="Copy copy copy">
<div class="icon"><i class="copy icon"></i></div>
</div>
http://jsfiddle.net/12pjjrp7/4/
I'm not quite familiar with Semantic but you could keep your corner class and override the right borders like so:
.ui.action.input > .button {
border-top-right-radius: 0px !important;
border-bottom-right-radius: 0px !important;
}
Use !important as it should be overriding the current style and don't forget to be specific with your class selector (so it only affects the buttons you want to). or use a style attribute.
I'm creating a form and ran into a padding problem with fieldsets. While all looks ok in Opera, FF and Chrome, both IE 7 and 8 simply throw away any top padding inside the fieldset. The following code correctly adds padding to the left, bottom and right of the fielset (although the latter causes this known problem), but positions the first line of content directly underneath the legend with no spacing:
<form>
<fieldset style="padding:30px;">
<legend>Legend</legend>
<label for="input">Label</label>
<input type="text" id="input" />
</fieldset>
</form>
However, this answer to another question pointed me towards the legend tag and indeed, if I leave it out, everything is fine.
So my question is:
Is there a work-around to have both the legend tag and the padding? My quick top-of-the hat attempt (margin-top on the first element) does not have an effect.
Or do I have to forego the (semantically correct) legend tag and replace it with something (more arbitrary) like a heading? What concequences does this have for screen-readers?
Would it work to remove all the padding from the fieldset and instead create a div inside the fieldset that adds the padding?
<form>
<fieldset>
<legend>Legend</legend>
<div style="padding:30px;">
<label for="input">Label</label>
<input type="text" id="input" />
</div>
</fieldset>
</form>
I want a <p> tag (or a label might be correct actually) to appear behind an input field so that I can show the active caret on the input field and then hide the absolutely positioned <p> tag when the user starts to typing.
you can see what the problem is here: http://jsfiddle.net/captainill/BG7Kx/
In the jsfiddle I've given the input a value to illustrate the problem although in the solution there'd be no default text in the input.
relevant html:
<form name="tagset-form" id="tagset-form" action="" method="get">
<p class="form-p-text">Add Set Name</p>
<input id="tagset-name" class="text-input" type="text" value="some text that I would like to be above the <p> tag">
<input id="tagsubmit" type="submit" value="" style="display:none;">
</form>
css:
input#tagset-name{
width:100%;
height:14px;
padding:8px;
line-height:15px;
color:black;
z-index: 2;
}
input:focus#tagset-name{
color:white;
}
.form-p-text{
z-index: 1;
position:absolute;
top:8px;
left:180px;
color:blue;
font-weight:bold
}
EDIT:
this jquery plugin does exactly what I want:
http://o2v.net/blog/jquery-formlabels-plugin
It does so by creating a label, which when clicked, calls focus() on the input. It looks sharp too.
You could try the HTML5 placeholder attribute for <input>s, depending on how supported you want this to be.
http://diveintohtml5.ep.io/forms.html
Example:
<input type="text" placeholder="John Smith" name="full_name" />
Otherwise you can take a look at the onblur and onfocus events for <input>.
Problem explanation
The thing is that you set color:white on the input field when it has focus. That's why caret (as well as content value text) disappears when in focus. It's still there though. It's just not visible. If you'd type some text in and then double click input you'd see that edited text exists (selecting it will make it visible)
A possible non-HTML5 scripted approach
You probably want to set some init text and then reset it when input has focus. And afterwards to stay as user set it. This very simple jsFiddle shows how. It uses jQuery to acomplish desired behaviour. You could as well adopt it to set init text back to what it was when input stays empty. But my simple example doesn't do that. It's rather trivial to do that as well by binding blur event to input as well, that would check value and when empty remove the CSS class and set init text back in.
It does use some scripting though. I don't think this can be done purely by HTML+CSS. It would when input was a container element so you could use pseudo elements ::before or ::after.
<td>
<form name="search_form" action="" method="POST">
<input type="text" name="search_text">
<input type="submit" name="search_bt" value="Go">
</form>
</td>
now when ever we use this code it adds an extra line after it ends.... see the image below
see the red boxed area... there is nothing there... nothing but that space is added for no reason by the FORM
BUT... BUT.. if i use the code like this
<form name="search_form" action="" method="POST">
<td>
<input type="text" name="search_text">
<input type="submit" name="search_bt" value="Go">
</td>
</form>
everything is fine... the space disappears..
WHY SIRE !!!! WHYYYYYYYYYYYYYYYYYY
thats just the way most browsers treat the form element
use css padding/spacing to tell it that it shouldnt added extra space for form elements.
in your css file just add
form {
margin: 0;
padding: 0;
}
and you'll be fine.
This page has a good write-up on what's occurring.
http://www.cs.tut.fi/~jkorpela/forms/extraspace.html
Browsers typically leave some empty
space, roughly corresponding to one
empty line, after a form. The problem
discussed here is often classified as
“extra vertical space after a submit
button”, but this is not the correct
diagnosis. Rather, it’s about spacing
below the entire form, but it is
observed especially often when a form
contains just an input button (often
inside a table cell.
Oddly enough, form elements have CSS styling attached to them. Margins, padding, etc. That's why.
I have style my radio buttons with a background image, basically what i have done is
<input type="radio" id="btn" name="btn" style="opacity: 0;filter: alpha(opacity = 0);position:absolute;">
<label for="btn">My Text</label> <!--- added styles to it --->
with this i get output something like this
Image1 that shows how the display should be: http://i39.tinypic.com/2vcyidg.png
It works fine in every browser except ie8, in ie8 it shows a dotted box around hidden buttons when a label is selected
Image2 shows the problems in ie8: http://i39.tinypic.com/j8l635.png
I cant choose the property display:none; as in IE browsers it disables the radio buttons so i have to hide it.
How can i hide that dotted box in ie8?
Thank You.
Regards,
Shishant Todi.
Is there a reason why you're not using <input type="hidden" />?
if you can use javascript:
<input onfocus="this.blur()" type="radio" id="btn" name="btn" style="opacity: 0;filter: alpha(opacity = 0);position:absolute;" />
I had a similar issue where my radio buttons and checkboxes were showing borders, but only in IE. In my case, this was a css issue where these inputs were being treated the same as text inputs. I simply defined a new class in the stylesheet and specified a border of zero px.