This is my html code:
<label>Search:</label>
<input type="text" id="list_search" class="form-control col-8">
<button class="btn btn-info col-2">Search</button>
You see my input tag has 8 columns and my button has 2.
Then I don't get why I'm getting this:
Isn't supposed they should be X-aligned?
What I expect is:
But I had to use <div class="row"> there, which is modifying margins (look at the label).
You need form inline
and don't forget to set for inside label
<form class="form-inline">
<label for="list_search">Search:</label>
<input type="text" id="list_search" class="form-control">
<button class="btn btn-info">Search</button>
</form>
GL
Related
I have a input field and after clicking a button I'm calling a function and get back the right things.
Now I also want that the function is calling after pressing enter.
At the moment my code looks like this:
<div class="input-group mb-3">
<input (keyup)="searchUser($event)" stype="text" class="form-control" placeholder="Suche nach Nachnamen ..."
aria-label="Recipient's username" aria-describedby="button-addon2">
<div class="input-group-append">
<button (click)="searchForUser()" class="btn btn-outline-secondary" type="submit"
id="button-addon2">Suche</button>
</div>
</div>
I already tried to put my div in a <form></form>. Then the whole page is reloading.
Wrap the input and the button in a form tag, and rather than using a click handler on the button, make it a submit handler on the form element.
<form (submit)="searchForUser()">
Alternatively, you can remove the type="submit" completely.
This is working for me:
<form #p="ngForm" (ngSubmit)="searchForUser(u)">
<div class="input-group mb-3">
<input (keyup)="searchUser($event)" stype="text" class="form-control"
placeholder="Suche nach Nachnamen ..." aria-label="Recipient's username" aria-describedby="button-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="submit" id="button-addon2">Suche</button>
</div>
</div>
</form>
Explanation: https://angular.io/api/forms/NgForm
I have some basic bootstrap and HTML code that I am trying to plug into an application. My code below places the text box on one row but then has the button and ActionLink directly under the text box. I am attempting to put all 3 of these features on one row across the page.
It is as if the page is columned off and the text box is programmed to take up 100% of the first column width. I can try to change that but would prefer the text box to stay at its current width.
Please note: I attempted to put the button directly next to the text box but it is still getting pushed under it, which is why I think the page is columned off and the textbox is taking up 100% of the first column.
#using (Html.BeginForm("Index", "Person", FormMethod.Get))
{
<form asp-action="Index" method="get">
<div class="row">
<div class="form-actions no-color col-md-12">
<p>
Find by name: <input type="text" class="form-control" id="txtSearch" name="searchString" value="#ViewBag.CurrentFilter" />
<input type="submit" value="Search" class="btn btn-default" /> |
#Html.ActionLink("Back to List", "Index")
</p>
</div>
</div>
</form>
}
New Code:
<form class="form-inline">
<div class="form-group">
<label for="txtSearch">Find by name:</label>
<input type="text" class="form-control" display="inline-block" id="txtSearch" name="searchString" />
<input type="submit" value="Search" class="btn btn-default" /> |
</div>
#Html.ActionLink("Back to List", "Index")
</form> <br />
create an inline form with bootstrap classes, edited out the razor code, you'll have to put that back in
<form class="form-inline">
<div class="form-group">
<label for="txtSearch">Find by name:</label>
<input type="text" class="form-control" id="txtSearch" name="searchString" />
</div>
<input type="submit" value="Search" class="btn btn-default" /> |
Back To List
</form>
The problem is that the class "form-control" of your fisrt input text. Its display is block. If you want to stay the width of the text. Set the display to inline-block and set the width.
I've got some problems with sizing and positioning bootstrap input filds.
I've added the css class="form-controle" to the inputs.
and Now it looks like this:
But this is a cloze text to fill in and it should look like this:
It should always be like this: <> input <> input
Any hint how I can get this view with bootstrap?
check this example in bootstrap site
http://getbootstrap.com/css/#forms-inline
Try form-inline - check it on bootstrap's site here.
<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>
I am experiencing a issue detecting if the submit button was clicked. I was give the following form by a CSS designer:
<form action="" method="post">
<div class="form-group">
<label>Username</label>
<input name="username" type="text" class="form-control span12">
</div>
<div class="form-group">
<label>Password</label>
<input name="password" type="password" class="form-controlspan12 form-control">
</div>
Sign In
<div class="clearfix"></div>
</form>
I would like submit the captured information by clicking on the Sign In CSS button. I am used to the usual:
<input type="Submit" value="Sign-In>
button, but not this is different, I am stuck. Any assistance will be appreciated.
try to change
Sign In
with
<button type="submit" class="btn btn-primary pull-right">Sign In</button>
Furthermore you need to set an action attribute on your form element
Give your form and ID = "myform" And try below:
Sign In
I am using a template, the name is Treble One Page Rsponsive Theme from Wrapbootstrap which uses Twitter Bootstrap. I am implementing the template and encountered this small error which drove me crazy.
There is a search bar, consists of <input> tag and <button> tag. Previously it was fine, until I make it inside a <form>, the search bar started to act weird. The <input> field is centered, but the <button> appended into outside the field making the whole things uncentered.
Here is the image, to be clear:
picture
And here is my code:
<div class="row">
<div class="span8 offset2">
<div class="input-append">
<form method="get">
<input class="span5" id="appendedInputButton" type="text" placeholder="Search By Name" name="searchTerm" value="Search">
<button class="btn btn-primary sicon-search sicon-white" type="submit"><i>Search</i></button>
</form>
</div>
</div>
</div>
I've googled this template.
This code works on original template as expected:
<div class="row">
<div class="span8 offset2">
<form class="input-append" method="get">
<input class="span5" id="appendedInputButton" type="text" placeholder="Search By Name" name="searchTerm" value="Search" />
<button class="btn btn-primary sicon-search sicon-white" type="submit"><i>Search</i></button>
</form>
</div>
</div>
Main idea is to convert "input-append" div into form, instead of adding new form element within it.