I have a Bootstrap DateTimePicker inside a label, but the picker is hidden inside the label. I have successfully done this with a select box, but can't seem to get this to work. The DateTimePicker displays after clicking the checkbox. How do I bring this forward so it displays properly?
Hidden DateTimePicker image
<div class="form-group col-md-4">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label for="enddate" class="btn btn-outline-primary">Set End Date
<input type="checkbox" name="set_end_time" id="set_end_time">
<input type="text" class="datetimepicker btn btn-secondary dropdown-toggle" name="end_time" style="display: none" aria-haspopup="true" aria-expanded="false"/>
</label>
</div>
</div>
Related
I'm following this documentation cause I would like to create a
Gmail like 'search bar' where beside the input there's a dropdown button that opens a dropdown with filter options.
Unfortunately in the docs the examples don't cover the input + dropdown button scenario.
I started with this:
<!-- Search bar-->
<div class="input-group mb-3">
<input type="text" class="form-control">
<div class="input-group-append" ngbDropdown role="group" aria-label="Button group with nested dropdown">
<button class="btn btn-outline-success" ngbDropdownToggle></button>
<div class="dropdown-menu" ngbDropdownMenu>
<button class="dropdown-item">One</button>
<button class="dropdown-item">Two</button>
</div>
</div>
</div>
Everything is shown correctly, but the dropdown is not. It is opened under its parent (the button), while I'd like to have it for the whole length of the input. Pretty sure it could be solved with some CSS rule.
From the documentation under Manual Triggers, you could attach the dropdown menu to the input group and trigger the open/close with the appended button on click event.
<!-- Search bar-->
<div class="container">
<div class="input-group mb-3" #myDrop="ngbDropdown" ngbDropdown>
<input type="text" class="form-control" >
<div class="input-group-append" role="group" >
<button (click)="$event.stopPropagation(); myDrop.open();" class="btn btn-outline-success" >Hi</button>
</div>
<div class="dropdown-menu" ngbDropdownMenu>
<button class="dropdown-item">One</button>
<button class="dropdown-item">Two</button>
</div>
</div>
</div>
How do I align label element vertically with button.
I am using this hack to make a file button look like the regular bootstrap buttons
Twitter Bootstrap Form File Element Upload Button
The trouble is the button is no longer vertically aligned properly with the the regular buttons. (If I replace the label element with regular button element it looks correct but then of course it does not work.
<div style="padding:0.25em">
<button type="button" title="Select All" name="select_all" class="btn btn-outline-secondary" onclick="selectAll('ARTWORK_TABLE');">
Select All
</button>
<button type="button" title="UnSelect All" name="select_all" class="btn btn-outline-secondary" onclick="unselectAll('ARTWORK_TABLE');">
UnSelect All
</button>
<label class="btn btn-outline-secondary">
Browse
<input type="file" id="fileupload" accept="image/*" onchange="uploadImageFile(this.files);" style="display:none">
</label>
</div>
Using a margin utility class (mt-2) seems to work..
<div class="container">
<div style="padding:0.25em">
<button type="button" title="Select All" name="select_all" class="btn btn-outline-secondary" onclick="selectAll('ARTWORK_TABLE');">
Select All
</button>
<button type="button" title="UnSelect All" name="select_all" class="btn btn-outline-secondary" onclick="unselectAll('ARTWORK_TABLE');">
UnSelect All
</button>
<label class="btn btn-outline-secondary mt-2">
Browse
<input type="file" id="fileupload" accept="image/*" onchange="uploadImageFile(this.files);" style="display:none">
</label>
</div>
</div>
https://www.codeply.com/go/kFHG1BDI1E
Trying to build a 3 control input-group with Bootstrap 3.3.7, however the height of the first addon does not match the following input nor button.
<div class="input-group">
<span class="input-group-addon">Amount</span>
<input type="text" class="form-control" />
<div class="input-group-btn">
<button class="btn">Submit</button>
</div>
</div>
Anyone have a working sample to solve this design?
First and for all where is your <label> tag?
Do you want the submit in your input field? Or the submit button underneath it?
You need also to place form around it and your input can be declared as number because it's amount; your input field also needs a name. A submit button is an input button with type='submit':
example:
<input type="submit" class="btn btn-default" value="submit" id="submit">
You can also declare on your body class='container'
<body class="container">
<form id="youWantToGiveThisAName" class="form-group">
<label for="amountOfSomething"></label>
<div class="input-group">
<span class="input-group-addon">Amount</span>
<input type="number" name="amountOfSomething" id="amountOfSomething" class="form-control" value="0.00000121">
</div>
<div>
<input type="submit" class="btn btn-coinchecker pull-right" value="submit" id="submit">
</div>
</form>
</body>
Here's a fiddle to see the result
I am new to slim and is struggling with getting the textfield and button on the same height. Can anyone help me?
div class="center-div"
= text_field_tag 'txtSlug', t('code.description'), class:'form-control input-lg'
button class="btn btn-primary" onclick="SubmitForm()" = t('code.submit')
Looking at bootstrap's inline forms, you must use form-inline to the "main parent" to make those elements inline and add form-group to the input element parent. So, it should look like.
div class="center-div form-inline"
.form-group
= text_field_tag 'txtSlug', t('code.description'), class:'form-control input-lg'
button class="btn btn-primary btn-lg" onclick="SubmitForm()" = t('code.submit')
Here's a bootply of a similar markup
If you use Bootstrap, you should create an inline form with class form-inline, or even an input-group to join the input and button together.
Here is the documentation: for inline forms and input groups: http://getbootstrap.com/css/#forms-inline
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
<div class="input-group-addon">.00</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Transfer cash</button>
</form>
I am using bootstrap in my application. I am having a form which contains multiple drop down boxes which are placed inline. The width of the container containing the form is col-lg-12 and is taking the entire screen. Because of the data inside the drop down the last two drop downs are displayed in the second line. I tried giving the max-width property of the select box to 50%. The drop down width reduces but the margin still remains the same. I am not goot at bootstrap. Please let me know where I am going wrong. I am posting the code below:
<form novalidate role="form" name="filterForm" class="form-inline">
<div ng-repeat="criteria in criterias">
<div class="m-b">
<div class="form-group s-b">
<span>Country</span>
<select class="form-control" ng-options="item for item in country" name="country" ng-model="classification.country">
</select>
</div>
<div class="form-group s-b">
<span>State</span>
<select ng-options="item for item in state" class="form-control" name="state" ng-model="criteria.state" style="max-width:50%">
</select>
</div>
<div class="form-group s-b">
<span>City</span>
<select class="form-control" ng-options="item for item in Cities" name="account" ng-model="criteria.city" style="max-width:50%;">
</select>
</div>
<div class="form-group s-b">
<span>Predicate</span>
<select class="form-control" name="account" ng-model="criteria.predicate">
<option value="matches">Matches</option>
<option value="not-matches">Not Matches</option>
</select>
</div>
<div class="form-group s-b">
<span>Value</span>
<select class="form-control" name="account" ng-model="criteria.value" style="min-width:100px;">
</select>
</div>
<div class="form-group">
<span>
<button class="btn btn-sm btn-primary pad-btn" type="submit" ng-click="addCriteria()"><i class="fa fa-plus"></i>
</button>
<button class="btn btn-sm btn-danger pad-btn" type="submit" ng-click="deleteCriteria(criteria)"><i
class="fa fa-minus"></i></button>
</span>
</div>
</div>
</div>
<button class="btn btn-sm btn-primary pad-btn align-center" type="submit" ng-click="searchParams(filterForm)">Submit
<i class="fa fa-check"></i></button>
<button class="btn btn-sm btn-warning pad-btn align-center" type="submit" ng-click="resetFilter()">Reset
<i class="fa fa-reply"></i></button>
</form>
Try adding a class
Since your data is too big you should try adding a class that modifies the position of the dropdowns, since they are absolute they should be easy to move around to where you want.
Explanation of bootsraps column system
If you set your class col-xs-12 it will be bull width all the way from mobile to big desktop
If you set your class to col-xs-12 col-lg-6 then xs, sm and md will all be full width but lg will be half width.
try using shoe lace to model your column setup.
Note
You should check out ui.bootstrap since you're using angular.js. It removed the use of jQuery so you don't run into any compatibility issues or strange bugs.