I've got the following...
<td class="lst-td" width="100%" style="">
<div style="position:relative;zoom:1">
<input autocomplete="off" class="lst" type="text" name="q" maxlength="2048" value="" title="Search" spellcheck="false" tabindex="1">
<span id="tsf-oq" style="display:none">
</span>
</div>
</td>
<select id="menu" class="InPage " tabindex="2" style="position: relative; float: right;">
<option value=9999>"a value</option>
</select>
Currently the select just displays next to the td which is a search bar rather than letting the search bar expand across the page and simply displaying within it (to the right hand side) how do I fix this?
Unsure of exactly what you are looking for but from what I can gleen you want a input with a select on top of it.
To do this set a div to position:relative and put the select and input inside it. Then set the input to width:100% and the select to position:absolute and top:0px; right:0px;
see http://jsfiddle.net/L593G/7/ for an example of this working.
From here you can use top and right to control the positioning of the select and the width of the div to control the width of the whole control.
This technique is called Relatively Absolute positioning and more information can be found here http://css-tricks.com/absolute-positioning-inside-relative-positioning/
Hope this helps :-)
float:left on both the <div> and <select>
See my example on jsfiddle - http://jsfiddle.net/Gpy9Y/
Oh and why are you using tables? NO NO NO NO!!!
Update (#15:28 GMT):
div{float:left; width:100%;}
div input{width:100%;}
select{position:relative; top:-20px; left:4px;}
You should use #Michael Allen example. But if you must stick with your current mark-up, this will work. http://jsfiddle.net/Gpy9Y/5/
Related
I have the following markup inside razor view, at the top navigation bar of my web site:-
<section id="login" class="navbar-search pull-right">
#if (Request.IsAuthenticated) { <span class="username customTopNavText " style=" display:block; ">
[ Logout ]
<i class="icon-user"></i> <strong > #User.Identity.Name.Substring(User.Identity.Name.IndexOf("\\") + 1) </strong></span>
<div class="customTopNavText" id="currentdate"></div>
<div class="customTopNavText" id="currenttime" ></div>
<form class="customSearch"method="GET" action="#Url.Action("Search", "Home")">
<input name="exactmatch" type="hidden" value="true"> <b>Search by Tag </b> <input class="push-up-button searchmargin" placeholder="Search by tag.." name="searchTerm2" data-autocomplete-source= "#Url.Action("AutoComplete", "Home")" type="text" style=" width:150px; margin-top:8px"/><input type="submit" value="Search" class="btn" />
</form>
<br/> Advance Search
}</section>
what i am trying to achieve is to have the "Advance Search link just below the search button, currently i am getting these output on IE:-
and on firefox:-
can anyone advice how i can force the advance search link to be just below the search button?
Thanks
One way would be to set margin-top to a sufficient height on Advance search. If it isn't "blocked" by the search input field, it will float to the right of the page, leaving you to just set the margin height.
In order to push Advance Search link just below the search button, inline style can be used like this i.e:
Advance Search
you can set the top and left according to the setting that fits to you. give multiple values to top and left and choose the best which fits to the area in which you wants.
Here,
position:relative // make position of your <a></a> absolute
top:30px; // place your <a></a> to 30px down from top of your parent div or element
left:200px; // place your <a></a> to a distance of 200px far from left border of your div or element
Hope this helps.
I would use a table inside the div/container to layout exactly where to put it. The container would hve the positioning applied to it and then the advanced search will always be in the same place as the search bar. all you would need to do is format the table and every browser you open, all the elements will be in the same place.
for example:
<form ...... >
<table>
<tr>
<td> Advance Search </td>
<td><b>Search by Tag </b></td>
<td><input class="push-up-button searchmargin" placeholder="Search by tag.." name="searchTerm2" data-autocomplete-source= "#Url.Action("AutoComplete", "Home")" type="text" style=" width:150px; margin-top:8px"/></td>
<td><input type="submit" value="Search" class="btn" /></td>
</tr>
</table>
</form>
Is there a solution to move each form element on a new line without closing these elements on divs?
I mean:
<label for="one">One:</label> <input type="text" id="one">
<label for="two">Two:</label> <select id="two">
<option value="a">a</option>
<option value="b">b</option>
</select>
...
To display:
One: [.......]
Two: [a \/]
and so on...
If I put on CSS:
input, select, label {
display:block;
}
then labels are not on the same line as the form fields.
Is the only solution:
<div><label for="one">One:</label> <input type="text" id="one"></div>
...
Another way to do it is like this
<label><span>One:</span><input type="text" id="one"></label>
and the css
label {
display:block;
position:relative;
padding-left:120px; /* adjust if necessary */
}
label > span {
position:absolute;
left:0;
}
Why would you use display:block; if you want your elements to behave inline? Taken directly from w3schools.com, "block: displays an element as a block element like <p>".
We all know that when you use <p> the next element is automatically placed on a new line. So if you want your <label> and <input> elements to be side by side, you must use display:inline or inline-block.
Just do
<label for="one">One:</label> <input type="text" id="one"> <br>
Thats it. enjoy
Edit: expanding on what Hardy said, wrapping them in a div or span will give you more
flixibility later down the line but if your only concern is to get it all in one line, just put it like i wrote above.
I need to show (within a div tag) a label and right next to the label an input. I am using bootstrap css and my code is as follows:
<div class="row">
<div class="span3">
<div class="control-group">
<label class="control-label" for="txtInput">Enter Text:</label>
<div class="controls">
<input id="txtId" class="input-medium" name="txtInput" />
</div>
</div>
</div>
</div>
No matter what I do there is a space between the label ("Enter Text:") and the left margin of Input.
How do I change the HTML or CSS to accomplish this? TIA
To adjust the position of only your input field you should be able to just apply the "position" CSS property of that element. Once you set that "position" property as relative you can move the element's position relative to its initial starting location using top,bottom,left, and right.
In the below example I moved your input field 5 pixels to the left of where it normally would be.
<style>
.controls{
position:relative;
left:-5px;
}
</style>
Try removing any whitespace between the elements. For example:
<label class="control-label" for="txtInput">Enter Text:</label><div class="controls"><input id="txtId" class="input-medium" name="txtInput" /></div>
Then, just remove the margin or padding of the div or input, if you want them to be placed right next to each other. The whitespace between them is rendered, so you'll have to remove it. Another approach I've seen is (but never used) is to put an HTML comment between the elements instead, like this:
<label class="control-label" for="txtInput">Enter Text:</label><!--
--><div class="controls"><!--
--><input id="txtId" class="input-medium" name="txtInput" />
</div>
See if either of those help. I recently ran into this problem where I was getting unexpected whitespace between my labels and inputs, and I couldn't remove it without using negative margin, which I didn't like. The solution I found was to remove the whitespace as in the first example. It doesn't look too pretty in the code, but it works.
Good luck!
You could put a negative margin on input-medium to force it to be closer to the label:
div.controls {
display:inline;
}
.input-medium {
margin-left:-4px;
}
Here is my form code:
<td align="center" style=" width=50%; height=50%; background: url(images/side.gif) repeat-x ;">
<img src="images/iphone.gif" width="670" height="549" alt="">
<img style="position:fixed; left:280px; bottom:50px;"src="spr2.png" width="2%" height="15%" alt="">
<form style="display:inline-block;" method="POST" action="index.php">
<label style="position:fixed; left: 200px; bottom: 130px;">: اسم المستخدم</label>
<input style="position:fixed; left:50px; bottom:130px;" type="text" name="username" size="20"><br>
<label style="position:fixed; left:200px; bottom:100px;">: كلمة المرور</label>
<input style="position:fixed; left:50px; bottom:100px;" type="password" name="password" size="20"><br>
<input style="position:fixed; left:50px; bottom:60px;" type="submit" value=" تسجيل دخول ">
</form>
</td>
Here are screen shots from different browsers:
The elements change position when I resize the window:
How can I prevent the elements from changing position and width?
You are positioning elements on your page in a way that ignores the normal flow of relative positioning. By specifying left: 200px; and position:fixed; you are saying that no matter how your page is resized, or where you scroll to, the element will always be 200px from the left side of the window. Notice how even though you have <br> tags after your textboxes, you still have the labels directly to the right of them.
Use relative positioning - position:relative; or just remove the position attribute. Then use padding and margins to space out your elements, or float them. And if they are not showing up horizontally in a line, then change the display attribute to inline-block, and on the labels use clear:right; or put a <br> after them.
Put your styles in and external file.
Something like this: http://jsfiddle.net/R7RRH/2/
For the width issue, try utilizing the width, like in this JSFiddle.
<input type="text" style="width:200px;" size="20">
<input type="text" style="width:200px;" size="40">
Your problem with position might stem from the fact that you're using the value of fixed. Absolute positioning inside of relative positioning might be more like what you're going for.
Hiya! I'm having problems with z-index in IE7. I have a table where the user is asked to enter address. The javascript validator box 'formStatusBoxContainer' for postalCode is appearing behind the select box and the icon 'formStatusIcon' on the next row. Any idea how to solve this? Besides moving the box. Everything looks fine in FF and IE8.
<tr class="rowBack2">
<th width="150px">Postleitzahl:</th>
<td>
<input type="text" name="postalCode" value="" >
<span style="position: relative;">
<span class="formStatusBoxContainer">
<img src="/images/formfield_default.gif" class="formStatusIcon"
id="postalCodeIcon">
<span class="formStatusBoxTooltip" style="display: none;"
id="postalCodeStatus">
<div class="formStatusBoxInner" id="postalCodeStatusInner">
Bitte geben Sie die Postleitzahl ein.
</div>
</span>
</span>
</span>
</td>
</tr>
<tr class="rowBack1">
<th width="150px">Land:</th>
<td>
<span style="position: relative;">
<select name="country" id="country">
<option value="AX">Aland Inseln</option>
<option value="DZ">Algerien</option>
<option value="AD">Andorra</option>
</select>
</span>
<span class="formStatusBoxContainer">
<img src="/images/formfield_ok.gif" class="formStatusIcon" id="countryIcon">
<span class="formStatusBoxTooltip" style="display: none;" id="countryStatus">
<div class="formStatusBoxInner" id="countryStatusInner">Land</div>
</span>
</span>
</td>
</tr>
CSS for tooltip:
.formStatusBoxContainer { position:relative; }
.formStatusIcon { position:relative; top:0px;margin-left:5px;z-index:2; }
.formStatusBoxTooltip {
position:absolute;
left:35px;
top:-5px;
width:150px;
background:#7EA822;
padding:1px;
border-right:2px solid #666666;
border-bottom:2px solid #666666;
z-index:3;
}
CSS for table rows:
Just fonts, margins and tabbing. Nothing with position or z-index that should affect.
It's a known issue in older versions of IE (I think IE7 fixed it). The select box will always be rendered on top of the other HTML elements. I believe it is because the select box is a Windows control and is not managed by the browser, or something along that line.
In any case, the most common solutions to this type of issue are:
1) Hiding the select box when the hidden/clipped control has the focus.
2) Putting an IFrame behind the control. The IFrames have the same properties as the select boxes, and also are always on top of the other HTML elements, including select tags. See http://weblogs.asp.net/bleroy/archive/2005/08/09/how-to-put-a-div-over-a-select-in-ie.aspx for an example of how to do it. That's of course an ugly hack.
To get around this in the past I have used BGiFrame with jQuery.
The reason for the problem is IE uses the windows dropdown control for the dropdown box where as all other browsers use a dropdown box coded into the rendering engine.
HTH
I believe you'll need to give the select box's parent a lower z-index (in this case the table?)
table {position:relative; z-index:1;}
I've had the problem before with dropdown menus appearing behind inputs and that solved those.