I have a bootstrap button
<button onclick="leaveOpen()">TEST</button>
It calls a custom function
function leaveOpen(){
$("#rangeDropdown").addClass('open');
$("#dropdownMenu2").trigger('focus').attr('aria-expanded', 'true');
}(jQuery);
Which should affect these elements
<div class="dropup mobilewidth mobilebottom" id="rangeDropdown">
<button class="btn btn-default dropdown-toggle mobilewidth" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
...
</button>
...
</div>
This part works
$("#dropdownMenu2").trigger('focus').attr('aria-expanded', 'true');
but this part doesn't
$("#rangeDropdown").addClass('open');
When I click the the TEST button, the "dropup mobilewidth mobilebottom" lights up in the chrome developer tool as if something changed, but the 'open' class is not added. What am I doing wrong?
It's clearly the issue that the class is added & it's removed.
Probably bootstrap watches on focus event and toggles the open class.
If your handler is before bootstrap:
you: open added
bootstrap: open is toggled
-> result: nothing changes
In the other case the class would be added, but looking at your description that Chrome Dev Tools flashes that something changed it's rather the issue of double changing the open class
Not sure, it seems to work for me if the button is on the page. This alerts the class attribute after clicking the button:
function leaveOpen(){
$("#rangeDropdown").addClass('open');
alert($("#rangeDropdown").attr('class'));
$("#dropdownMenu2").trigger('focus').attr('aria-expanded', 'true');
}(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropup mobilewidth mobilebottom" id="rangeDropdown">
<button class="btn btn-default dropdown-toggle mobilewidth" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
...
</button>
...
</div>
<button onclick="leaveOpen()">TEST</button>
Related
I'm using Bootstrap Vue plugin - https://bootstrap-vue.js.org/
I need to change dropdown menu default background when someone select value from dropdown like this.
But this is the problem. When someone click dropdown, They toggle "show" class in dropwdown wrapper. No any class new class for red color highlighted div.
I tried to style .dropdown-toggle class but it overrides default style only. Any solution?
.dropdown-toggle{
background-color: #FF5722;
border-color: #FF5722;
}
Jsfiddle
You can do it directly in style. ex:
<b-form-select
options="[1, 2, 3]"
style="background: red">
</b-form-select>
or create a class...
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropleft</span>
In the place of btn btn-secondary change button classes like danger,primary, etc.... for more information follow this link
https://getbootstrap.com/docs/4.0/components/dropdowns/
I have a JSFiddle here: https://jsfiddle.net/cwgofr84/1/
with the following html:
<div class="container">
<h3>Tooltip Example</h3>
<button class="btn btn-default" data-toggle="tooltip" title="Hover 1">Hover over me 1</button>
<button class="btn btn-primary" data-toggle="tooltip" title="Hover 2">Hover over me 2</button>
<button class="btn btn-info" data-toggle="tooltip" title="Hover 3">Hover over me 3</button>
</div>
where I have three buttons, if I drag one of the buttons so the tooltip displays and then drop and then hover over a different button, it doesn't hide the first tooltip and displays the second. like so:
Is there a way to stop this from happening?
please change your script to:
$('[data-toggle="tooltip"]').tooltip({
trigger : 'hover'
});
I am trying to replace the top-left Menu word so that the hamburger shown at the bottom of the jFiddle there in place of the word.
If you currently click on the word Menu you'll see it animates the hamburger and drops down the menu.
Can anyone amend jFiddle so that the hamburger image is top-left and when clicked it drops down the menu (and let me know what changes were made)?
<div class="dropdown dropdownMenu">
<button class="btn btn-link dropdown-toggle menu1 btnMenu" type="button" data-toggle="dropdown">
You are almost there
try to replace your Menu button Code
<button class="btn btn-link dropdown-toggle menu1 btnMenu" type="button" data-toggle="dropdown">
Menu <span class="caret"></span>
</button>
with the bottom hamburgercode with slight modification
<button class="c-hamburger c-hamburger--htla" id='btSwitch'>
<span>toggle menu</span>
</button>
so after replacing this will be looks like this
<button class="c-hamburger c-hamburger--htla" id='btSwitch' type="button" data-toggle="dropdown">
<span ></span>
</button>
So i changed the Class to c-hamburger c-hamburger--htla and added the id btSwitch
here is the working fiddle
The above image shows my attempt at creating my own "light-weight" Bootstrap-looking ComboBox control with ASP.NET textbox.
The input group shown above which consists of a texbox and button (with black arrow) looks funny. Has anyone experienced this before? Any ideas as to why it looks that way? Any recommendations to fix this?
I am not doing anything fancy here. The mechanism that "appends" a button to a textbox is supported by Bootstrap.
ASPX Page:
<div class="col-sm-3" id="TimesheetStep"><b>Timesheet Date</b>
<div class="input-group">
<asp:TextBox runat="server" ID="TimesheetBox" CssClass="form-control">
</asp:TextBox>
<div class="input-group-btn">
<button type="button" class="btn btn-inverse dropdown-toggle"
data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul id="demolist" class="dropdown-menu scrollable-menu pull-right"
runat="server" role="menu">
<li>11/22/2013</li>
<li>11/15/2013</li>
<li>11/08/2013</li>
</ul>
</div>
</div>
</div>
CSS:
.scrollable-menu { height: auto; max-height: 300px; overflow-x: hidden; }
I figured it out:
With this HTML:
<button type="button" class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
You get:
But with the following HTML examples:
<button type="button" class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
OR
<button type="button" class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">
Action<span class="caret"></span>
</button>
You get (respectively):
So it looks like you need to add a word (e.g., Action) OR just put an HTML space (e.g., )before <span class="caret"></span>. I hope this helps someone.
This is a common problem in Twitter Bootstrap.
The "computed" CSS height of the input field is different than that of the actual button.
Open your "developer tools" on your browser, and inspect the element styles, then find where it is overwritten | OR - fix the bootstrap CSS of the drop-down button, append: !important so it cannot be overridden.
Bootstrap Button Link Not Working see code below:
<ul>
<li>
<a href="home.aspx?Id=146">
<button class="btn btn-primary btn">Button Link</button>
</a>
</li>
</ul>
I use firebug for development, is there an easy place to see what javascript events are attached and to which objects such as this button class? find it hard to debug as don't know what code is being called and on what events for bootstrap and other external js files
Or, you can just use a link which looks like a button..
Button Link
Remove a tag and add window.location.href to button onclick
<button class="btn btn-primary btn"
onclick="window.location.href='home.aspx?Id=146'; return false;">
Button Link
</button>