I'm developing an app with Angular and Semantic-UI.
I have a dropdown menu like the following: https://plnkr.co/edit/BTCxfk
<div class="ui right labeled top pointing floating icon button dropdown">
<i class="icon folder open"></i>
<span class="text">Menu</span>
<div class="menu">
<div class="item" (click)="onClickItem()" *ngFor="#m of menu">
<i class="icon sign in"></i>
{{m}}
</div>
</div>
</div>
I would like to have that users can click on a single item using tab and enter buttons.
As you can see they can only move towards menu items, but they can't trigger the click event.
Any idea?
I would give this item a tab-index of 0 since most elements like this aren't tabbable by default.
<div class="ui right labeled top pointing floating icon button dropdown">
<i class="icon folder open"></i>
<span class="text" tabindex="0" role="menu">Menu</span>
<div class="menu">
<div class="item" (click)="onClickItem()" *ngFor="#m of menu">
<i class="icon sign in"></i>
{{m}}
</div>
</div>
</div>
I added tab index of 0 and role of menu.
Related
I have implemented an Offcanvas sidebar. It displays fine but none of the links in the sidebar actually work.
When I clicked on the links, nothing happens. I don't think I understand the mechanism well enough so any guidance here would be appreciated.
I'm using Laravel so this code is inside a view that is loaded for every page (like app.blade.php).
The sidebar works fine and can be properly toggled with the button but the links don't take me anywhere. What am I missing?
Here's the code. Link1 and Link2 are valid Laravel routes in my test app.
<body class="d-flex flex-column min-vh-100">
<a class="btn btn-primary float-end" data-bs-toggle="offcanvas" href="#offcanvas" role="button" aria-controls="offcanvas">
Toggle Menu
</a>
<nav class="offcanvas offcanvas-start show" tabindex="-1" id="offcanvas" data-bs-keyboard="false" data-bs-backdrop="true" data-bs-scroll="true">
<div class="offcanvas-header border-bottom">
<a href="/" class="d-flex align-items-center text-decoration-none offcanvas-title d-sm-block">
<h4>
My site
</h4>
</a>
</div>
<div class="offcanvas-body px-0" data-bs-target="experience-collapse" data-bs-toggle="collapse">
<ul class="list-unstyled ps-0">
<li class="mb-1">
<button
class="btn btn-toggle align-items-center rounded"
data-bs-toggle="collapse"
data-bs-target="#experience-collapse"
aria-expanded="true"
aria-controls="experience-collapse"
>
<i class="bi bi-list-ol"></i> Links
</button>
<div class="collapse show" id="experience-collapse" style="">
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
<li><i class="bi bi-arrow-down-up"></i> Link 1</li>
<li><i class="bi bi-search"></i> Link2</li>
</ul>
</div>
</li>
</ul>
</div>
</nav>
</body>
Semantic-ui is integrated with my laravel app. All buttons are working but Menubar is not working i.e whatever code I copied from documentation it is showing like that only.
I have linked these files -
<link rel="stylesheet" type="text/css" href="{{asset('semantic/dist/semantic.min.css')}}">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="{{asset('semantic/dist/semantic.min.js')}}"></script>
<div class="ui secondary menu">
<a class="active item"> Home </a>
<a class="item"> Messages </a>
<a class="item"> Friends </a>
<div class="right menu">
<div class="item">
<div class="ui icon input">
<input type="text" placeholder="Search...">
<i class="search link icon"></i>
</div>
</div>
<a class="ui item"> Logout </a>
</div>
By default Home is active but when i click or focus on another item i.e messages or Friends , it is not showing as active otherwise hovering effect is working fine.
As you see, only the first menu item is marked as active in your code, so why do you expect any other menu items to be marked as active when you click on them?
<a class="active item"> Home </a>
You should detect which menu item is active when you render the menu and set active class to the necessary item.
So, for example, when you are on "Home" page your menu should look like this:
<a class="active item"> Home </a>
<a class="item"> Messages </a>
<a class="item"> Friends </a>
But when your are on the "Friends" page your menu should look like this instead:
<a class="item"> Home </a>
<a class="item"> Messages </a>
<a class="active item"> Friends </a>
And everything else depends on your implementation (either it's PHP or other server-side language if you generate your menu or JavaScript if you toggle its state in the browser).
Hyperlink in navbar dropdown doesn't seem to work.Even the "disabled" doesn't seem to work.
Here is my code
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="dropdown">
<a class="dropdown-toggle disabled"
data-toggle="dropdown" href="http://www.google.com"> Link
<b class="caret"></b> </a>
<ul class="dropdown-menu">
<li>menu1</li>
<li>menu2</li></ul>
</li>
</ul>
</div>
</div>
</div>
Clicking the link where you have set Google as the link won't take you to that link as the click action on that link opens/closes the dropdown menu.
If you put a link on another anchor tag you'll see that those will work fine.
I'm putting up a Bootstrap "split button" modal, which looks something like this:
<div class="btn-group">
<button class="btn btn-small btn-primary">
<a tabindex="-1" href="#" class="ajax-modal"
data-target="modal_vr-comment-form" data-backdrop="true"
data-controls-modal="res-modal" data-keyboard="true"
url="/some-url">Do the thing</a>
</button>
<button class="btn btn-small dropdown-toggle btn-primary" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu pull-right">
<li><a tabindex="-1" href="#" class="ajax-modal"
data-target="modal_vr-comment-form" data-backdrop="true"
data-controls-modal="res-modal" data-keyboard="true"
url="/some-url">Do the thing</a></li>
<li><a tabindex="-1" href="/comment/something-else">Do something else</a></li>
<li><a tabindex="-1" href="#" class="ajax-modal"
data-target="modal_unhide-people" data-backdrop="true"
data-controls-modal="res-modal" data-keyboard="true"
url="/comment/do-another-thing">Do another thing...</a></li>
</ul>
</div>
The thing of interest here is that the "Do the thing" action is presented in two ways: As an action to be taken when the main button is clicked, and as an action to be taken when an item in the dropdown menu is selected. These actions are set up as click handlers on the <a> tags in the split button, via some javascript init-ing.
Both actions work fine in Chrome and Safari. However, in Firefox, the action attached to the button does NOT fire, while the action attached to the link does. Some poking around during execution reveals that the click handler on the button is not firing, although it's definitely getting set up.
Any ideas out there about why this is (happening)? Thanks!
Found it, more or less: Twitter Bootstrap buttons are unresponsive in IE8 had a working approach. Instead of formatting the button as:
<button class="btn btn-small btn-primary">
<a tabindex="-1" href="#" class="ajax-modal"
data-target="modal_vr-comment-form" data-backdrop="true"
data-controls-modal="res-modal" data-keyboard="true"
url="/some-url">Do the thing</a>
</button>
do it as a pure <A> link with the appropriate button-style classes:
<a tabindex="-1" href="#" class=" btn btn-small btn-primary ajax-modal"
data-target="modal_vr-comment-form" data-backdrop="true"
data-controls-modal="res-modal" data-keyboard="true"
url="/some-url">Do the thing</a>
The appearance is identical, and it works fine in Firefox, IE, and Opera (both platforms). Whew.
I just had the same problem in 2019 (Bootstrap 4.3.1, Firefox Quantum 69.0) and found this post from 2011 that solved the problem for me: just remove the animation for the modal (remove the "fade" class from the parent div). Original post is here: http://chapter31.com/2011/10/27/twitter-bootstrap-modal-not-working-in-firefox/
<ul id="Group_00000000-0000-0000-0000-000000000001" class="xxxxxxxxx">
<li class="buttons">
<button class="button edit">Edit</button>
<button class="button addToOption">Add to option</button>
<button class="button removeFromOption" >Remove from option</button>
<button class="button addToGroup">Add to group</button>
<button class="button removeFromGroup">Remove from group</button>
</li>
<li class="content">
<div class="text">
<span id="Title_Of_The_Item" class="title"> QSE244</span>
<p class="description">A description about this item</p>
</div>
</li>
</ul>
<ul id="Group_00000000-0000-0000-0000-000000000002" class="xxxxxxxxx">
<li class="buttons">
<button class="button edit">Edit</button>
<button class="button addToOption">Add to option</button>
<button class="button removeFromOption" >Remove from option</button>
<button class="button addToGroup">Add to group</button>
<button class="button removeFromGroup">Remove from group</button>
</li>
<li class="content">
<div class="text">
<span id="Title_Of_The_Item" class="title"> QSE236 </span>
<p class="description">A description about this item</p>
</div>
</li>
</ul>
In the structure above I want to be able to click on the any button listed based on the titles like the QSE244 or QSE236 - ie clicking the corrosponding buttons. There is no point in using the id's Group_00000000-0000-0000-0000-000000000002 as they ll be replaced with dynamic GUIDs.
Since the only thing that differentiates these two blocks, and, presumably, many more like them, is the text of the <span class="title"> element, that's what you need to key off of. I'd try a locator something like this:
xpath=//ul[li[#class='content']/div/span[#class='title' and .='the_title_value']]/li[#class='buttons']/button[contains(#class, 'the_button_type']
which means "the button with class 'the_button_type' that is contained within the list with class 'buttons' which is contained within the unordered list that contains a list with class 'content' that contains a div that contains a span with class 'title' and the text 'the_title_value'. So you use the title value to locate the correct ul element, and then you navigate to the button from there.