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).
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 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.
I am trying to change CSS property by element ID using vanilla JS?
I am trying to achieve the following effect:
After the first button is clicked on the bottom bottom, the first button on the top should change it's class from btn-dark to btn-warning.
The remaining buttons should follow this same pattern: #b2 clicked should result in #d2 being changed from btn-dark to btn-warning.
My current attempt:
<div class="row">
<button *ngFor="let number of [1,2,3,4,5,6,7,8,9,10]"
type="button"
class="btn btn-dark"
id="d{{number}}"
>
</button>
</div>
<div class="row">
<button (click)="onClick($event)"
*ngFor="let number of [1,2,3,4,5,6,7,8,9,10]"
type="button"
class="btn btn-secondary"
id="b{{number}}">{{number}}
</button>
</div>
Screenshot displaying the template
Use ngClass, e.g.:
<button [ngClass]="{'btn-dark': true}">...</button>
Try like this
it will changed one of them at a time
stackblitz demo link
I want to move the "Delete page" button up next to the "View page" button. Is there an easy way to do this in bootstrap?
I don't want to wrap the h1 and "View page" button in the form, to preserve html readability.
<h1>
Edit page
<a target="_blank" class="btn btn-default" href="/view">View page</a>
<form role="form">
<input type="submit" name="commit" value="Delete page" class="btn btn-danger btn btn-primary" data-confirm="Are you sure?" />
</form>
</h1>
add display: inline to your form :
form{
display: inline;
}
https://jsfiddle.net/ypkLaexL/
An alternative solution would be to adjust your HTML. Adding a class of pull-right to the form will cause it to align to the right margin of your <h1> tag, and placing the hyperlink inside the <form> will cause the button to align as per your desired results.
Added bonus; you're not creating a class that overrides Bootstraps form framework.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<h1>
Edit page
<form role="form" class="pull-right">
<a target="_blank" class="btn btn-default" href="/view">View page</a>
<input type="submit" name="commit" value="Delete page" class="btn btn-danger btn btn-primary" data-confirm="Are you sure?" />
</form>
</h1>
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.