Due to implementation restrictions, I'm not allowed to add role="tab to the immediate children of the parent role="tablist" like in the following example:
<div role="tablist">
<div class="this-wrapper-must-be-here-and-I-cannot-add-dynamic-content">
<button role="tab" aria-setsize="2" aria-posinset="1">Tab 1</button>
</div>
<div class="this-wrapper-must-be-here-and-I-cannot-add-dynamic-content">
<button role="tab" aria-setsize="2" aria-posinset="2">Tab 2</button>
</div>
</div>
Voice Over speaks always "tab 1 of 1", because it can't refer to the far away parent with tablist. Is there a way to treat the button tag as immediate children of tablist?
Related
I have a navbar element. It has a navbar-dropdown element. I want to add a navbar-item with a sentence to it, but word transposition in navbar-item doesn't work.
How can I turn it back on? Here's the code for the navbar-dropdown element.
<div class="is-primary navbar-dropdown is-size-4 dropdown-width">
<div class="navbar-item">
Чтобы воспользоваться функционалом системы, пожалуйста, авторизируйтесь.
</div>
<div class="navbar-item">
<a
class="button is-light"
:class="{ 'is-hidden':$store.state.isAuth }"
#click="openModal"
>
Войти
</a>
</div>
</div>
The "dropdown-width" class sets a fixed width for the element.
I am using beercss and alpinejs I need did dropdown menu, but it's width is smaller than it's context.
<nav class="wrap">
<div class="tabs right-align">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
<a x-data="{ active: false }">
<button #click="active = !active">
<span>Login</span>
<div x-show="active" class="dropdown">
<a>
<label>Complementary text</label>
</a>
</div>
</button>
</a>
</div>
</nav>
How to fix it?
https://codepen.io/bubnenkoff/pen/VwMmEgb
Because your button is on the right, the dropdown disappears outside of the visible area. According to the docs you can use the class list "dropdown left no-wrap" to position the dropdown ("left") and have the width based on the content ("no-wrap").
I'm following this documentation cause I would like to create a
Gmail like 'search bar' where beside the input there's a dropdown button that opens a dropdown with filter options.
Unfortunately in the docs the examples don't cover the input + dropdown button scenario.
I started with this:
<!-- Search bar-->
<div class="input-group mb-3">
<input type="text" class="form-control">
<div class="input-group-append" ngbDropdown role="group" aria-label="Button group with nested dropdown">
<button class="btn btn-outline-success" ngbDropdownToggle></button>
<div class="dropdown-menu" ngbDropdownMenu>
<button class="dropdown-item">One</button>
<button class="dropdown-item">Two</button>
</div>
</div>
</div>
Everything is shown correctly, but the dropdown is not. It is opened under its parent (the button), while I'd like to have it for the whole length of the input. Pretty sure it could be solved with some CSS rule.
From the documentation under Manual Triggers, you could attach the dropdown menu to the input group and trigger the open/close with the appended button on click event.
<!-- Search bar-->
<div class="container">
<div class="input-group mb-3" #myDrop="ngbDropdown" ngbDropdown>
<input type="text" class="form-control" >
<div class="input-group-append" role="group" >
<button (click)="$event.stopPropagation(); myDrop.open();" class="btn btn-outline-success" >Hi</button>
</div>
<div class="dropdown-menu" ngbDropdownMenu>
<button class="dropdown-item">One</button>
<button class="dropdown-item">Two</button>
</div>
</div>
</div>
i want to have a radio buttons that acts as tab controller same as in below jsfiddle: http://jsfiddle.net/bizamajig/mju8gzwa/
i have created the same thing in jsp with with spring tag as below.i am facing null exception in getting the selected tab value in my controller.i want to know which tab selected and based on tab selection i will query different data.
how to get which tab is selected
enter code here
<div class="container">
<div class="row">
<div id="tab" class="btn-group" data- toggle="buttons">
<a href="#daily" class="btn btn-default
active" data-toggle="tab">
<form:radiobutton path="recurrence" value="d" />Daily</a>
<a href="#features" class="btn btn-default" data-toggle="tab">
<form:radiobutton path="recurrence" value="w" />Weekly</a>
<a href="#requests" class="btn btn-default" data-toggle="tab">
<form:radiobutton path="recurrence" value="m" />Monthly</a>
<a href="#contact" class="btn btn-default" data-toggle="tab">
<form:radiobutton path="recurrence" value="o" />Once</a>
</div>
<div class="tab-content">
<div class="tab-pane active" id="prices">Prices content</div>
<div class="tab-pane" id="features">Features Content</div>
<div class="tab-pane" id="requests">Requests Content</div>
<div class="tab-pane" id="contact">Contact Content</div>
</div>
</div>
</div>
someone please help to get this working?
You can know which tab is activated currently. Based on that you can query data.
Just add below code in your jfiddle's javascript/Jquery part.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var target = $(e.target).attr("href") // activated tab
$(target).show();
alert(target);
});
I am creating a side menu using bootstrap accordion collapse and making use of knockout js binding. My problem is in assigning the right HTML element ids for toggle and collapse purposes as required by bootstrap. I have though of using the $indexin knockout to autogenerate the id. But not coming right. See my code below and comments:
<div id="content" style="font-size: 8.8pt">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default" id="news">
<div class="panel-heading" role="tab" id="headingOne" data-bind="foreach: accordionItems()"><!--accordionItems is an observableArray with my accordion objects. Object has a header and a list of linkitems. Each linkItem object has linkText and url-->
<a style="text-decoration:none;" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"><!--want to do something like: href="#"+$index-->
<p class="panel-title" data-bind="text: nameHead"></p>
</a> <!--binding a collapse header here.-->
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"><!--want to autogenerate the id here using knockout for reference above-->
<ul class="Newsbar panel-body" data-bind="foreach: list">
<li><a data-bind="attr: { href: url }, text: linkText"></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
well i already done something like this before hope this helps
<div class="panel-heading" role="tab" id="headingOne" data-bind="foreach: accordionItems()">
<a style="text-decoration:none;" data-toggle="collapse" data-parent="#accordion" aria-expanded="true" aria-controls="collapseOne" data-bind="attr:{href:'#collapseOne'+$index() }" >
<p class="panel-title" data-bind="text: nameHead"></p>
</a> <!--binding a collapse header here.-->
<div class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne" data-bind="attr:{id:'collapseOne'+$index()}">
<ul class="Newsbar panel-body" data-bind="foreach: list">
<li><a data-bind="attr: { href: url }, text: linkText"></a></li>
</ul>
</div>
</div>
Let me explain here :
You just need to create dynamic id and href in oder to work with this stuff .
Well lucky you have one loop over if incase there exists multiple loops use $parentContext.index() and so on .
You just need to use attr to create dynamic id and href using $index() which gives you unique id everytime it loops .