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>
Related
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).
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 using uib-datepicker with following html:
<div id="date-group" class="form-group">
<div class="input-group">
<input id="dateInput" type="text" class="form-control" uib-datepicker-popup="{{format}}" is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" ng-model="searchForm.date"/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open1()">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</div>
</div>
And It looks like this. I am using bootstrap 3.3.6. Any suggestions?
You need to modify the CSS on the button .btn-default attribute. Add some padding to the button and change the vertical-align or margin. Change the positioning nonetheless.
I tried to add padding and adjust the margin of the button and the vertical-align, but the default Bootstrap styling overrides what I tried, I can't get too deep into coding right now.
Here's a nice little tutorial on styling Bootstrap buttons or use the Bootstrap documentation to change the class of the button you're using.
Or take a look at the Angular directive for Bootstrap, the Datepicker Popup. I think that is your best bet.
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>
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.