as shown in the image,things are deranged a bit, maybe its because its inside a td.
is it possible to do that?
<td>
<div class="col">
<div class="input-group text-center">
<div class="input-group-btn">
<button class="btn btn-primary" type="submit" id="button-minus"> - </button>
</div>
<input type="text" class="form-control" value="1" size="1">
<div class="input-group-btn">
<button class="btn btn-primary" type="submit" id="button-plus"> + </button>
</div>
</div> <!-- input-group.// -->
</div> <!-- Col.// -->
</td>
You might try to remove the default Bootstrap padding and margin for td, p, button and try :
td {
padding: 0;
margin: 0;
}
You can place the buttons and form on the same line by adding display: inline-flex to .input-group
.input-group {display: inline-flex}
<td>
<div class="col">
<div class="input-group text-center">
<div class="input-group-btn">
<button class="btn btn-primary" type="submit" id="button-minus"> - </button>
</div>
<input type="text" class="form-control" value="1" size="1">
<div class="input-group-btn">
<button class="btn btn-primary" type="submit" id="button-plus"> + </button>
</div>
</div> <!-- input-group.// -->
</div> <!-- Col.// -->
</td>
Related
Im pretty new to HTML and bootstrap
I made a centered form but i want to add a small button (red cross) on the right of my "chapter title" input field and i dont know how do i do it
Current html:
<form>
<div class="form-group">
<input type="text" class="form-control" placeholder="Chapter title" required>
</div>
<div class="form-group">
<textarea class="form-control" rows="15"></textarea>
</div>
<div class="form-group" align="center">
<button class="btn btn-outline-secondary" id="add-chapter">Add chapter</button>
</div>
</form>
what do i need to add or change
Use float-right along with the negative margin utility class, for example mr-n4...
<div class="container">
<button class="btn btn-text float-right mr-n4 close">
<span aria-hidden="true">×</span>
</button>
<form>
<div class="form-group">
<input type="text" class="form-control" placeholder="Chapter title" required>
</div>
<div class="form-group">
<textarea class="form-control" rows="15"></textarea>
</div>
<div class="form-group" align="center">
<button class="btn btn-outline-secondary" id="add-chapter">Add chapter</button>
</div>
</form>
</div>
https://codeply.com/p/CliBMjnlsN
#Zim's answer works, but I just don't like working with floats so I came up another solution with absolute positioning.
<form>
<div class="form-group form-group-with-extra-button">
<input type="text" class="form-control" placeholder="Chapter title" required>
<button type="button" class="btn btn-extra">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="form-group">
<textarea class="form-control" rows="15"></textarea>
</div>
<div class="form-group text-center">
<button class="btn btn-outline-secondary" id="add-chapter">Add chapter</button>
</div>
</form>
.form-group-with-extra-button {
position: relative;
}
.form-group-with-extra-button .btn-extra {
position: absolute;
left: 100%;
top: 0;
color: var(--danger);
}
demo: https://jsfiddle.net/davidliang2008/1dpz0w52/24/
Thats not really what i wanted but i guess thats what im gonna stick to
<form>
<div class="form-group input-group">
<input type="text" class="form-control" placeholder="Chapter title" required>
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false"></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Delete chapter</a>
<a class="dropdown-item" href="#">Add chapter before</a>
<a class="dropdown-item" href="#">Add chapter after</a>
</div>
</div>
</div>
<div class="form-group">
<textarea class="form-control" rows="10"></textarea>
</div>
<div class="form-group" align="center">
<button class="btn btn-outline-secondary" id="add-chapter">Add chapter</button>
</div>
</form>
I want to keep text box and button in the same line, but it's coming in two different lines:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div>
<div style="float:left">
<button class="btn btn-primary" onclick="AddEditExpenses(0)">Add Expense</button>
<button class="btn btn-success" onclick="ReportExpense()">Expense Report</button>
</div>
<div style="float:right; width:40%;">
<form asp-controller="Expense" asp-action="Index" class="form-group">
<div class="col-sm-6">
<input class="form-control" type="text" name="SearchString" placeholder="Search">
<button type="submit" class="btn btn-default btn-info">Filter</button>
</div>
</form>
</div>
</div>
Make your parent element, containing the input and button element a flex box. I used the bootstrap utility classes to achieve this. I added a small margin to the input element as well, also using a bootstrap utility class.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div>
<div style="float:left">
<button class="btn btn-primary" onclick="AddEditExpenses(0)">Add Expense</button>
<button class="btn btn-success" onclick="ReportExpense()">Expense Report</button>
</div>
<div style="float:right; width:40%;">
<form asp-controller="Expense" asp-action="Index" class="form-group">
<div class="col-sm-12 d-flex">
<input class="form-control mr-1" type="text" name="SearchString" placeholder="Search">
<button type="submit" class="btn btn-default btn-info">Filter</button>
</div>
</form>
</div>
</div>
Probably the best way to achieve exactly what you want is something like this
<div class="container">
<div class="row">
<div class="col-sm-8">
<button class="btn btn-primary" onclick="AddEditExpenses(0)">Add Expense</button>
<button class="btn btn-success" onclick="ReportExpense()">Expense Report</button>
</div>
<form asp-controller="Expense" asp-action="Index" class="form-group col-sm-4 d-flex">
<input class="form-control" type="text" name="SearchString" placeholder="Search">
<button type="submit" class="btn btn-default btn-info">Filter</button>
</form>
</div>
</div>
The "Filter" button goes in the second line since Bootstrap's form-control class has display: block and width: 100%. Change display: inline-block and reduce width: 50%.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div>
<div style="float:left">
<button class="btn btn-primary" onclick="AddEditExpenses(0)">Add Expense</button>
<button class="btn btn-success" onclick="ReportExpense()">Expense Report</button>
</div>
<div style="float:right; width:40%;">
<form asp-controller="Expense" asp-action="Index" class="form-group">
<div class="col-sm-8">
<input class="form-control" type="text" name="SearchString" placeholder="Search" style="display: inline-block; width: 50%;">
<button type="submit" class="btn btn-default btn-info">Filter</button>
</div>
</form>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div>
<div style="float:left">
<button class="btn btn-primary" onclick="AddEditExpenses(0)">Add Expense</button>
<button class="btn btn-success" onclick="ReportExpense()">Expense Report</button>
</div>
<div style="float:right; width:40%;">
<form asp-controller="Expense" asp-action="Index" class="form-group">
<div class="col-sm-8">
<div class="d-flex">
<input class="form-control" type="text" name="SearchString" placeholder="Search">
<button type="submit" class="btn btn-default btn-info ml-2">Filter</button>
</div>
</div>
</form>
</div>
</div>
I am putting an input group inside a <details> tag. Outside, it works nicely, but inside, the input's height increases. Please note, I am using Halfmoon for my project. (Disclaimer: I built the project myself)
Anyway, here is the code:
<link href="https://cdn.jsdelivr.net/gh/halfmoonui/halfmoon#1.0.3/css/halfmoon.css" rel="stylesheet"/>
<div class="content">
<!-- Input group outside -->
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Shop</span>
</div>
<input type="text" class="form-control" placeholder="Enter products">
<div class="input-group-append">
<button class="btn btn-primary" type="button">Search</button>
</div>
</div>
<br />
<details open>
<summary>Click to open/close</summary>
This is the details for the summary.
<!-- Input group inside -->
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Shop</span>
</div>
<input type="text" class="form-control" placeholder="Enter products">
<div class="input-group-append">
<button class="btn btn-primary" type="button">Search</button>
</div>
</div>
</details>
</div>
As you can see, the input group on the inside of the <details> has a messed up height which also affects the text before it. Exactly what am I doing wrong here? For reference, the input group code is taken from the docs, specifically this example: https://www.gethalfmoon.com/docs/input-group/#stacking-text-and-buttons.
Thanks for any help.
Just add box-sizing: border-box to .input-group
.input-group {
box-sizing:border-box;
}
<link href="https://cdn.jsdelivr.net/gh/halfmoonui/halfmoon#1.0.3/css/halfmoon.css" rel="stylesheet"/>
<div class="content">
<!-- Input group outside -->
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Shop</span>
</div>
<input type="text" class="form-control" placeholder="Enter products">
<div class="input-group-append">
<button class="btn btn-primary" type="button">Search</button>
</div>
</div>
<br />
<details open>
<summary>Click to open/close</summary>
This is the details for the summary.
<!-- Input group inside -->
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Shop</span>
</div>
<input type="text" class="form-control" placeholder="Enter products">
<div class="input-group-append">
<button class="btn btn-primary" type="button">Search</button>
</div>
</div>
</details>
</div>
How do I align the button to the right of the text box, after using form control on the search box, I am able to align the button to the left of the text box but I wish to have it on the right, please help.
<div class="row">
<div class="col-sm-12">
<div class="col-sm-4 pull-left">
<input type="button" class="btn btn-default" value="New" onclick="go('password_det.asp');" />
</div>
<div class ="form-group pull-right">
<input class="form-control" id="txtSearch" name="txtSearch" placeholder="Search" aria-controls="example1" type="text" />
</div>
<div class="pull-right">
<button class="btn" type="submit" name="btnSubmit" value="Search" onclick="showContent('page=1');return false;">
<span class="glyphicon glyphicon-search"></span>
</button>
</div>
</div>
</div>
The search box and button
Fix again!
<div class="row">
<div class="col-sm-12">
<div class="col-sm-4 pull-left">
<input type="button" class="btn btn-default" value="New" onclick="go('password_det.asp');" />
</div>
<div class="pull-right">
<button class="btn" type="submit" name="btnSubmit" value="Search" onclick="showContent('page=1');return false;">
<span class="glyphicon glyphicon-search"></span>
</button>
</div>
<div class ="form-group pull-right">
<input class="form-control" id="txtSearch" name="txtSearch" placeholder="Search" aria-controls="example1" type="text" />
</div>
</div>
</div>
Try Input Groups on the form elements, bootstrap by default provides those classes
This is how you make use of them
HTML
<div class="row">
<div class="col-sm-12">
<div class="col-sm-4 pull-left">
<input type="button" class="btn btn-default" value="New" onclick="go('password_det.asp');" />
</div>
<div class="col-sm-6 pull-right">
<div class ="input-group search-bar">
<input class="form-control" id="txtSearch" name="txtSearch" placeholder="Search" aria-controls="example1" type="text" />
<span class="input-group-addon">
<button class="btn search-btn" type="submit" name="btnSubmit" value="Search" onclick="showContent('page=1');return false;">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</div>
</div>
CSS
.search-bar{
padding:0;
}
.search-bar .input-group-addon{
padding:0;
}
.search-bar .search-btn{
padding:5px 12px;
}
Link for reference
hope this helps..
Just change place them:
Change:
<div class ="form-group pull-right">
<input class="form-control" id="txtSearch" name="txtSearch" placeholder="Search" aria-controls="example1" type="text" />
</div>
<div class="pull-right">
<button class="btn" type="submit" name="btnSubmit" value="Search" onclick="showContent('page=1');return false;">
<span class="glyphicon glyphicon-search"></span>
</button>
</div>
To:
<div class="pull-right">
<button class="btn" type="submit" name="btnSubmit" value="Search" onclick="showContent('page=1');return false;">
<span class="glyphicon glyphicon-search"></span>
</button>
</div>
<div class ="form-group pull-right">
<input class="form-control" id="txtSearch" name="txtSearch" placeholder="Search" aria-controls="example1" type="text" />
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row">
<div class="col-sm-12">
<div class="col-sm-4 pull-left">
<input type="button" class="btn btn-default" value="New" onclick="go('password_det.asp');" />
</div>
<div class="pull-right">
<button class="btn" type="submit" name="btnSubmit" value="Search" onclick="showContent('page=1');return false;">
<span class="glyphicon glyphicon-search"></span>
</button>
</div>
<div class ="form-group pull-right">
<input class="form-control" id="txtSearch" name="txtSearch" placeholder="Search" aria-controls="example1" type="text" />
</div>
</div>
</div>
Here is an example of inline search form:
<div class="pull-right">
<form method="get" action="">
<div class="form-group form-inline">
<input type="text" placeholder="search" class="form-control" name="s">
<button title="search" name="search" type="submit" class="btn btn-primary">Search</button>
</div>
</form>
</div>
you can use style=float: right; on button tag to align button to right and then adjust margin and padding accordingly.
In my angular app I have a typical data entry form with the following three buttons at the end:
<div class="form-group">
<div>
<button id="button1id" name="button1id" class="btn btn-success" ng-click="submitRequest()">Save</button>
</div>
</div>
<br />
<div class="form-group">
<div>
<button id="button2id" name="button2id" class="btn btn-default" >Cancel</button>
</div>
</div>
<br />
<div class="form-group">
<div>
<button id="button3id" name="button3id" class="btn btn-danger">Delete</button>
</div>
</div>
Currently, all 3 buttons are stacked vertically.
What is the CSS syntax to place all 3 of them horizontally?
Removed <br> and the extra <div> tags
HTML:
<div class="form-group">
<button id="button1id" name="button1id" class="btn btn-success" ng-click="submitRequest()">Save</button>
</div>
<div class="form-group">
<button id="button2id" name="button2id" class="btn btn-default" >Cancel</button>
</div>
<div class="form-group">
<button id="button3id" name="button3id" class="btn btn-danger">Delete</button>
</div>
CSS:
.form-group {
display: inline-block;
}
DEMO: JSFIDDLE
To remove whitespace between buttons refer Fighting the Space Between Inline Block Elements
Just Use:
.form-group {
float:left;
}
Working Example
Hope this helps.
Do not surround the buttons with div elements
<div class="form-group">
<button id="button1id" name="button1id" class="btn btn-success" ng-click="submitRequest()">Save</button>
<button id="button2id" name="button2id" class="btn btn-default">Cancel</button>
<button id="button3id" name="button3id" class="btn btn-danger">Delete</button>