I am trying to show only the active tab in md-tabs on mobile view. I want the tab to be centered, and when I user swipes left or right, the tab title changes with the next or previous (somehow should be 100% width). Is this possible?
I have my tabs set up like this:
<md-toolbar>
<md-tabs md-swipe-content="true" md-selected="selectedDayIndex">
<md-tab ng-repeat="day in days | orderBy:predicate:reversed" md-on-select="openDay(day)"><p class="currentDay">{{day.day}}</p></md-tab>
</md-tabs>
</md-toolbar>
<md-content layout-padding>
<ng-switch on="selectedDay" class="tabpanel-container">
<div>
<p>{{selectedDayInfo.day}}</p>
</div>
</ng-switch>
</md-content>
Please see the following Plunkr: http://plnkr.co/edit/FQzOFEZLi6ReAuJninxA?p=preview
I would play around with 'hide' attributes - https://material.angularjs.org/latest/layout/options.
Also it would be fairly easy (without looking at your code) to just create logic that would detect screen size and from there just to create different DOM elements based on that (ng-show etc.).
Related
I am trying to get my ChromeVox screen reader to read the bubble message that pops up when the user tabs over to the tooltip icon, but it doesn't and the documentation out there is not very clear on what I thought should have been a simple solution.
this is the code in the file I am trying to refactor to get the screen reader to read the tooltip:
<div class="sub-item content-spaced">
<span class="text" tabindex="0">{{translations.taxEstLabel}}</span>
{{#hasEstimatedTax}}
<span class="value" tabindex="0">{{totalEstimatedTax}}</span>
{{/hasEstimatedTax}}
{{^hasEstimatedTax}}
<div class="tooltip" role="tooltip" tabindex="0" data-info-text="{{translations.taxEstMessage}}"></div>
{{/hasEstimatedTax}}
</div>
This is a Handlebarjs template by the way.
I'm not familiar with Handlebarjs but your <div> that's a tooltip doesn't appear to have any text between the <div> and </div>. Is the text injected in between when the div receives focus? If text is inserted, I'm guessing when the div receives focus, the screen reader will announce what's in currently in the div (which is nothing), and then your js code runs that injects the text.
If this is how it works, then you can add aria-live="polite" to the div. That will allow the screen reader to read any text changes in the div.
<div aria-live="polite" class="tooltip" role="tooltip" tabindex="0" data-info-text="{{translations.taxEstMessage}}"></div>
As a side question, why do your <span> and <div> elements have tabindex="0"? I know tabindex will allow the keyboard focus to move to the element, but generally you shouldn't set tabindex on a non-interactive element. If you added tabindex for the sole purpose of allowing a screen reader to tab to the text so that they can hear it being read, that's not necessary. Screen reader users can navigate to every element in the DOM using various screen reader shortcut keys, such as 'H' to go to the next heading, 'T' to go to the next table, 'L' to go to the next list, etc. If your html is using semantic elements such as <h2>, <table>, and <ul>, then your code will work great with a screen reader.
I am using angularjs material tabs https://material.angularjs.org/latest/demo/tabs .
Firstly, how to set the color for the left and right arrows?
<md-toolbar >
<div class="md-toolbar-tools tb">
<md-tabs class="tab">
<md-tab ng-repeat = "item in toDoList track by $index" label="{{item.name}}" >
</md-tab>
</md-tabs>
</div>
</md-toolbar>
For example, set the color of the arrows from white to other colors(like red) in the image and fiddle below
jsfiddle 1
Next, how to make the arrows always visible? In the image and jsfiddle below, if there is no tab overflow, the left and right arrows will not appear.
jsfiddle 2
Lastly, is there any formal/specific name for the left and right arrows, like pagination arrow? Because I can't find much related topic about the md-tabs arrow, maybe I used the incorrect keyword for the arrow.
For arrows color you can use this rule :
md-toolbar:not(.md-menu-toolbar) md-icon{
fill:red;
}
jsfiddle 1
But to make them always visible, I don't think it's possible unless you modify the Angular Material source code
Like this one http://vadikom.github.io/smartmenus/src/demo/ but vertical and Bootstrap-style? I am not so good in css to remake it to Bootstrap style (too much css code).
Thanks
Just add data-hover="dropdown" where you'd put data-toggle="collapse".
Update: Sorry I did not understand when you said vertical but now I think I do. So the below will give you a horizontal collapse but you can use that as part of your vertical menu.
You would need to create two tables. One table holds all your buttons/links and the other collapses and un-collapses the panel. For example if you have 10 buttons on the left hand table (10 rows , 1 col). You would have 10 collapsible panels in the right hand-side table which would give the impression of a vertical menu. At least that's how I would attempt it :)
http://www.w3schools.com/bootstrap/bootstrap_ref_js_collapse.asp
<button class="btn" data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Some text..
</div>
I am trying to make table or grid view in ionic framework.I am able to make that table but It is not looking same what I am required please check my table view in image .
here is my code .Actually I have also header "Invoice#" and "account Name" they should become background gray .Actually I saw if we take two column in row it take 50% 50% width of window .But when there is 3 column column take 33.33 % width But in my case they are not able to take where I am doing wrong Actually I am generating column dynamically Now it is two but may be later five .I need they will take equal space of total width .is this possible to add "+" in last column ?
here is code
<div class="row">
<div ng-repeat="d in data | filter:{checked: true}">
<div class="col">{{d.label}}</div>
<div class="row" ng-repeat="column in displayData">
<div class="col" ng-repeat="field in column.columns" ng-show="d.fieldNameOrPath==field.fieldNameOrPath">{{field.value}}</div>
</div>
</div>
</div>
http://plnkr.co/edit/X0PQov1UA2yEbx8qaOFl?p=preview
Here's a working version of your Plunker. To see the columns added and removed, click the gear icon in the header right.
Plunker
To get your grid to layout properly, you can't nest your repeats. That means you have to slightly change your ng-show to observe the checked values on the data model directly.
In it's most basic form, it would look like this:
<div class="row">
<div class="col" ng-repeat="d in data | filter:{checked: true}">{{d.label}}</div>
</div>
<div class="row" ng-repeat="column in displayData | filter: query">
<div class="col" ng-repeat="field in column.columns" ng-show="data[$index].checked && data[$index].fieldNameOrPath===field.fieldNameOrPath">{{field.value}}</div>
</div>
You'll notice that Ionic automatically handles making the grid full width and when properly laid out, it will automatically evenly space your columns. That's because it uses flexbox. That also allows you to tell specific columns how much space they should use. The remaining columns will naturally even distribute to take up the rest of the space. In the demo, I added a column for the gear and the details buttons and gave them col-10 class. This will force these columns to take up 10% of the screen width. For more on how the grid works in Ionic read the docs here.
I also noted that you seemed to have lots of functions where you're trying to do things like manage how the checked values are updated. Stop doing that. That's the beauty of AngularJS and the ng-model directive. If the property doesn't exist on the scope, Angular just creates it for you, and if it does exist, it just updates it. For example, notice how simply I made your search work by setting the ng-model value and passing that to the filter. I didn't have to create a $scope.query because ngModel does that for me. Similarly, I removed all of the functions and references to the 'checked' values from your controller and everything just works because ngModel automatically adds the checked property to the data model.
I have an audio clip that plays through once and then the 'Play' button is disabled so that it can't be played again. The only problem is the scrollbar is clickable so that the user can go back to the beginning or forwards which is not the desired process as they should only be able to play it once.
Is there a way of preventing a user from clicking on the blue progress bar as per the image below?
Thanks
There is a div on top of the progressbar with the the class "jp-seek-bar".
It is this div which makes the progressbar scrollable.
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
So you simply need to remove this div. The progress itself will still be visible.
<div class="jp-progress">
<div class="jp-play-bar"></div>
</div>
Another solution is to unbind the event-listener binded to the jp-seek-bar div.