So I am following the Twitter Bootstrap documentation and am trying to implement a simple dropdown <a> link with some extra attributes thrown at it in my .navbar (cf. http://getbootstrap.com/components/#navbar-default)
The line in the documentation is:
Dropdown <span class="caret"></span>
Which I translated in Rails as :
=link_to who_we_are_path, class:'dropdown-toggle', role:'button', 'aria-expanded' =>'false', data:{toggle: 'dropdown'} do
Who We Are
%span.caret
Which generates the following HTML:
<a aria-expanded="false" class="dropdown=toggle" data-toggle="dropdown" href="/who_we_are" role"button">
"Who We Are"
<span class="caret"></span>
</a>
Which looks totally valid. However, when I click the text "Who We Are" in the DOM, it does not actually go to the /who_we_are path, however when I do a mouse hover over the text I see in the bottom left of my browser I see 0.0.0.0:3000/who_we_are.
That's Because, Role of dropdown is to load Menu Item, Bootstrap prevents Defaults for dropdowns and Shows up a menu. You should add your link inside the Menu or you have to Override Bootstraps defaults.
see http://getbootstrap.com/components/#dropdowns
Try this one
%div.dropdown
=link_to "#", class:'dropdown-toggle', role:'button', 'aria-expanded' =>'false', data:{toggle: 'dropdown'} do
Load Menu
%span.caret
%ul.dropdown-menu{role:"menu"}
%li=link_to "Who We Are", who_we_are_path
Related
I have a bootstrap dropdown menu. When I choose an item from the dropdown menu, the text of the button is changed to the text value of the choosen item (implemented by the help of this answer: https://stackoverflow.com/a/60029507/7061548).
I have to reload the window whenever an item from the dropdown menu has been chosen because I update the sessionstorage. This works fine after page reload. But I have a problem before reload. As soon as I click on an item from the dropdown menu, the menu button becomes fully green and the button text disappears just before the page is reloaded.
I found out that if I remove the class "btn-outline-success" from the button the problem seems to be gone. I have tried to apply css styles on various elements but didn't succeed in solving the problem.
Here is my code:
HTML:
<div class="m-dropdown">
<button type="button" class="btn btn-outline-succes m-btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true">
{{selectedColor}}
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#" (click)="setColorGreen('Green')">Green</a>
<a class="dropdown-item" href="#" (click)="setColorBlue('Blue')">Blue</a>
</div>
</div>
TS:
...
selectedColor: string;
ngOnInit() {
this.selectedColor = "Green";
}
setColorGreen(color: string) {
this.selectedColor = "Green";
...
window.location.reload();
}
setColorBlue(color: string) {
this.selectedColor = "Blue";
...
window.location.reload();
}
...
As soon as I click on an item from the dropdown menu, the menu button becomes fully green and the button text disappears just before the page is reloaded.
When you click the button Bootstrap fires some JS to trigger the dropdown.
It's using the .dropdown-toggle class and the data-toggle="dropdown":
<button type="button" class="btn btn-outline-succes m-btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true">
I'm guessing that Bootstrap is marking the button as disabled so it can prevent double-clicks. And I'm guessing that the style change you're seeing is a result of some class changes that Bootstrap is making in JS as part of the button's click function.
If you have any defined CSS on the button, it could be conflicting with what Bootstrap is trying to do.
See the effect of clicking on a button on Bootstrap's docs page. Does your change look at all familiar?
You can further test this in Chrome DevTools by looking at what fires when you click the button. Then put a breakpoint there and click the button.
Or you can use DevTools to force element state on the button to see what happens in different states (:active, :hover, etc).
Here's the HTML:
<div class="dropdown">
<button class="btn dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><input type="checkbox" checked="checked" onclick="return false"/></button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#"><input type="checkbox" onclick="return false" disabled="disabled"/></a>
<a class="dropdown-item" href="#"><input type="checkbox" onclick="return false"/></a>
<a class="dropdown-item" href="#"><input type="checkbox" checked onclick="return false"/></a>
</div>
</div>
Basically it's a Bootstrap dropdown example.
I need this to a table column filter, to be able to filter either by true, false, or no filter.
Never mind the JS logic here.
the checkboxes are "presentation only" - they should not function as checkboxes, they serve as checkbox symbols. I don't have time and resources to provide vector graphics / specialized fonts here. I want that as simple as possible. Paste that into JSFiddle and include Bootstrap to see how it looks.
all checkboxes must be displayed correctly on modern desktop and mobile browsers
It should not break anything.
The Visual Studio however warns me about input inside a button. I know, it's against HTML standard, but I tested it on Edge, Chrome and FireFox and it works. Is there a catch here?
I know, a checkbox (or any other input) BEHAVIOR inside a button element is undefined. But if I don't want them to function, just display - it should be OK? Well, I even taken care about the undefined behavior: if one browser decided to allow checkbox to function inside the button, I explicitly set onclick attribute to just return false.
So, would you leave it or not? Is there a better way to present such filter? Maybe a free web-font playing nice with Bootstrap? A web-font having symbols like checked box, unchecked box, star or any other symbol representing "I don't care if checked".
No, you shouldn't ignore the warning. It's invalid HTML to place interactive elements (such as <input> elements) inside of <a> links or <button> elements, and creates accessibility issues.
Some additional considerations:
Are your dropdown menu items acting like checkboxes? If a user clicks one, does the state of the checkbox change? If so, you should use <input type="checkbox"> elements instead of links.
Conversely, if your dropdown menu items are acting like links (taking the user to new content), you shouldn't make them visually look like checkboxes.
If you do find a semantically justifiable reason for needing <a> links or <button> elements that look like checkboxes, you should use an <img> for the box part of the checkbox instead of co-opting another element that isn't semantically appropriate.
I am trying to develop a dropdown data toggle, that can be used to open a dropdown-menu but simultaneously allows the user to click a link.
Currently, the link can only be opened via right-click "open in new tab". However, a left-click on the link always opens the dropdown, even though the browser recognizes the target of my link properly (I can see the target url in the bottom left of my browser).
I Already tried split-buttons, but their layout is not flexible enough.
Basically, I need one button (dropdown-toggle) with two lines.
The first line is an anchor with a link name and an url.
The second line is the actual label of the button.
(Background: When the user selects a new item from the dropdown, the displayed link and button label are updated by angular.)
<div class="btn dropdown-toggle" data-toggle="dropdown">
<a href="{{someUrl}}" class="button-link">
{{link name}}
</a>
<div class="button-label">
{{label}}
</div>
</div>
<ul class="dropdown-menu">
<li ng-repeat="item in items"> item </li>
</ul>
Expected result:
* If the user clicks on the link, I would like to load the linked page.
* If the user clicks somewhere else on the button (no matter whether its first or second line), I would like to open the dropdown menu.
However, a left-click on the link always opens the dropdown,
The <a> tag needs a click handler that stops propagation of the click:
<div class="btn dropdown-toggle" data-toggle="dropdown">
<a href="{{someUrl}}" class="button-link" ng-click="$event.stopPropagation()">
{{linkName}}
</a>
<div class="button-label">
{{label}}
</div>
</div>
This will prevent the click from bubbling to the <div> element that opens the dropdown.
For more information, see
MDN Web API Reference - Event.stopPropagation()
I am working with Semantic UI in a rails project and wanted to create a dropdown menu with items that would link to other view pages. Most of the problems i've seen with the dropdown stemmed from users not initializing the dropdown menu which I was able to do.
Here's my code:
<div class="ui floating dropdown button">
Course<i class="dropdown icon"></i>
<div class="menu">
<% #topics.each { |topic| %>
<a class="item" href="articles/<%= topic.id %>">
<span class="text"> <%= topic.name %></span>
</a>
<% } %>
</div>
</div>
Different things i've tried:
Creating a separate hardcoded links / a tags like <a href="articles/4"> outside of the dropdown menu. This creates a working link and directs me to the article show view page with the id of 4.
Changed the wrapping 's class as "ui floating dropdown item" as well
I've also looked up other users' posts that shows they have the same exact problem. But when i try their solution, my dropdown menu items still do not work and i'm not sure what i'm doing wrong. Here are their posts:
https://github.com/Semantic-Org/Semantic-UI/issues/3234
https://github.com/Semantic-Org/Semantic-UI/issues/453
The two most important things seem to be:
Not putting the dropdown class definition as part of an anchor tag (inserting an anchor tag inside an anchor tag in the dropdown menu)
Not surrounding each anchor tags with their own <div class="items"> tags but to integrate them into one line like <a class="item" href="#"> # </a>
Can anyone help me understand what i might be overlooking? Let me know if i left out any critical information, would love to update the post with the relevant data right away, thank you!
After doing more and more research, I came to the conclusion that the links were not working in my semantic-ui dropdown menu because of some code, most likely Javascript, that i had inserted before.
Of course, i ruled this way out of the realm of possibility because there was no way i would forget about such code but i decided to go through all of my .js files just in case.
Lo and behold, i had a jQuery selector return false when a .item was being clicked...
I felt really silly and i didnt want to believe it at first but if you're having this problem and you've checked everything else like i have, it's probably your javascript!
I am trying to change the Login Partial that comes by default with an MVC Asp app to a button and moved to the right of my navigation bar (I am using twitter bootstrap). I would essentially like my button to look like one of the examples (not there any more it seems with v2.1 of bootstap) that are shown on the site with a person silohette and as a button on the right. I am not sure if anyone knows what I am talking about?
My HTMLPartial is as follows:
#If Request.IsAuthenticated Then
#<text>Welcome <strong>#User.Identity.Name</strong>!
#Html.ActionLink("Log Off", "LogOff", "Account")</text>
Else
#:#Html.ActionLink("Log On", "LogOn", "Account")
End If
And the portion of my view that this relates to is:
<!-- Menu for Reporting -->
<li class="pull-right">#Html.Partial("_LogOnPartial")</li>
As you can see I have tried to implement the pull-right in class but it has no effect. I have also in my partial changed:
#Html.ActionLink("Log On", "LogOn", "Account")
to
#Html.ActionLink("Log On", "LogOn", "Account", New With {.class = "btn"})
But this yields a very over sized button with a strange behaviour and the name when logged in etc is not in the button (rather it shows above it).
you shouldn't use pull-right with li tag.
This should be done with div. you must put your code in to the following html and then youll be fine!
<div class="btn-group pull-right">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">$Account</a><span class="caret"></span>
<ul class="dropdown-menu"><li>whatever you like</li><li>whatever you like</li></ul>
</div>
hope this will help :)