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
Related
I like to place buttons that links to different urls (meaning I have to use one form per button so that the action can hold different urls).
The problem is that the buttons appears vertical inside the td. I like to see them horizontal. Any suggestions? float:left and display:inline-block in the td tag doesn't work.
<table><tr>
<td>
<form action = "page1.html">
<button type="submit" name="btn1">btn1<button>
</form>
<form action = "page2.html">
<button type="submit" name="btn2">btn2<button>
</form>
</td>
</tr>
</table>
I have now put style="display:inline-block" in each form tag and style="white-space:nowrap" in the td. It works.
Using float: left for the forms will work if there is enough space inside the table, so you have to make the table width wider than the combined width of the 2 form contents.
CSS:
table {
width: 100%;
}
form {
float: left;
}
Here is a working example:
https://jsfiddle.net/11x6art9/1/
I have been trying to figure out how I can get input field and a button on the same line inside a table cell without stretching the column too much.
This is what I want to be inline:
<td>
<input type="text" class="input-sm form-control"id="measured_value" name="measured_value" placeholder="Measured value">
<button type="button" class="btn btn-xs btn-primary" onclick="add_measurement();">Submit</button>
</td>
This is what I get:
I have also tried using divs with col-lg-8 and col-lg-4 it did inline them but that in turn stretched the column a lot. It made the column like 1.5 times wider and I am trying to make the table compact.
It seems that form-control is the reason why it wouldn't inline. So I ended up removing form-control and adding this for the borders which came with the form-control.
.input-sm{
border: 1px solid #CCC;
border-radius: 4px;
}
The Easiest way is to make them float. For example:
CSS:
.input_class{
float:left;
}
.btn{
float:left;
}
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.
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.
Im currently trying to fix a form that i have built to work on a responsive layout
Ive attached a jpeg of what the form should look like a on full version of the site with the comments field aligned to the right of the rest of fields but when viewed on a mobile i want the comments field to drop below the rest of the fields.
Because i was advised to wrap the comments field in a DIV and place it before the rest of the form fields then float it right, when i view the mobile version the comments field sits at the top of the form instead of the bottom
any suggestions to how i can fix this issue?
see the CSS & HTML below
<style type="text/css">
body {
background-color: #FFF;
}
#form {
width:960px;
background-color:#edf8ff;
height:650px;
}
.gezza-form {
width:894px;
margin:0 auto;
margin-top:20px;
}
.gezza-field {
width:437px;
height:75px;
margin-bottom:10px;
border: 1px solid #d9e7f1;
}
.gezza-comments{
width:437px;
height:300px;
}
-->
</style></head>
<body>
<div id="form">
<form action="" class="gezza-form" method="post" >
<div style="float:right;">Comments<br /><textarea name="comments" cols="" rows="" class="gezza-comments" ></textarea></div>
First Name<br />
<input name="firstname" type="text" class="gezza-field" /><br/>
Last Name<br />
<input name="lastname" type="text" class="gezza-field" /><br/>
Email Address<br />
<input name="email" type="text" class="gezza-field" />
</form>
Should all fields have a fixed width? Wrap each column in a div, then float both divs left and give them an explicit width.
Put the div with the text area below the other fields in the HTML.
That should get you a lot closer.
Then, you will need to wrap each field / label pair in a div too.
On the mobile view it should all go into place more or less (bit of padding / margin needed maybe).
Then, on the wider view float the div for the text area right and the other fields' divs left. You'll need to set width for them .. say 49% each.
You'll need to use a clear fix on the element after this lot to clear the floats.