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.
Related
I have tried the adding the Google search to my existing search bar to power it with no luck. Then I tried another bit of Javascript I found on the forums here and did place it directly after the form. Here is the existing code, but I do not have it working yet. Any suggestions would be appreciated. Thank you in advance.
<div class="navbar-collapse collapse right" id="search-not-mobile">
<button type="button" class="btn navbar-btn btn-primary" data-toggle="collapse" data-target="#search">
<span class="sr-only">Toggle search</span>
<i class="fa fa-search"></i>
</button>
</div>
</div>
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<span class="input-group-btn">
<button type="submit" class="btn btn-primary"><i class="fa fa-search"></i></button>
</span>
</div>
</form>
Use a handler like this one (w/ your own selectors):
$('button').click(function(ev){
location.href="search.html?q=":$("[type=text]").val();
});
Then, create search.html with a normal Google search box.
I have a bootstrap dropdown menu combined with a text input field that acts as an Angular filter. The code looks like this:
<form name="searchForm" role="form" data-ng-submit="goSearch()">
<div class="row">
<div class="col-xs-12">
<div class="form-group">
<div class="dropdown">
<input type="text" ng-click="load_origins()" name="dropdown-toggle" data-ng-model=origin_search placeholder="Ciudad Origen" class="btn btn-default search-menu-button dropdown-toggle" id="origin" data-toggle="dropdown" aria-haspopup="false" aria-expanded="false" required autocomplete="off">
<ul class="dropdown-menu dropdown-menu-right search-menu-items" aria-labelledby="origin">
<li><a href class= "search-menu-item" data-ng-repeat="origin in origins | filter:origin_search" data-ng-click="checkDestinations(origin)">{{origin.Localidad}}</a></li>
</ul>
</div>
</div>
</div>
</div>
</form>
The thing is that:
<input type="text" ng-click="load_origins()" name="dropdown-toggle" data-ng-model=origin_search placeholder="Ciudad Origen" class="btn btn-default search-menu-button dropdown-toggle" id="origin" data-toggle="dropdown" aria-haspopup="false" aria-expanded="false" required autocomplete="off">
is not working as intented in iOS, the keyboard appears but no text appears when the user tries to write.
For what I've been searching it can be related with a bug in iOS with that particular input type, but there was no solution that worked for my case.
Is it maybe a CSS related thing? (Maybe a Bootstrap bug: http://getbootstrap.com/browser-bugs/)
Or could it be re an Angular thing? Or maybe just an iOS problem?
Any help will be appreciated.
Thanks in advance.
Finally I opted to use a Typeahead of UI-Bootstrap mostly because it seemed a good option as it behaved the same way that the dropdown that I tried to implement, but without the troubles on iOS.
So, I didn't find out what was causing the problems, after some frustration it was a better option to change the directive.
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
I'm trying to stick a dropdown inside a popover (both bootstrap), and it 'sort of' works. The first popover I open works fine, but as soon as I open another one (from a different image) it stops working (take a look at this video to see what I mean).
In my HTML I'm making sure every dropdown has a different IDs (by binding my object ID, which is always different) since apparently that's what Bootstrap uses:
<div class="dropdown collection-selection-view">
<button class="btn btn-primary dropdown-toggle collection-dropdown" type="button" id="collection-dropdown-<%- id %>" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Choose or Create Collection
<span class="caret"></span>
</button>
<ul class="dropdown-menu user-collection-list" aria-labelledby="collection-dropdown-<%- id %>"></ul>
</div>
And they render with unique IDs alright.
Example #1:
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle collection-dropdown" type="button" id="collection-dropdown-40261" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Choose or Create Collection
<span class="caret"></span>
</button>
<ul class="dropdown-menu user-collection-list" aria-labelledby="collection-dropdown-40261">
<li>
Happy collection
</li>
<li>
Sad collection
</li>
</ul>
</div>
Example #2:
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle collection-dropdown" type="button" id="collection-dropdown-39935" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Choose or Create Collection
<span class="caret"></span>
</button>
<ul class="dropdown-menu user-collection-list" aria-labelledby="collection-dropdown-39935">
<li>
Happy collection
</li>
<li>
Sad collection
</li>
</ul>
</div>
But for some reason it still doesn't work... any ideas of what could be going on?
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>