I would like my text box and search button to look like this:
-------------------- -------
| Text Box | | BTN |
-------------------- -------
I am using this reference.
Here is how mine is rendered:
Here is my CSHTML:
<div style="display:inline-block; float: right">
<div style="float:right;">
#Html.TextBox("date", null, htmlAttributes: new { #class = "form-control datepicker" })
</div>
<div style="float:right; margin-right: 10px">
<input type="submit" value="Search" class="btn btn-primary top-margin" />
</div>
</div>
I know that inline CSS with HTML isn't preferred, and that I should separate out the CSS from the HTML, but for right now I just want to get this to render properly and then I will separate it out.
Any help is appreciated.
Thank you.
I assume this is what you want. The .example is just a wrapper, you only need its contents.
.example {
width: 50%;
margin: 50px auto;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="example">
<div class="input-group">
<input type="text" class="form-control" placeholder="text box..." id="search-box" aria-describedby="search-label">
<label for="search-box" id="search-label" class="input-group-addon btn">Search</label>
</div>
</div>
Note: I made use of Twitter Bootstrap classes because it seems you are already loading it in your project. This can be easily done without Bootstrap, but it would mean unnecessary CSS if you load Bootstrap.
Use table (with bootstrap 3):
<table class="table table-bordered table-hover">
<tbody>
<tr>
<td>
<button type="button" class="btn btn-default">button</button>
</td>
<td>
<input type="text" name="" id="input" class="form-control" value="" required="required" pattern="" title="">
</td>
</tr>
</tbody>
Related
I know almost nothing about CSS.
This is my table:
<tbody>
<tr>
<td class="onefield acyfield_1 acyfield_text">
<label class="cell margin-top-1">
<div class="acym__users__creation__fields__title">Name</div>
<input name="user[name]" value="" data-authorized-content="{"0":"all","regex":"","message":"Incorrect value for the field Name"}" type="text" class="cell ">
</label>
<div class="acym__field__error__block" data-acym-field-id="1"></div>
</td>
<td class="onefield acyfield_2 acyfield_text">
<label class="cell margin-top-1">
<div class="acym__users__creation__fields__title">Email</div>
<input id="email_field_403" name="user[email]" value="" data-authorized-content="{"0":"all","regex":"","message":"Incorrect value for the field Email"}" required="" type="email" class="cell acym__user__edit__email ">
</label>
<div class="acym__field__error__block" data-acym-field-id="2"></div>
</td>
<td class="acysubbuttons">
<noscript>
<div class="onefield fieldacycaptcha">
Please enable the javascript to submit this form
</div>
</noscript>
<input type="button" class="btn btn-primary button subbutton" value="Subscribe" name="Submit" onclick="try{ return submitAcymForm('subscribe','formAcym73021', 'acymSubmitSubForm'); }catch(err){alert('The form could not be submitted '+err);return false;}">
</td>
</tr>
</tbody>
The button isn't aligned with the input fields:
I have tried like a million things, like:
vertical-align: bottom
As per documentation here.
And position: absolute margin 0;
Etc. etc.
It doesn't matter: the button is always on the middle.
Can anyone help?
Thanks!
In the code submitted, HTML table is not used properly.
If you want to create the form using a table, the labels for inputs should be declared as column headers, in the thead section of the table, not in tbody. This way, your table row will contain only the inputs and the submit button and they will have the same height by default.
th {
text-align:left;
}
<table>
<thead>
<th class="acym__users__creation__fields__title">Name</th>
<th class="acym__users__creation__fields__title">Email</th>
</thead>
<tbody>
<tr>
<td class="onefield acyfield_1 acyfield_text">
<input name="user[name]" value=""
data-authorized-content="{"0":"all","regex":"","message":"Incorrect value for the field Name"}"
type="text" class="cell ">
<div class="acym__field__error__block" data-acym-field-id="1"></div>
</td>
<td class="onefield acyfield_2 acyfield_text">
<input id="email_field_403" name="user[email]" value=""
data-authorized-content="{"0":"all","regex":"","message":"Incorrect value for the field Email"}"
required="" type="email" class="cell acym__user__edit__email ">
<div class="acym__field__error__block" data-acym-field-id="2"></div>
</td>
<td class="acysubbuttons">
<noscript>
<div class="onefield fieldacycaptcha">
Please enable the javascript to submit this form
</div>
</noscript>
<input type="button" class="btn btn-primary button subbutton" value="Subscribe" name="Submit"
onclick="try{ return submitAcymForm('subscribe','formAcym73021', 'acymSubmitSubForm'); }catch(err){alert('The form could not be submitted '+err);return false;}">
</td>
</tr>
</tbody>
</table>
Instead use
position: absolute;
bottom: 0px;
and also add bottom:0px;
Have you tried the margin-top attribute? It essentially puts a space on top of your subscribe button.
Basically in the css block of your button, add
margin-top: 10px;
Note that this value is fixed so it's probably not the best solution but it's a quick and easy one. Also play around with the value until its the right spot.
I have this HTML:
<html>
<head>
<link href="bootstrap.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<form method="post" enctype="multipart/form-data">
<table class="table">
<tr>
<td>Current Version</td>
<td><strong><?= $version ?></strong></td>
</tr>
<tr>
<td>Upload new version</td>
<td><input class="btn-info btn" type="file" name="package"><input type="submit" class="btn-info btn" value="Upload"></td>
</tr>
</table>
</form>
</div>
</body>
</html>
But the submit button is rendered under the fileupload element, but I want it on the right side of it. When I disable bootstrap, it works. How can I get any info next to the file browser?
Bootstrap makes the file upload button a block which makes it take the whole space and the buttons not to align next to each other.
You could globally set the input type file to display as inline-block for them to align next to each other.
input[type=file] {
display: inline-block;
}
Or you could of course give that specific file upload button a class and declare css only for it.
Fiddle: https://jsfiddle.net/pozh7cj3/2/
Boostrap can help to get rid of table designed pages.
So, you can write your form like this:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<form class="form-horizontal" method="post" enctype="multipart/form-data">
<div class="form-group">
<label class="col-xs-4 control-label">Current Version</label>
<div class="col-xs-8">
<p class="form-control-static"><strong><?= $version ?></strong></p>
</div>
</div>
<div class="form-group">
<label for="package" class="col-xs-4 control-label">Upload new version</label>
<div class="col-xs-6">
<input class="form-control" type="file" name="package">
</div>
<div class="col-xs-2">
<input type="submit" class="btn-info btn" value="Upload">
</div>
</div>
</form>
</div>
(col-xs* classes are used to have the needed result with the small viewport of code-snippet)
I am trying to make a search bar using html/bootstrap/Jquery which looks similar to the search bar found here:
https://us.letgo.com/en
So far I have that design but with only one text box:
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-offset-3 col-md-6">
<form class="" action="next_page.php" method="GET">
<div class="form-group" id="search_wrapper">
<input type="text" id="search_field" class="form-control" name="search_title" placeholder="Search By Name">
<button type="submit" id="search_button" class="btn btn-default">Search</button>
css
#search_field {
background-transparent;
height:40px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-color: #CCCCCC;
outline: none;
}
#search_button {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
position:absolute;
top:0;
right:0;
font-size: 17px;
width:120px;
height:40px;
}
#search_wrapper{
height:40px;
position:relative;
}
When I add another input between the button and input between the input and button, the input just displays below both the button and the text box.
<input type="text" id="search_field" class="form-control" name="search_place" placeholder="Search By Place">
EDIT 1
I made a jsfiddle
https://jsfiddle.net/7v6hc9sz/1/
If that doesnt just link you to it, please let me know in a comment that it doesn't work. I have never used jsfiddle before.
I would recommend leveraging the Bootstrap native styles to the maximum extent possible, as they give you a robust set of tools to build your site.
For this particular issue, you're looking for Bootstrap's Inline Form styles.
Here's an example from their docs:
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe#example.com">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>
You also are looking for Bootstrap Input Groups which will allow you to "pair" the button to the right of the last input.
Note the following things about that code:
1. The form has a class of form-inline. This is important, as it tells Bootstrap to line things up inline.
2. Each pair of label / inputs gets wrapped in a div with the class form-group. This tells Bootstrap to display this "group" (label and input) inline.
3. Each input gets a class of form-control. This tells bootstrap to style it up as an input.
Now, applying those classes to your markup, to achieve what you want, would look something like this:
<!-- Add the class "form-inline" -->
<h3>
Important:<br>form-inline does not appear correctly unless you make the preview pane wide!
</h3>
<form class="form-inline" action="next_page.php" method="GET">
<div class="form-group">
<input type="text" id="search_field" class="form-control" name="search_title" placeholder="Search By Name">
<!-- close the "form-group" div and start a new div -->
</div>
<!-- here we use "input-group" to get the submit tight "against" the input -->
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button type="submit" id="search_button" class="btn btn-default">Search</button>
</span>
</div>
</form>
Here's a Working Fiddle
You just need to make an inline form - the bootstrap website has examples.
It looks like this:
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="inputOne">Input One</label>
<input type="text" class="form-control" id="inputOne" placeholder="Input Two">
</div>
<div class="form-group">
<label class="sr-only" for="inputTwo">Input Two</label>
<input type="text" class="form-control" id="inputTwo" placeholder="Input Two">
</div>
<button type="submit" class="btn btn-default">Search</button>
</form>
Working bootply
Here's a bootply with connected fields by Rachel S
I had to create a custom CSS class to override the default margins for this form:
margin-right: -10px;
As well as remove the rounded corners of the following input element:
border-top-left-radius: 0;
border-bottom-left-radius: 0
See working demo below (need to see in in full-page).
You'd need to add this to your nav bar, of course.
.my-search {
padding: 1px;
margin-right: -10px;
display: inline-block;
}
.my-search2 input#search2 {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>my attempt</h2>
<hr/>
<form class="form-inline">
<div class="form-group">
<div class="input-group my-search">
<input type="text" class="form-control" id="search1" placeholder="s1">
</div>
<div class="input-group my-search2">
<input type="text" class="form-control" id="search2" placeholder="s2">
<div class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
</div>
</div>
</div>
</form>
Why does my Bootstrap input not align right (=> see 3rd input with placeholder='Does not align right')?
The td table element has a style which defines the alignment...
When I remove the style element from the td element at set the input style text-align=right, it is still left aligned.
<div class="row">
<div class="col-md-6">
<div class="well" style="width:840px">
<table class='table borderless' style="width:800px">
<tr>
<td colspan="2">
<input class="form-control input-sm" style="width:300px;margin-bottom:0px" type="text" name="input1" placeholder="Input 1">
<input class="form-control input-sm" style="width:300px;margin-bottom:0px" type="text" name="input2" placeholder="Input 2">
</td>
</tr>
<tr>
<td colspan="2" style="text-align: right">
<input class="form-control input-sm" style="width:300px;margin-bottom:0px" type="text" name="input3" placeholder="Does not align right">
</td>
</tr>
<tr>
</table>
</div>
</div>
</div>
Why does my Bootstrap input not align right?
Because .form-control will have display: block from bootstrap.min.css. As proof of this, if you make it an inline-block again it'll work:
.form-control { display: inline-block !important; }
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-md-6">
<div class="well" style="width:840px">
<table class='table borderless' style="width:800px">
<tr>
<td colspan="2">
<input class="form-control input-sm" style="width:300px;margin-bottom:0px" type="text" name="input1" placeholder="Input 1">
<input class="form-control input-sm" style="width:300px;margin-bottom:0px" type="text" name="input2" placeholder="Input 2">
</td>
</tr>
<tr>
<td colspan="2" style="text-align: right">
<input class="form-control input-sm" style="width:300px;margin-bottom:0px" type="text" name="input3" placeholder="Does not align right">
</td>
</tr>
<tr>
</table>
</div>
</div>
</div>
What you probably really want is your controls to behave like that straight away. To do so make sure to utilize Bootstrap's form-inline, e.g. like this:
<div class="row form-inline">
Note that this affects the first row of inputs too. If you move the form-inline to a another spot you could choose to prevent that from happening.
That's because your input has it's display property set to block via the .form-control class. Block level elements will take up the whole width of their containing element. Even if a width is set, the remaining space is taken up by margin.
To get the input to align the way you would like change the display value to inline-block or add the class .pull-right to the input.
.form-control {
display: inline-block;
}
<input type="text" class="form-control input-sm pull-right">
Twitter Bootstrap specially set width: 100% property to the .form-control to make the life easier and handle such things with Grid system
You can go with the following solution
HTML Markup
<div class="row">
<div class="col-md-9 is-centered">
<div class="well well-form">
<!-- Two inline input fields per row -->
<div class="row">
<div class="col-sm-6 form-group">
<input class="form-control input-sm" type="text" name="input1" placeholder="Input 1">
</div>
<div class="col-sm-6 form-group">
<input class="form-control input-sm" type="text" name="input2" placeholder="Input 2">
</div>
</div>
<div class="row has-border">
<div class="col-sm-12">
<!-- Single input fields per row (pushed to the right) -->
<div class="row">
<div class="col-sm-6 pull-right">
<input class="form-control input-sm" type="text" name="input3" placeholder="align to right">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Helpers (optional)
SCSS
[class*="col-"] {
&.is-centered {
float: none;
margin-right: auto;
margin-left: auto;
}
}
.well-form {
> .row {
padding-top: 8px;
border-top: 1px solid #ddd;
}
.form-group {
margin-bottom: 8px;
}
}
CSS
[class*="col-"].is-centered {
float: none;
margin-right: auto;
margin-left: auto;
}
.well-form > .row {
padding-top: 8px;
border-top: 1px solid #ddd;
}
.well-form .form-group {
margin-bottom: 8px;
}
DEMO
Couple of things to notice:
<table> is not a good approach in this case
inline style=" to HTML tags is not good at all (even if its a demo)
Hope this helps
I'm trying to make my sign in form all on one line with the email on the left and the password on the right and the submit button to the right of that. Right now it looks like this:
How can I make it so that the whole form is on one line starting with the 'Forgot your password?' on the far left, followed by the email, then password, then the sign in button on the far right? Here is the code:
<template name='entrySignIn'>
<div class="container">
<div class="row">
{{#if logo}}
<div class="entry-logo">
<img src="{{logo}}" alt="logo">
</div>
{{/if}}
<div class="entry-sign-in">
{{#if otherLoginServices}}
<div class="entry-social">
{{#each loginServices}}
{{> entrySocial}}
{{/each}}
{{#if passwordLoginService}}
<div class="email-option">
<strong class="line-thru or-sign-in">{{i18n "OR"}}</strong>
</div>
{{/if}}
</div>
{{/if}}
{{> entryError}}
{{#unless otherLoginServices}}
{{/unless}}
{{#if passwordLoginService}}
<form class="entry-form" id='signIn'>
<div class="form-group">
<input autofocus name="email" type="{{emailInputType}}" class="form-control" value='{{email}}' placeholder="{{emailPlaceholder}}">
</div>
<div class="form-group">
<input name="password" type="password" class="form-control" value='{{password}}' placeholder="{{i18n 'password'}}">
</div>
<p>{{i18n "forgotPassword"}}</p>
<button type="submit" class="submit btn btn-success">{{i18n "signIn"}}</button>
</form>
{{/if}}
</div>
</div>
</div>
</template>
I tried jason's suggestion and it kind of worked but now it looks like this:
Does anyone know how to fix this?
This looks like bootstrap. If it is, try to use the form-inline class found here http://getbootstrap.com/css/#forms-inline
<form class="entry-form form-inline" id='signIn'>
<div class="form-group">
<input autofocus name="email" type="{{emailInputType}}" class="form-control" value='{{email}}' placeholder="{{emailPlaceholder}}">
</div>
<div class="form-group">
<input name="password" type="password" class="form-control" value='{{password}}' placeholder="{{i18n 'password'}}">
</div>
<p>{{i18n "forgotPassword"}}</p>
<button type="submit" class="submit btn btn-success">{{i18n "signIn"}}</button>
</form>
I would suggest putting your controls into a table. For example:
<form class="entry-form" id='signIn'>
<table>
<tr>
<td>
<div class="form-group">
<input autofocus name="email" type="{{emailInputType}}" class="form-control" value='{{email}}' placeholder="{{emailPlaceholder}}">
</div>
</td>
<td>
<div class="form-group">
<input name="password" type="password" class="form-control" value='{{password}}' placeholder="{{i18n 'password'}}">
</div>
</td>
</tr>
<tr>
<td colspan = "2">
<div class="form-group">
<input name="password" type="password" class="form-control" value='{{password}}' placeholder="{{i18n 'password'}}">
</div>
</td>
</tr>
<tr>
<td colspan = "2">
<button type="submit" class="submit btn btn-success">{{i18n "signIn"}}</button>
</td>
</tr>
</table>
</form>
Although I dont know what the other markup is ( {{#if passwordLoginService}}). Handlebars? It should still work with that.