On a search page, there is a text input with a submit button to the right. When zooming in, the submit button actually goes on top of the search bar, because there is no room. Is there any way I can prevent the button from moving when it is out of room?
HTML
<input type="text">
<input type="submit">
You just have to wrap your input elements inside a wrapper and give it fixed width.
Take a look at the example => DEMO
HTML
<!--This is the wrapper element-->
<div class='wrapper'>
<input type="text">
<input type="submit">
</div>
CSS
.wrapper{
width:200px; /*fixed width, so if the window is resized (zoomed in/out), it won't break*/
height:40px;
}
.wrapper input[type="text"]{
width:100px;
height:inherit;
border:1px solid red;
}
.wrapper input[type="submit"]{
width:90px;
height:inherit;
border:1px solid brown;
}
While it's hard to answer without the code, but hope it helps:
<table>
<tr>
<td><input type="text" name="query"></td>
<td><input type="submit"></td>
</tr>
</table>
Not so nice and I don't like it myself, but it works in any situation.
Related
i'm simply trying to set a background image to my submit button in my form. I've tried a couple variations of methods but every time I get the default browser button. Anyone know where I'm going wrong here?
HTML
<div id="headerSearch">
<form method="post" action="Test.php">
<div id="headerSearchBar">
<input class="tbSearch" type="text" name="search" size="12" placeholder="Search...">
</div>
<div id="headerSearchBtn">
<input class="btnSearch" id="button" name="submit" type="submit" value="">
</div>
</form>
</div>
CSS
#headerSearch{
float:right;
width:80%;
height:80px;
}
#headerSearchBar{
float:left;
width:90%;
height:80px;
}
.tbSearch{
height:25px;
width:95%;
margin-top:27.5px;
margin-left:2%;
margin-right:0;
margin-bottom:0
}
#headerSearchBtn{
float:right;
width:10%;
height:80px;
text-align:center;
}
.btnSearch{
background-image:url(../IMAGES/btnSearch.svg) no-repeat;
width:25px;
height:25px;
margin-top:27.5px;
}
You need to use just background
background:url(../IMAGES/btnSearch.svg) no-repeat;
I've found a method that fixes the issue, as Michael St Clair has mentioned I needed to use just background in the css rather than background-image. This removed the default browser image and didn't display my selected image.
I used a different method that has now fixed the issue, I tried this method before but with the background-image tag rather than with just background as Michael St Clair suggested, which all and all has now fixed the issue.
HTML
<input class="btnSearch" id="btnSearch" name="btnSearch" type="submit" value="">
CSS
.btnSearch{
width:25px;
height:25px;
margin-top:27.5px;
}
input#btnSearch{
background:url(../IMAGES/btnSearch.svg) no-repeat;
}
Add background-size:100% 100% to your button css. Something like this: http://codepen.io/shreya1289/pen/QEKGWa
I have a structure where there is a container and there are two slides in it. There is one text input field in each slide.
When input field on the first slide is focused, if user hits TAB key, automatically focus gets shifted on the input field of the second slide and second slide gets visible. (notice that margin-left:0px !impotant is still applied but still DIV is moved)
I don't want to disable TAB key which also means using tabindex="-1" is not a solution because it will isolate the text input from navigation .
I don't mind if focus is shifted to the second input field, but second slide should not move and get visible. I tried using margin-left:0px !important it didn't work.
How do I prevent this behavior using HTML and CSS?
Live Example is here
HTML
<div class="container">
<div class="slider">
<div class="inner">
<input type="text" placeholder="please click me and hit tab">
</div>
<div class="inner" style="background:#797979">
<input type="text">
</div>
</div>
</div>
CSS
.container{
margin-top:200px;
margin-left:300px;
height:300px;
width:300px;
border:1px solid red;
overflow:hidden;
}
.slider{
margin-top:0px;
margin-left:0px;
height:100%;
width:200%;
}
.inner{
margin-top:0px;
margin-left:0px;
height:100%;
width:50%;
background:#cecece;
float:left
}
input{
width:200px;
margin-top:20px;
margin-left:46px;
height:40px;
color:black;
padding-left:2%
}
The easiest way to do this would be to add tabindex="-1" as a property to the second input field (or whichever ones are necessary, depending on your preference). It would look something like this:
...
<input type="text" tabindex="-1">
...
Hope this helps.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Learning</title>
</head>
<body>
...
<h1>Testing</h1>
<span class="error">* Required</span>
<form name="SignUp" method="post" action="">
<fieldset>
<div>
<label>Name:</label><input id="NAME" type="text" name="name" placeholder="Name" required>
</div>
<div>
<label>Email:</label><input id="EMAIL" type="email" name="email" required>
</div>
<div>
<label></label><input type="submit" value="Send" >
</div>
</fieldset>
</form>
</body>
</html>
CSS
body {
background-color:#b0c4de;
font-family:"Times New Roman";
font-size:15px;
}
p {color:blue;}
.error {color: #FF0000;}
label {
display: inline-block;
width: 150px;
text-align: right;
margin-right:30px; //How far the label element and input box
margin-top:100px;
}
fieldset{
//border:none;
padding:15px;
width:500px;
margin:0px auto;
}
The Name: and input box are on one line and the next line is just touching it.
how do i put them apart.
Add a line-height to the div like below:
div{
line-height: 30px;
}
Fiddle
Note: Here, I have applied the property for div tag in general as it is only an example. In actual case, you might want to add a class for the div tags within the fieldset and apply the line-height only for that class. Doing it that way will make sure other div tags in the page aren't affected.
without getting too complicated, something simple as the following will produce the desired results
#NAME, #EMAIL, input[type=submit] {
margin-top:5px;
}
this gives your input fields a small space above so that they are spread out.
Note: I have used specific selectors to apply these values to the fields in your example only.
add below css to your code
div{
margin-top:10px;
}
you can change margin as your requirement.
There are many ways to implement this.
The simplest way is simply to insert a < BR > between label and the input tag.
A second way is to use a table and place the input in the cell below.
An alternative way is to use for example divs and place the label in one div and the input in another and use css techniques like float etc. This has the advantage of controlling everything via css.
In a table with one row where the first and second column having widths 20% and 60% respectively following is the html in that row of the second column. There is a browse button and a submit button. I want both of them to get vertically aligned at the top. I have mentioned this in css but I do not see the desired result. What could be the reason for this ?
Html snippet :
<form method="post" action="#">
<div id="Files_to_be_shared">
<input type="file" id="File" name="FileTag" />
<input type="submit" value="Share" />
</div>
</form>
Corresponding css snippet:
#Files_to_be_shared {
color:#FFEC94;
vertical-align:top;
}
This is the output I see (and I have marked where I want it to get placed):
If you are using table then add valign="top" to the td
& add align="center" to align it to the center of the td
DEMO
or try this
#Files_to_be_shared {
color:#FFEC94;
vertical-align:top;
text-align:center
}
td{
border:1px solid grey;
vertical-align:top;
}
DEMO 2
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.