I have multiple elements in different divs, that should be aligned at some line.
I can hardcode its width (40% for example), but it seems to be ugly. I also can use JS on page load to specify exact values in pixels (but it won't work for resizing very well).
How can I avoid this zigzag?
Here is desired result (but I have to hardcode width: 30% to make it work):
markup:
<div class="panel-body">
<div class="input-group margin-bottom">
<span class="input-group-addon input-source-observer">sourceObserver_patchSize</span>
<input id="sourceObserver_patchSize" type="text" data-parsley-type="integer" min="1" max="1000000" class="form-control" data-parsley-trigger="change" placeholder="#Model.Default.PatchSize" initial-value="#Model.Custom.PatchSize" value="#Model.Custom.PatchSize.RenderIfNotEqual(Model.Default.PatchSize)">
<span class="input-group-btn">
<input type="button" class="btn btn-default" onclick="restoreInput(event)" value="Восстановить" />
<input type="button" class="btn btn-default" onclick="clearInput(event)" value="Очистить" />
</span>
</div>
<div class="input-group margin-bottom">
<span class="input-group-addon input-source-observer">sourceObserver_scanInterval</span>
<input id="sourceObserver_scanInterval" type="text" data-parsley-type="integer" min="1" max="1000000" class="form-control" data-parsley-trigger="change" placeholder="#Model.Default.ScanInterval" initial-value="#Model.Custom.ScanInterval" value="#Model.Custom.ScanInterval.RenderIfNotEqual(Model.Default.ScanInterval)">
<span class="input-group-btn">
<input type="button" class="btn btn-default" onclick="restoreInput(event)" value="Восстановить" />
<input type="button" class="btn btn-default" onclick="clearInput(event)" value="Очистить" />
</span>
</div>
<div class="input-group margin-bottom">
<span class="input-group-addon input-source-observer">sourceObserver_maxWaitingTime</span>
<input id="sourceObserver_maxWaitingTime" type="text" data-parsley-type="integer" min="1" max="1000000" class="form-control" data-parsley-trigger="change" placeholder="#Model.Default.MaxWaitingTime" initial-value="#Model.Custom.MaxWaitingTime" value="#Model.Custom.MaxWaitingTime.RenderIfNotEqual(Model.Default.MaxWaitingTime)">
<span class="input-group-btn">
<input type="button" class="btn btn-default" onclick="restoreInput(event)" value="Восстановить" />
<input type="button" class="btn btn-default" onclick="clearInput(event)" value="Очистить" />
</span>
</div>
<div class="input-group margin-bottom">
<span class="input-group-addon input-source-observer">sourceObserver_shutdownTimeout</span>
<input id="sourceObserver_shutdownTimeout" type="text" data-parsley-type="integer" min="1" max="1000000" class="form-control" data-parsley-trigger="change" placeholder="#Model.Default.ShutdownTimeout" initial-value="#Model.Custom.ShutdownTimeout" value="#Model.Custom.ShutdownTimeout.RenderIfNotEqual(Model.Default.ShutdownTimeout)">
<span class="input-group-btn">
<input type="button" class="btn btn-default" onclick="restoreInput(event)" value="Восстановить" />
<input type="button" class="btn btn-default" onclick="clearInput(event)" value="Очистить" />
</span>
</div>
<div class="input-group margin-bottom">
<span class="input-group-addon input-source-observer">sourceObserver_maximumBytes</span>
<input id="sourceObserver_maximumBytes" type="text" data-parsley-type="integer" min="1" max="1000000" class="form-control" data-parsley-trigger="change" placeholder="#Model.Default.MemoryLimit.MaximumBytes" initial-value="#Model.Custom.MemoryLimit.MaximumBytes" value="#Model.Custom.MemoryLimit.MaximumBytes.RenderIfNotEqual(Model.Default.MemoryLimit.MaximumBytes)">
<span class="input-group-btn">
<input type="button" class="btn btn-default" onclick="restoreInput(event)" value="Восстановить" />
<input type="button" class="btn btn-default" onclick="clearInput(event)" value="Очистить" />
</span>
</div>
<div class="input-group margin-bottom">
<span class="input-group-addon input-source-observer">sourceObserver_freeMemoryWaitMs</span>
<input id="sourceObserver_freeMemoryWaitMs" type="text" data-parsley-type="integer" min="1" max="1000000" class="form-control" data-parsley-trigger="change" placeholder="#Model.Default.MemoryLimit.FreeMemoryWaitMs" initial-value="#Model.Custom.MemoryLimit.FreeMemoryWaitMs" value="#Model.Custom.MemoryLimit.FreeMemoryWaitMs.RenderIfNotEqual(Model.Default.MemoryLimit.FreeMemoryWaitMs)">
<span class="input-group-btn">
<input type="button" class="btn btn-default" onclick="restoreInput(event)" value="Восстановить" />
<input type="button" class="btn btn-default" onclick="clearInput(event)" value="Очистить" />
</span>
</div>
<div class="input-group margin-bottom">
<span class="input-group-addon input-source-observer">sourceObserver_freeMemoryWaitCount</span>
<input id="sourceObserver_freeMemoryWaitCount" type="text" data-parsley-type="integer" min="1" max="1000000" class="form-control" data-parsley-trigger="change" placeholder="#Model.Default.MemoryLimit.FreeMemoryWaitCount" initial-value="#Model.Custom.MemoryLimit.FreeMemoryWaitCount" value="#Model.Custom.MemoryLimit.FreeMemoryWaitCount.RenderIfNotEqual(Model.Default.MemoryLimit.FreeMemoryWaitCount)">
<span class="input-group-btn">
<input type="button" class="btn btn-default" onclick="restoreInput(event)" value="Восстановить" />
<input type="button" class="btn btn-default" onclick="clearInput(event)" value="Очистить" />
</span>
</div>
</div>
It's as simple as adding the following CSS rule:
.input-group {
display: table-row;
}
Example:
.panel-body {
border-spacing: 0 1em;
}
.panel-body:before,
.panel-body:after {
display: none !important;
}
.input-group {
display: table-row !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="panel-body">
<div class="input-group margin-bottom">
<span class="input-group-addon input-source-observer">sourceObserver_patchSize</span>
<input id="sourceObserver_patchSize" type="text" data-parsley-type="integer" min="1" max="1000000" class="form-control" data-parsley-trigger="change" placeholder="#Model.Default.PatchSize" initial-value="#Model.Custom.PatchSize" value="#Model.Custom.PatchSize.RenderIfNotEqual(Model.Default.PatchSize)">
<span class="input-group-btn">
<input type="button" class="btn btn-default" onclick="restoreInput(event)" value="Восстановить" />
<input type="button" class="btn btn-default" onclick="clearInput(event)" value="Очистить" />
</span>
</div>
<div class="input-group margin-bottom">
<span class="input-group-addon input-source-observer">sourceObserver_scanInterval</span>
<input id="sourceObserver_scanInterval" type="text" data-parsley-type="integer" min="1" max="1000000" class="form-control" data-parsley-trigger="change" placeholder="#Model.Default.ScanInterval" initial-value="#Model.Custom.ScanInterval" value="#Model.Custom.ScanInterval.RenderIfNotEqual(Model.Default.ScanInterval)">
<span class="input-group-btn">
<input type="button" class="btn btn-default" onclick="restoreInput(event)" value="Восстановить" />
<input type="button" class="btn btn-default" onclick="clearInput(event)" value="Очистить" />
</span>
</div>
<div class="input-group margin-bottom">
<span class="input-group-addon input-source-observer">sourceObserver_maxWaitingTime</span>
<input id="sourceObserver_maxWaitingTime" type="text" data-parsley-type="integer" min="1" max="1000000" class="form-control" data-parsley-trigger="change" placeholder="#Model.Default.MaxWaitingTime" initial-value="#Model.Custom.MaxWaitingTime" value="#Model.Custom.MaxWaitingTime.RenderIfNotEqual(Model.Default.MaxWaitingTime)">
<span class="input-group-btn">
<input type="button" class="btn btn-default" onclick="restoreInput(event)" value="Восстановить" />
<input type="button" class="btn btn-default" onclick="clearInput(event)" value="Очистить" />
</span>
</div>
<div class="input-group margin-bottom">
<span class="input-group-addon input-source-observer">sourceObserver_shutdownTimeout</span>
<input id="sourceObserver_shutdownTimeout" type="text" data-parsley-type="integer" min="1" max="1000000" class="form-control" data-parsley-trigger="change" placeholder="#Model.Default.ShutdownTimeout" initial-value="#Model.Custom.ShutdownTimeout" value="#Model.Custom.ShutdownTimeout.RenderIfNotEqual(Model.Default.ShutdownTimeout)">
<span class="input-group-btn">
<input type="button" class="btn btn-default" onclick="restoreInput(event)" value="Восстановить" />
<input type="button" class="btn btn-default" onclick="clearInput(event)" value="Очистить" />
</span>
</div>
<div class="input-group margin-bottom">
<span class="input-group-addon input-source-observer">sourceObserver_maximumBytes</span>
<input id="sourceObserver_maximumBytes" type="text" data-parsley-type="integer" min="1" max="1000000" class="form-control" data-parsley-trigger="change" placeholder="#Model.Default.MemoryLimit.MaximumBytes" initial-value="#Model.Custom.MemoryLimit.MaximumBytes" value="#Model.Custom.MemoryLimit.MaximumBytes.RenderIfNotEqual(Model.Default.MemoryLimit.MaximumBytes)">
<span class="input-group-btn">
<input type="button" class="btn btn-default" onclick="restoreInput(event)" value="Восстановить" />
<input type="button" class="btn btn-default" onclick="clearInput(event)" value="Очистить" />
</span>
</div>
<div class="input-group margin-bottom">
<span class="input-group-addon input-source-observer">sourceObserver_freeMemoryWaitMs</span>
<input id="sourceObserver_freeMemoryWaitMs" type="text" data-parsley-type="integer" min="1" max="1000000" class="form-control" data-parsley-trigger="change" placeholder="#Model.Default.MemoryLimit.FreeMemoryWaitMs" initial-value="#Model.Custom.MemoryLimit.FreeMemoryWaitMs" value="#Model.Custom.MemoryLimit.FreeMemoryWaitMs.RenderIfNotEqual(Model.Default.MemoryLimit.FreeMemoryWaitMs)">
<span class="input-group-btn">
<input type="button" class="btn btn-default" onclick="restoreInput(event)" value="Восстановить" />
<input type="button" class="btn btn-default" onclick="clearInput(event)" value="Очистить" />
</span>
</div>
<div class="input-group margin-bottom">
<span class="input-group-addon input-source-observer">sourceObserver_freeMemoryWaitCount</span>
<input id="sourceObserver_freeMemoryWaitCount" type="text" data-parsley-type="integer" min="1" max="1000000" class="form-control" data-parsley-trigger="change" placeholder="#Model.Default.MemoryLimit.FreeMemoryWaitCount" initial-value="#Model.Custom.MemoryLimit.FreeMemoryWaitCount" value="#Model.Custom.MemoryLimit.FreeMemoryWaitCount.RenderIfNotEqual(Model.Default.MemoryLimit.FreeMemoryWaitCount)">
<span class="input-group-btn">
<input type="button" class="btn btn-default" onclick="restoreInput(event)" value="Восстановить" />
<input type="button" class="btn btn-default" onclick="clearInput(event)" value="Очистить" />
</span>
</div>
</div>
For some reason, Bootstrap adds pseudo elements :before and :after on .panel-body, which result in extra space when border-spacing is used. Simply hiding them seems to fix the problem.
Also any !important in the example above was only necessary for the example to work here. If you include your stylesheet after Bootstrap's, they are not needed.
I suggest you use the properties of a table to get the effect you want. This solution can also be modified to work well with a responsive design.
div.table{
display: table;
}
div.table div.tr{
display: table-row;
}
div.table div.tr div.td{
display: table-cell;
padding-top: 10px;
}
div.table div.tr div.td div.label{
background-color: lightgray;
padding: 10px;
border: 1px solid gray;
border-radius: 5px 0 0 5px;
}
div.table div.tr div.td div.value{
background-color: lightgray;
padding: 10px;
border-width: 1px 1px 1px 0;
border-style: solid;
border-color: gray;
}
<div class="table">
<div class="tr">
<div class="td">
<div class="label">sourceObserver_patchSize</div>
</div>
<div class="td">
<div class="value">value</div>
</div>
</div>
<div class="tr">
<div class="td">
<div class="label">...</div>
</div>
<div class="td">
<div class="value">...</div>
</div>
</div>
</div>
you can achieve such result by setting monotype font, white-space: pre and padding span elements with spaces to the longest one
example:
<style>
.input-group-addon {
white-space: pre;
font-family: "Courier New", Courier, monospace;
}
</style>
<div class="panel-body">
<div class="input-group margin-bottom">
<span class="input-group-addon input-source-observer">sourceObserver_patchSize </span>
<input id="sourceObserver_patchSize" type="text" data-parsley-type="integer" min="1" max="1000000" class="form-control" data-parsley-trigger="change" placeholder="#Model.Default.PatchSize" initial-value="#Model.Custom.PatchSize" value="#Model.Custom.PatchSize.RenderIfNotEqual(Model.Default.PatchSize)">
<span class="input-group-btn">
<input type="button" class="btn btn-default" onclick="restoreInput(event)" value="Восстановить" />
<input type="button" class="btn btn-default" onclick="clearInput(event)" value="Очистить" />
</span>
</div>
<div class="input-group margin-bottom">
<span class="input-group-addon input-source-observer">sourceObserver_scanInterval </span>
<input id="sourceObserver_scanInterval" type="text" data-parsley-type="integer" min="1" max="1000000" class="form-control" data-parsley-trigger="change" placeholder="#Model.Default.ScanInterval" initial-value="#Model.Custom.ScanInterval" value="#Model.Custom.ScanInterval.RenderIfNotEqual(Model.Default.ScanInterval)">
<span class="input-group-btn">
<input type="button" class="btn btn-default" onclick="restoreInput(event)" value="Восстановить" />
<input type="button" class="btn btn-default" onclick="clearInput(event)" value="Очистить" />
</span>
</div>
<div class="input-group margin-bottom">
<span class="input-group-addon input-source-observer">sourceObserver_maxWaitingTime </span>
<input id="sourceObserver_maxWaitingTime" type="text" data-parsley-type="integer" min="1" max="1000000" class="form-control" data-parsley-trigger="change" placeholder="#Model.Default.MaxWaitingTime" initial-value="#Model.Custom.MaxWaitingTime" value="#Model.Custom.MaxWaitingTime.RenderIfNotEqual(Model.Default.MaxWaitingTime)">
<span class="input-group-btn">
<input type="button" class="btn btn-default" onclick="restoreInput(event)" value="Восстановить" />
<input type="button" class="btn btn-default" onclick="clearInput(event)" value="Очистить" />
</span>
</div>
<div class="input-group margin-bottom">
<span class="input-group-addon input-source-observer">sourceObserver_shutdownTimeout </span>
<input id="sourceObserver_shutdownTimeout" type="text" data-parsley-type="integer" min="1" max="1000000" class="form-control" data-parsley-trigger="change" placeholder="#Model.Default.ShutdownTimeout" initial-value="#Model.Custom.ShutdownTimeout" value="#Model.Custom.ShutdownTimeout.RenderIfNotEqual(Model.Default.ShutdownTimeout)">
<span class="input-group-btn">
<input type="button" class="btn btn-default" onclick="restoreInput(event)" value="Восстановить" />
<input type="button" class="btn btn-default" onclick="clearInput(event)" value="Очистить" />
</span>
</div>
<div class="input-group margin-bottom">
<span class="input-group-addon input-source-observer">sourceObserver_maximumBytes </span>
<input id="sourceObserver_maximumBytes" type="text" data-parsley-type="integer" min="1" max="1000000" class="form-control" data-parsley-trigger="change" placeholder="#Model.Default.MemoryLimit.MaximumBytes" initial-value="#Model.Custom.MemoryLimit.MaximumBytes" value="#Model.Custom.MemoryLimit.MaximumBytes.RenderIfNotEqual(Model.Default.MemoryLimit.MaximumBytes)">
<span class="input-group-btn">
<input type="button" class="btn btn-default" onclick="restoreInput(event)" value="Восстановить" />
<input type="button" class="btn btn-default" onclick="clearInput(event)" value="Очистить" />
</span>
</div>
<div class="input-group margin-bottom">
<span class="input-group-addon input-source-observer">sourceObserver_freeMemoryWaitMs </span>
<input id="sourceObserver_freeMemoryWaitMs" type="text" data-parsley-type="integer" min="1" max="1000000" class="form-control" data-parsley-trigger="change" placeholder="#Model.Default.MemoryLimit.FreeMemoryWaitMs" initial-value="#Model.Custom.MemoryLimit.FreeMemoryWaitMs" value="#Model.Custom.MemoryLimit.FreeMemoryWaitMs.RenderIfNotEqual(Model.Default.MemoryLimit.FreeMemoryWaitMs)">
<span class="input-group-btn">
<input type="button" class="btn btn-default" onclick="restoreInput(event)" value="Восстановить" />
<input type="button" class="btn btn-default" onclick="clearInput(event)" value="Очистить" />
</span>
</div>
<div class="input-group margin-bottom">
<span class="input-group-addon input-source-observer">sourceObserver_freeMemoryWaitCount</span>
<input id="sourceObserver_freeMemoryWaitCount" type="text" data-parsley-type="integer" min="1" max="1000000" class="form-control" data-parsley-trigger="change" placeholder="#Model.Default.MemoryLimit.FreeMemoryWaitCount" initial-value="#Model.Custom.MemoryLimit.FreeMemoryWaitCount" value="#Model.Custom.MemoryLimit.FreeMemoryWaitCount.RenderIfNotEqual(Model.Default.MemoryLimit.FreeMemoryWaitCount)">
<span class="input-group-btn">
<input type="button" class="btn btn-default" onclick="restoreInput(event)" value="Восстановить" />
<input type="button" class="btn btn-default" onclick="clearInput(event)" value="Очистить" />
</span>
</div>
</div>
Related
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.
I am an bit new to Bootstrap but I can't ind it anywhere on the manual how to give the add on in the last line (where the txt is 'cm') the dimensions as the previous 3 lines.
<!-- width right -->
<div id="div_widthRight" class="form-group has-warning">
<label for="widthRight" class="col-sm-3 control-label">Breedte rechts</label>
<div class="col-sm-9">
<div class="input-group">
<input type="number" class="form-control" id="widthRight" name="width_right" min="20" max="252" value="" data-preview="preview_hl_right" onkeyup="validate()" onclick="validate()">
<span class="input-group-addon">cm</span>
</div>
</div>
</div>
<!-- height -->
<div id="div_height" class="form-group has-warning">
<label for="height" class="col-sm-3 control-label">Hoogte</label>
<div class="col-sm-9">
<div class="btn-group">
<button type="button" class="btn btn-default" id="height_1" name="height" value="1" data-preview="preview_hl_height" onclick="validate_but(this);validate()">14,5</button>
<button type="button" class="btn btn-default" id="height_2" name="height" value="2" data-preview="preview_hl_height" onclick="validate_but(this);validate()">29,0</button>
<button type="button" class="btn btn-default" id="height_3" name="height" value="3" data-preview="preview_hl_height" onclick="validate_but(this);validate()">43,5</button>
<button type="button" class="btn btn-default" id="height_4" name="height" value="4" data-preview="preview_hl_height" onclick="validate_but(this);validate()">58,0</button>
<span class="input-group-addon">cm</span>
</div>
</div>
</div>
Or is it because I am using different classes? But to get this aligned correct?
This is what I am trying to get.
When adding the input-group class to btn-group.
Width 0 on the input-group-addon. I have this result:
When only adding Width 0 on the input-group-addon.
I have edited my answer since my first answer did not work properly in all resolutions. I think this is one way to achieve what you want. I have changed some of your bootstrap classes.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div id="div_height" class="form-group has-warning">
<label for="height" class="col-sm-3 control-label">Hoogte</label>
<div class="col-sm-9">
<div class="input-group-btn">
<span class="input-group-btn">
<button type="button" class="btn btn-default" id="height_1" name="height" value="1" data-preview="preview_hl_height" onclick="validate_but(this);validate()">14,5</button>
<button type="button" class="btn btn-default" id="height_2" name="height" value="2" data-preview="preview_hl_height" onclick="validate_but(this);validate()">29,0</button>
<button type="button" class="btn btn-default" id="height_3" name="height" value="3" data-preview="preview_hl_height" onclick="validate_but(this);validate()">43,5</button>
<button type="button" class="btn btn-default" id="height_4" name="height" value="4" data-preview="preview_hl_height" onclick="validate_but(this);validate()">58,0</button>
</span>
<span class="input-group-addon">cm</span>
</div>
</div>
</div>
I have a problem with layout bootstrap. I want the search button to remain at the end of the line.
Here is my code:
<form id="frmTest" class="form-inline">
<div class="form-group">
<input type="text" name="full_name" class="form-control" id="full_name" placeholder="Name"/>
</div>
<div class="form-group">
<div class="input-group date date-picker" data-date-format="dd-mm-yyyy">
<input type="text" name="start_date" class="form-control" readonly id="start_date" size="8" placeholder="From(Date)">
<span class="input-group-btn">
<button class="btn default" type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
</div>
</div>
<div class="form-group">
<div class="input-group date date-picker" data-date-format="dd-mm-yyyy">
<input type="text" name="end_date" class="form-control" readonly id="end_date" size="8" placeholder="To(Date)">
<span class="input-group-btn">
<button class="btn default" type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
</div>
</div>
<div class="form-group">
<button class="btn btn-primary black" onClick="clearForm(event);" id="btn-reset" >clear</button>
</div>
</form>
<button class="btn btn-warning " id="btn-search">Search</button> //this not part form input
output:
I want the layout like this:
How can this resolved?
1)Place search button into the form.
2) If you don't want to place the search button into the form, then try the below code.
Just, make the form inline.
form {
display: inline;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<form id="frmTest" class="form-inline">
<div class="form-group">
<input type="text" name="full_name" class="form-control" id="full_name" placeholder="Name" />
</div>
<div class="form-group">
<div class="input-group date date-picker" data-date-format="dd-mm-yyyy">
<input type="text" name="start_date" class="form-control" readonly id="start_date" size="8" placeholder="From(Date)">
<span class="input-group-btn">
<button class="btn default" type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
</div>
</div>
<div class="form-group">
<div class="input-group date date-picker" data-date-format="dd-mm-yyyy">
<input type="text" name="end_date" class="form-control" readonly id="end_date" size="8" placeholder="To(Date)">
<span class="input-group-btn">
<button class="btn default" type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
</div>
</div>
<div class="form-group">
<button class="btn btn-primary black" onClick="clearForm(event);" id="btn-reset">clear</button>
</div>
</form>
<button class="btn btn-warning " id="btn-search">Search</button>
Note: View the output in full page mode.
Hi i'm having trouble resizing the search button so that it will be the same height as the textfield. Thank you in advance!.
<div class="form-group col-md-4">
<div class="col-md-9">
<label for="search">Search:</label>
<div class="input-group">
<input type="text" class="input-sm form-control" id="search" />
<span class="input-group-addon">
<button type="submit" class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
You can use Input Group instead of Input Group Addon and change the button to match the input size of small. See example Snippet.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<div class="form-group col-md-4">
<div class="col-md-9">
<label for="search">Search:</label>
<div class="input-group">
<input type="text" class="input-sm form-control" id="search" /> <span class="input-group-btn">
<button type="submit" class="btn btn-default btn-sm" type="button"><span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</div>
<!-- /input-group -->
I am using 2 Angularjs-ui boorstrap datepickers. http://angular-ui.github.io/bootstrap/
I would like to place the 2 datepickers side-by-side. Unfortunately, my html code places them one on top and the other below. My html code looks like this;
<h4>Start date</h4>
<div class="row"">
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened"
datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true"
close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div> <!-- <div class="row"> Registration start date -->
<h4>End date</h4>
<div class="row">
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened"
datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true"
close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
How do I change the html code to make the 2 datepickers (with the header text) appear side by side?
<div class="row">
<div class="col-md-6">
<span>Start date</span>
</div>
<div class="col-md-6">
<span>End date</span>
</div>
</div>
<div class="row">
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened"
datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true"
close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened"
datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true"
close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>