I want to display a label <label> My Listview </label> just above a listview on the content div.
however the listview is not displayed properly, it goes above half of the label
<div data-role="content">
<label>My Listview</label>
<ul data-role="listview">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
Layout is not properly displayed, i'm using version 1.4.5, how to fix it ?
Add css for margin to bottom:
.ui-mobile label {
display: block;
margin: 0 0 1em 0; // you can change as you wish.
}
The not inset listview has a negative 1em margin. This allows it to reach the page edges by defeating any content padding. In your case, you just need to set the top margin to 0 (and possibly bottom margin too if you have controls below it):
.ui-content .ui-listview {
margin-top: 0;
}
You can also set data-inset="true" on the <ul> if you want that look.
Related
I have a submenu that I would like to have keyboard focus when I tab through it.
When you hover over the 'Design' item in the nav menu below a submenu appears, but how do I get the submenu to appear when I tab through the items using the keyboard tab key? The 'Design' list item doesn't seem to accept focus?
From what I understand this is done with focus:within pseudo class, but I can't get it to work?
Any assistance would be awesome.
CodePen: https://codepen.io/emilychews/pen/jOPRoqg
li {
margin: 1rem 0;
}
.design-submenu {
visibility: hidden;
opacity: 0;
}
.menu-item-2:hover .design-submenu,
.menu-item-2:focus-within > .design-submenu
{
visibility: visible;
opacity: 1;
}
<nav class="n">
<ul class="nav-menu-items">
<li class="menu-item menu-item-1">Latest</li>
<li class="menu-item menu-item-2">Design
<ul class="submenu design-submenu">
<li class="submenu-item">Illustration</li>
<li class="submenu-item">Graphic Design</li>
</ul>
</li>
<li class="menu-item menu-item-3">Development</li>
<li class="menu-item menu-item-4">Marketing</li>
</ul>
</nav>
For menu items to receive keyboard focus the tabindex attribute must
be set of the element if it is not a form control or link element. https://www.w3.org/WAI/GL/wiki/Using_ARIA_menus
Add tabindex="0" to "Design" item ==> Done :)
The tabindex global attribute indicates that its element can be
focused, and where it participates in sequential keyboard navigation
(usually with the Tab key, hence the name). https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
li {
margin: 1rem 0;
}
.design-submenu {
visibility: hidden;
opacity: 0;
}
.menu-item-2:hover .design-submenu,
.menu-item-2:focus-within > .design-submenu
{
visibility: visible;
opacity: 1;
}
<nav class="n">
<ul class="nav-menu-items">
<li class="menu-item menu-item-1">Latest</li>
<li class="menu-item menu-item-2"><span tabindex="0">Design</span>
<ul class="submenu design-submenu">
<li class="submenu-item">Illustration</li>
<li class="submenu-item">Graphic Design</li>
</ul>
</li>
<li class="menu-item menu-item-3">Development</li>
<li class="menu-item menu-item-4">Marketing</li>
</ul>
</nav>
focus:within not related specifically to Keyboard control accessibility (This is CSS pseudo-class). https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within
ARIA menu:
https://www.w3.org/WAI/GL/wiki/Using_ARIA_menus
I have the following html but this is making the button grow bigger in size. How to make the button not grow in height ?
<div fxLayout="row">
<h5>User Management</h5>
<span fxFlex></span>
<button mat-raised-button color="primary">Create</button>
</div>
Solution with fxLayoutAlign directive
The simplest way is to use the fxLayoutAlign directive on your div element as shown below.
<div fxLayout="row" fxLayoutAlign="center center">
...
</div>
Solution with CSS
The problem in your HTML template is that the h5 element is the tallest element and that all other elements in the row are laid out with same height. One possible solution is to remove the top and bottom margins from the h5 element using CSS.
h5 {
margin-top: 0;
margin-bottom: 0;
}
In case you have other h5 elements on the same page that must not be altered, you need to define a specific CSS class for the h5 element that appears in the flex row (it could be named "h5-inline").
.h5-inline {
margin-top: 0;
margin-bottom: 0;
}
The HTML template would then look like this.
<div fxLayout="row">
<h5 class="h5-inline">User Management</h5>
<span fxFlex></span>
<button mat-raised-button color="primary">Create</button>
</div>
I got an Angular Flex-Layout row which contains some buttons and a mat-button-toggle-group. Unfortunately, the mat-button-toggle-group is somewhat bigger than the buttons and I would like to have them all on the same height / line-height.
This is hot it looks currently:
Tried to meddle with the css classes of mat-button-toggle-group and others, but only got to so far as to reduce the button height while the content stayed the same.
<div fxLayout="row wrap" fxLayoutAlign="space-between end">
<div>
<div fxLayout="row wrap" fxLayoutAlign="space-between end">
<div class="control-buttons">
<button
mat-stroked-button
>
<i class="material-icons">skip_previous</i>
</button>
( more buttons )
</div>
</div>
<div>
<div fxLayout="row wrap" fxLayoutAlign="space-between end">
<mat-button-toggle-group multiple>
<mat-button-toggle
value="random"
>
<i class="material-icons">
shuffle
</i>
<span class="only-on-big-screen">
random
</span>
</mat-button-toggle>
( more buttons )
</mat-button-toggle-group>
</div>
</div>
</div>
Another workaround would be to do this:
.mat-button-toggle-group {
height: 32px;
align-items: center;
}
You can change the height by adding custom styles. You have to change the line-height of the class mat-button-toggle-label-content.
.mat-button-toggle-label-content {
line-height: 32px !important; <-- set you height here
}
What worked for me was reducing the line-height of the content and adjusting height of the buttons in a global style file.
.mat-button-toggle-button {
height: 2rem; // the modified height that I wanted.
}
.mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
line-height: 1rem; // default value is 48px. I wanted the height to be 2rem, but had to adjust this line-height to 1rem so that the icons were vertically centered.
}
I'm stuck trying to change the color of my expandable list after it's expanded. It only works for the default color "red" and after I expand it, it changes to grey instead of yellow like it should. Also, how would I change each list to a different color? For example A can be red, B can be Green, etc. Finally, I is there any way to change the count bubble color and its text color? Here is my code.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
</head>
<style>
.ui-collapsible-heading-collapsed > .ui-collapsible-heading-toggle{
background:red;
}
.ui-collapsible-heading-toggle{
background:yellow;
}
</style>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Theming Collapsible Lists</h1>
</div>
<div data-role="main" class="ui-content">
<div data-role="collapsible" >
<h4>A <span class="ui-li-count" id="red_count">0</span></h4>
<ul data-role="listview">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
<div data-role="collapsible" >
<h4>B<span class="ui-li-count" id="green_count">0</span></h4>
<ul data-role="listview">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
</div>
<div data-role="footer">
<h1>Insert Footer Text Here</h1>
</div>
</div>
</body>
</html>
You can add some CSS classes to the markup as needed and then set the color rules. For example, to get different colors for different collapsibles, give each collapsible its own class (acol, bcol in my example). Then you can also assign classes to the count bubbles (redCount, greenCount in my example)
<div data-role="collapsible" class="acol">
<h4>A <span class="ui-li-count redCount" id="red_count">0</span></h4>
<ul data-role="listview">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
<div data-role="collapsible" class="bcol">
<h4>B<span class="ui-li-count greenCount" id="green_count">0</span></h4>
<ul data-role="listview">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
Then the CSS rules:
.acol .ui-collapsible-heading-collapsed > .ui-collapsible-heading-toggle {
background:red !important;
}
.acol .ui-collapsible-heading-toggle {
background:yellow !important;
}
.bcol .ui-collapsible-heading-collapsed > .ui-collapsible-heading-toggle {
background:green !important;
}
.bcol .ui-collapsible-heading-toggle {
background:orange !important;
}
.redCount {
color: red;
background-color: #333;
text-shadow: none;
}
.greenCount {
color: green;
background-color: #333;
text-shadow: none;
}
Here is a DEMO
NOTE: obviously you should tweak the colors to actually make it look good ;)
I want to show my data like this https://dl.dropboxusercontent.com/u/12173475/sample.png ,
a bit like controlgroup, but controlgroup not seem to merge two labels,
how can I do?
This is my code (temporarily), but I hope there is a line between those(like controlgroup).
<ul data-role="listview" data-inset="true">
<li>
<div>name</div>
<div class="ui-li-aside">name1</div>
</li>
</ul>
You can do it by modifying CSS.
HTML
<ul class='my_list' data-role="listview" data-inset="true">
<li>
<div>name</div>
<div class="ui-li-aside">name1</div>
</li>
</ul>
CSS
.my_list li{
padding:0px !important;
}
.my_list li div{
padding:10px;
}
.my_list li div:nth-child(2){
width:10%;
border-right:1px solid #ccc;
}
.my_list li .ui-li-aside{
margin:0px;
}
here is Demo Fiddle