I'm using the bootstrap dropdown component, which for me currently looks like this:
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" id="btnSaukList" data-toggle="dropdown" runat="server" style="width: 100%">
Select a Saukville contact
<span class="caret"></span>
</button>
<ul id="ulSaukContact" class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" runat="server" style="width: 100%">
<!--NOTE: Intentionally left blank; li's are generated by code behind to populate users from Sharepoint.-->
</ul>
<input id="inpSaukValue" type="hidden" />
</div>
(default code sample here - as you can see, mine isn't that different structurally)
My problem is that every time I click a dropdown item, a postback is fired (browser jumps to the top of the page). I'm pretty sure this is because the default code Bootstrap uses is <button> which always includes a postback.
According to other SO articles regarding this issue, it's recommended to use an <input> or <asp:Button> instead. Well I can't do either...
<asp:Button> does not support text between the opening and closing tags.
<input> does not support the data-toggle attribute, which it seems the dropdown needs.
I've also tried adding onclick="return false;" to my <button> to no avail.
I'm new to bootstrap and to an extent, ASP.net.
UPDATE:
It wasn't a postback, it was a link to "#", I was confused, sorry!
I think I was confused about this one, and labelled the problem as a postback - it wasn't. In Bootstrap's default code snippet, every dropdown item includes a link to "#". Clicking a link to that(<a href="#">) will send the browser to the top of the page. I thought this was a page refresh but it wasn't actually refreshed.
A quick fix is to replace href="#" with href="Javascript:;". If anyone has a better solution, do share...
Related
Hello I am trying to get a bootstrap dropdown to show the list inside a model. I guess what I am saying is that when i click the dropdown it expands but if the list is longer than the model it will then cut off the rest of the list causing a user not to be able to select all of the options.
I have been googling this and saw this post Click Here which is very similar to my issue. However, they say to set overflow:visible; on the parent element, which does allow the dropdown to show. My problem is that when I set that, the table extends out of the modal.
Now, My question: Is there away that I can only show the overflow on the dropdown and not the table?
without posting a ton of code in here this is what html and css looks like:
HTML:
<div class="my-grid">
<table class="table table-responsive">
<thead><tr><th>Choose One</th></tr></thead>
<tbody>
<tr>
<td>
<div class="dropdown">
<button class="form-control btn btn-default btn-toggle" data-toggle="dropdown" id="dropDownControl" type="button">
<div class="show-text">a</div>
<span>Some Chosen Value here</span>
</button>
<ul aria-labelledby="dropDownControl" class="dropdown-menu">
<li><a>a</a></li>
<li><a>a</a></li>
<li><a>a</a></li>
<li><a>a</a></li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</div>
css
.my-grid{
overflow:auto;
height:300px;
}
You have the same problem as in: Bootstrap dropdown clipped by overflow:hidden container, how to change the container?. The accepted answer will make the dropdown show outside the container, so the overflow will not matter any more.
Further hurdle may be that now the dropdown won't be shown at all since it is behind the modal dialog.
In that case, change your html to set the z-index explicitly (or handle it in the event script):
<ul aria-labelledby="dropDownControl" class="dropdown-menu" style="z-index:1000;">
If you are using AngularJS, you can use uib-bootstrap and the uib-dropdown control to append to body automatically (with "dropdown-append-to-body" attribute), but you still have to handle the z-index explicitly.
I am having issues formatting my drop down list. Code is as follows.
<div class="row" id="row02">
<div class="dropdown" id="meters-toggle-container">
<button class="btn btn-default dropdown-toggle" type="button" id="metter-dropdown-btn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Meters
<span class="caret"></span>
</button>
<ul class="dropdown-menu" id="meters-dropdown-ul" aria-labelledby ="metter-dropdown-btn">"></ul>
</div>
</div>
List Items are appended via Jquery depending upon an ajax request/response.
var html = "<li><a href='#'>" + meterNumber + "</a></li>"
$("#meters-dropdown-ul").append(html);
After reviewing several css options I have found one that seems to control the width of the drop down how I would like it. I am having dificulty of 1) containing the drop down inside of its row parent and 2) setting the menue to overflow so that it can be scrolled through.
As you can see in the picture bellow. The dropdown menu not onlyy runs past its parents boundaries about 50% of the page but runs off the page as well not allowing to view whats beyond.
I have this simple thing to do in angularjs that require a bit of dom manipulation, and i think it suppose to be a directive of some kind but i have no idea how to approach it.
I have this simple button: (html)
<button class="btn btn-success" style='margin-bottom:17px' style='margin-right:5px;' ng-show='pageToShow < pages.length-1' ng-click='changePage("next")'>
<span class="glyphicon glyphicon-arrow-right" style='margin-right:5px' aria-hidden="true"></span>Next
</button>
When i click it, i want inside of it, instead! of the glyphicon, a moving gif, like this:
1) How to remove the already existing img inside of the button and replace it?
2) I want to have other types of spinners, not the rounded one, how can i change the default spinner?
How can i do so?
Check out this directive, it does exactly what you want:
(offine)
And a demo:
(offline)
You can change the classes of the button-prepend="" and spinner-icon="" to a css-class that defines your own spinners/gifs.
You can create your own loading gif with http://www.ajaxload.info. Then, use ng-show to determine if the gif or icon should be visible.
<button ng-click="loading = !loading;" class="btn btn-success">
<img ng-show="loading" src='http://i.imgur.com/1HDbs9b.gif' />
<span ng-show="!loading" class="glyphicon glyphicon-arrow-right"></span>
Next
</button>
http://plnkr.co/edit/6N4x5bZyiilV2GMqCP48?p=preview
I have radio buttons that are styled to look like bootstrap toggle buttons, as follows:
<h:panelGroup>
<div id="sortButtons" class="btn-group" data-toggle="buttons-radio">
<h:commandButton type="button" styleClass="btn btn-inverse active" value="Price"><f:ajax listener="#{searchResultsRoundtripBean.sortByPrice}"/></h:commandButton>
<h:commandButton type="button" styleClass="btn btn-inverse" value="Departure"><f:ajax listener="#{searchResultsRoundtripBean.sortByTime}"/></h:commandButton>
</div>
</h:panelGroup>
The styling looks fine, here's an image of it: http://imgur.com/W1ewjCA
The problem, however, is that clicking the buttons does not toggle them. The event hooked up to them fires, but they are not toggled. Am I doing something silly here, or is there some caveat that I'm not aware of?
You need to add the render attribute to your ajax tag. It defaults to 'none'. #this should probably fix your situation.
<f:ajax render="#this" listener="..." />
http://www.jsftoolbox.com/documentation/help/12-TagReference/core/f_ajax.html
edit:
#this is most likely not what your looking for, but instead #form or the container id where the list you sort is located.
When I hover over a button and the tooltip appears, the buttons jump. If I disable the tooltip, it does not jump. Additionally, the right button loses the rounded edges. How can I prevent this from happening?
<div class="btn-group">
<a rel="tooltip" class="btn" href="#" data-title="View Details"><i class="icon-list-alt"></i></a>
<a rel="tooltip" class="btn" href="#" data-title="Delete"><i class="icon-trash"> </i></a>
</div>
Javascript:
$('[rel=tooltip]').tooltip();
Working version...
http://jsfiddle.net/BA4zM/147/
Here is a website that has it working without the jumping...
http://wrapbootstrap.com/preview/WB005S479
To avoid the jump, you need to set the container attribute. This is documented.
When using tooltips and popovers with the Bootstrap input groups,
you'll have to set the container option to avoid
unwanted side effects.
Try the following:
$('[rel=tooltip]').tooltip({container: 'body'});
As Howie said at https://stackoverflow.com/a/14770263/7598367, it's necesary to add the 'container' to tooltip.
That didn't solve my issue (I had the same problem), it's also necesary to declare at JS file BEFORE the .tooltip() initilization, this way:
$('[data-toggle=tooltip]').tooltip({container: 'body'});
$('[data-toggle="tooltip"]').tooltip();
Hope this helps if somebody has the same problem in the future.