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.
Related
#{
ViewData["Title"] = "Login";
}
<h1>#ViewData["Title"]</h1>
<div class="container">
<form action="/action_page.php">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="remember">Remember me
</label>
</div>
**<script>function openWin() {
window.open("https://localhost:7257/Home/Stocks");
}</script>
<form>
<button type="submit" class="btn btn-primary" value="Login" onclick="openWin()">
Login
</button>
</form>
<script>function openWin() {
window.open("https://localhost:7257/Home/Signup");
}</script>
<form>
<button type="submit" class="btn btn-primary" value="Sign up" onclick="openWin()">
Sign up
</button>
</form>**
</form>
</div>
After executing this code block the page that is similar to photo can be displayed but my problem is how should I change these 2 buttons functions so that they can pop up different locations like it is written in the bold area.
If there is any related page similar to this issue, you can share as comment.
It looks like you've named both functions openWin(). When you click the button it's finding the the top function and never makes it to the second one since it thinks it found what it was looking for. JS runs from top to bottom in order so as soon as it finds the first function it will stop.
You need to change one of the function names when you declare it, such as openWin() and openWin2().
I would also recommend that you move all of your JS code to a single <script> tag in order to avoid errors in the future.
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
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.