I am trying figure out how to show the selected item when I click on it in the horizontal navbar. Here is my code:
<mat-toolbar color="primary" class="topbar relative">
<div class="navbar-header">
<div color="primary">
<div>
Accounts
Create Account
</div>
</div>
</div>
</mat-toolbar>
Although I am using the same router link for both routes the link is real. When I click the selected item is not staying highlighted. Here is how it looks before and after selecting an item.
Any idea how to style it to show the active item?
Thanks
The routerActiveLink directive just adds a css-class and leaves all the styling to you. In your case, there will be an active class that you can style.
// my.component.scss
.active {
background: red;
}
Remember that if you're using #angular/material, you should probably style it using their themes. You can read more about that here.
// _my-theme.scss (only do this if you use material themes)
.active {
background: mat-color($accent);
}
Related
When creating some clickable dropdowns, I noticed the dropdown menu will hide behind any clickable dropdown buttons if they overlap. Here is an example
How can I fix this? Here is the code used to create the dropdown.
<div class="w3-container">
<div class="w3-dropdown-click">
<button onclick="myFunction()" class="w3-btn">Click Me!</button>
<div id="Demo" class="w3-dropdown-content w3-border">
Link 1
Link 2
</div>
</div>
</div>
I also made a fiddle, but it doesn't seem to be working: https://jsfiddle.net/n2fole00/99d8d7pj/
BTW, would this be considered a bug?
Thanks.
Based on Tony Hensler's comment, it was the z-index.
<div id="<?php echo $course->course_id; ?>" class="w3-dropdown-content w3-border" style="right:0; z-index:1;">
I just added z-index:1 to the w3-dropdown-content div as an inline style for the fix.
Thanks Tony.
can you please tell me how to how header label left side with button on right side .
i found like this
<div data-role="header">
Cancel
<h1>Edit Contact</h1>
Save
But i need like this
My case label on left side and button on right side
You can do like that, DEMO http://jsfiddle.net/yeyene/5kfnT/3/
JQM DOC: http://view.jquerymobile.com/1.3.1/dist/demos/widgets/headers/
Custom header configurations
If you need to create a header that doesn't follow the default configuration, simply wrap your custom styled markup in any container, such as div. The plugin won't apply the automatic button logic to the wrapped content inside the header container so you can write custom styles for laying out the content in your header.
It's also possible to create custom bars without using the header data-role at all. For example, start with any container and add the ui-bar class to apply standard bar padding and add the ui-bar-b class to assign the bar swatch styles from your theme. (The "b" can be any swatch letter.)
<div data-role="header" data-position="fixed">
<div class="ui-block-a"><h3>Header</h3></div>
<div class="ui-block-b"> </div>
<div class="ui-block-c"> </div>
<div class="ui-block-d">
A
B
C
</div>
</div>
You can do it this way, override ui-title and ui-btn-right styles. However, for the second button, give it a custom class in order not to override both button with ui-btn-right. I used custom class .second for the second button.
Demo
CSS - I used .ui-header in order not to change footer style.
.ui-header .ui-title {
margin-left: 2px !important;
text-align: left !important;
width: 150px !important;
}
.second.ui-btn-right {
right: 80px !important
}
HTML
<div data-role="header">
Cancel
<h1>Edit Contact</h1>
Save
</div>
I'm trying to learn jquery mobile and have been playing around with it for the past few days and things are going alright, but I'm not so sure if I'm taking the proper approach.
I tried making a site with a similar UI as the facebook app. On the top right and left corners of the page's header are buttons that causes the page to slide out like a drawer.
The top left button will slide the page out to the right to reveal a menu, while the top right button will slide out to the left to reveal a form to fill out.
What I did was create divs outside the page and used javascript to slide out the active page, to reveal the menu or form depending on which button is pressed:
<body>
<div id="my-menu">
<ul>
<li>Menu Item 1</li>
</ul>
</div> <!-- end of my-menu -->
<div id="my-form">
<form method="post" action="form-action.php">
<!-- form elements -->
</form>
</div> <!-- end of my-form -->
<div data-role="page" id="home">
<div data-role="header">
</div>
<div data-role="content">
</div>
</div> <!-- end of home -->
</body>
I used my own CSS to style the menu, but I also noticed my theme wasn't applied to "my-form", but everything in the page "home" had all elements properly styled.
I can't put the form inside the page "home" because I will not be able to do sliding drawer effect that I've done with the menu.
Am I suppose to have my own styling applied to the form outside the page or is there a way to apply the jquery mobile theme to elements outside the page?
Would this be the best approach to implement this kind of user interface or is there a better way using what's available in jquery mobile?
Since this will be my UI for the application does that mean I will just copy the same code to all the pages? Or is there a better way to do this?
I'd like to use the best practice for this use case so please offer any advice!
Thanks in advance for the help!
BTW I did the slide menu based on this blog post:
http://blog.aldomatic.com/facebook-style-slide-out-menu-in-jquery-mobile/
Solution 1:
As I told you in comments, jQM style can not be applied outside of page container but that should not prevent you from using its css.
If you are using firefox, use firebug plugin and take a look at every jQM page element, copy its structure and css. Use it to create styling outside page container.
One more thing, new elements are going to be styled but they will not have functionality, you will need to redo it by yourself.
Solution2:
Have your content inside a data-role="page" div at page-load, let jQuery Mobile style the page, and then move your content div out of the data-role="page" div to be a child of the body tag.
I am trying to build a List that has a checkbox and an icon, so I decided to use a Split button List. Now I have 2 issues with the List:
The Checkbox appears in a box within the list item, I want it to be "flat", i.e. NO box around
The click causes the entire box to become blue, I want only the checkbox to get ticked
Can you help me with that?
I posted some example code here: http://jsfiddle.net/JY6EV/2/
//edit 2012/06/14
It seems that having a checbox on a listitem alway nests a button. As a workaroud I could add an icon (data-icon="check") but this does not work either.. any suggestions?
PS: I want to mimic the gmail list on iPad/iPhone:
with my (faked) jquery mobile list:
What I tried so far: http://jsfiddle.net/JY6EV/8/
I know this is an old thread, but I recently had to do the same.
Since the solution of the second image is not present, I made it myself.
The list items:
<li>
<a href="#" class="custom">
<input type="checkbox" name="cb1" id="cb1" />
<label for="cb1">checkbox 1</label>
</a>
</li>
The css:
.custom {
padding: 0;
}
.custom > div {
margin: 0;
}
.custom > div > label {
border-radius: 0;
border: 0;
}
Does this work?
http://jsfiddle.net/JY6EV/10/
Using the Gris layout for positioning but you will still need to tweak the look and feel
I'm using jQuery UI's tabs to divide content on my page. I have a 'link bar' I would like to have hang at the bottom of each tab. (The tab text will change but generally they will navigate the user left or right through tabs.)
Hosting the #linkBar div inside the first tab makes it 'look' right, inside Themeroller's border. Putting it just outside the 'parent tab' div places the links below the theme's border. I've tried creating a spacer div but it just pushes #linkBar down further.
Of course when the user switches to another tab, the link bar goes away. How is ownership of elements organized between tabs? Should I dynamically destroy the #linkBar div on the tab being navigated away from and rebuild it in the tab being navigated to? Or is there a better way to move it between them, or just manage visibility?
I would like to have the link bar follow the content on each tab as a footer, 'floating' one or two lines below the last content of each tab (rather than having it in a fixed position relative to the tab bar).
Ok ... It was simply adding the jQuery UI classes to the linkBar. Check out my working jsFiddle demo:
I moved the linkBar div out of the tabOne div and put it at the bottom of the tabs div:
<div id="container">
<div id="title">
<h1>title bar</h1>
</div>
<div id="tabs">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<div id="tabone">
content goes here
<br><br><br><br>more stuff<br><br><br>more stuff<br><br>
</div>
<div id="tabtwo">
content goes here...
</div>
<div id="tabthree">
content goes here...
</div>
<div id="linkBar">
<span id="leftLink"><< left link</span>
<span id="rightLink">right link >></span>
</div>
</div>
</div>
I slightly altered the linkBar style by giving it a top and bottom margin as well as hiding it by default:
#linkBar {
display: none;
margin: 10px auto;
}
Then I simply added the jQuery UI classes to the $linkBar. I slightly altered the jQuery to be more readable:
$("#accordion").accordion({ header: "h3" });
var $tabs = $("#tabs"),
$linkBar = $("#linkBar");
$linkBar.addClass("ui-tabs-panel ui-widget-content ui-corner-bottom");
$linkBar.show();
$tabs.tabs();
$('#title').click(function() {
$tabs.tabs('select', 0);
return false;
});
Note: You could just add class="ui-tabs-panel ui-widget-content ui-corner-bottom" to the linkBar div and be done with it. But, I think I like it better managed in the JS.