I am using md-dialog to display a form.
Form contains md-input-container which displays input tags and select tags.
The last container shows up https://github.com/Gillardo/bootstrap-ui-datetime-picker
<md-input-container class="md-block" flex-gt-sm>
<label>Time</label>
<p class="input-group">
<input type="text" class="form-control" datetime-picker="MM/dd/yyyy HH:mm" ng-model="scheduledJob.date" is-open="scheduledJob.open"/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="openCalendar($event, scheduledJob)">
<i class="fa fa-calendar"></i></button>
</span>
</p>
</md-input-container>
But whenever this gets clicked, the md-dialog starts showing a scroll bar like this:
How can make this particular dropdown fall outside of md-dialog, Here is a quick CodePen of the issue I am facing.
Define datepicker option datepicker-append-to-body="true" in your input element.
<input type="text" class="form-control" datetime-picker="MM/dd/yyyy HH:mm"
datepicker-append-to-body="true" ng-model="scheduledJob.date"
is-open="scheduledJob.open"/>
From angular-ui/bootstrap readme:
datepicker-append-to-body (Default: false, Config: appendToBody) - Append the datepicker popup element to body, rather than inserting after datepicker-popup.
Related
I am using custom file input of bootstrap:
How can I change color of the "Browse" button?
What all I tried:
Added color tag to custom-file-input
Added color tag to custom-file-label
Both did not work. On inspect, when I try to get the responsible css class it shows custom-file-input. However, the changes don't work.
tag is not button
can you try bg-[color]?
<div class="input-group mb-3">
<span class="input-group-text" id="inputGroup-sizing-default">Default</span>
<input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
</div>
if example code like this. you can input bg-primary here
<span class="input-group-text bg-primary" id="inputGroup-sizing-default">Default</span>
tag is button
you can use btn-[color] instead.
https://getbootstrap.com/docs/5.0/components/buttons/
<button type="button" class="btn btn-info">Info</button>
I am trying to display a partial view inside a button popover.
cshtml:
<button type="button" class="btn btn-secondary" data-container="body"
data-toggle="popover" data-placement="bottom" id="popoverBtn"
data-content="#(await Html.PartialAsync("_ListBoxPartial"))">
Popover on bottom
Partial View:
<div class="row">
<div class="col-12">
<select name="test" style="width:100%;" id="selectMultiple" class="form-control custom-select" multiple>
<option>123</option>
<option>456</option>
<option>789</option>
</select>
</div>
</div>
But it displays like this:
Instead of using RenderPartialAsync, use PartialAsync
<button type="button" class="btn btn-secondary" data-container="body"
data-toggle="popover" data-placement="bottom" id="popoverBtn"
data-content="#(await Html.PartialAsync("_ListBoxPartial"))">
Popover on bottom
</button>
If you are initializing your popover via javascript, the v4 documentation of bootrap states:
html (boolean property with a default of false): Insert HTML into
the popover. If false, jQuery's text method will be used to insert
content into the DOM. Use text if you're worried about XSS attacks.
I haven't tried it but there might also be a data attribute equivalent of data-html="true" if you are not using js to initialize the popover (it would seem odd if there is though).
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
With twitter bootstrap, I can get a button to appear the full width of the div by adding the btn-block or form-control classes onto it, like in the example of the first text box below:
<input type="text" class="form-control" placeholder="asdf">
However, when using the Multiple Button input group, I cannot figure out how to get the width of the text box to equal the full width of its container div minus the width of the other 2 "C" and "M" buttons.
Here is the code that I'm using for this second "C/M/textbox" input:
<div class="input-group input-group-sm">
<div class="input-group-btn">
<button type="button" class="btn btn-default"><span class="">C</span></button>
<button type="button" class="btn btn-default"><span class="">M</span></button>
</div>
<input type="text" class="form-control">
</div>
Code contains text box and button
HTML:
<div id="input-collection" class="input-group input-group-lg">
<span class="input-group-addon">
<i class="glyphicon glyphicon-link"></i>
</span>
<input id= "url-input-box" type="url" class="form-control" name = "url" placeholder="http://www.example.com">
<span class="input-group-btn">
<button id="submit-url-btn" class="btn btn-success" type="button">Go</button>
</span>
</div>
which shows button and texbox like:
I changed margin-top and margin-left in all above class but no change.
Where I need to make change here?
Use Firebug (or chrome developer tools - Ctrl+Shift+J)
Look at the margin-bottom settings of: submit-url-btn (the tag)
against the margin-bottom of the url-input-box (span)
It seems that the button has a high value on margin-bottom. set both to 0 and see how they are positioned.