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
Related
In my Angular program, I want to display a string of text that says what the button does whenever you hover over the button.
How do I do this?
My mouse is hovering over the google button.
Here's my html code for one of my buttons if it helps:
<button [disabled]="!isDisabled" name="enable" class="btn btn-default btn-margin" (click)="toggleDisabled()"><i class="fa fa-pencil" aria-hidden="true"></i></button>
You can use title
<button [disabled]="!isDisabled" name="enable" class="btn btn-default btn-margin" (click)="toggleDisabled()" title="Something"><i class="fa fa-pencil" aria-hidden="true"></i></button>
did you try the title attribute?
title="hello world"
example here
http://w3schools.com/tags/tryit.asp?filename=tryhtml5_global_title
add
title="my tooltip text"
or
[title]="aPropertyWithTooltipContent"
see also tooltips for Button
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 have a button which on clicked shows a dropdown we are using bootstrap to show the dropdown on button click below is my code.
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
Dropdown Example
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
The requirement is that I have to show a div pop up stating system error which will occur only when the button click is not working.
How to check if button click is working or not and show pop up.
The above code is a sample code from w3schools
my main code is written in angularjs and I am using angualar-ui-bootstrap for the drop down. the list values are also coming from the controller.
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>
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.