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.
Related
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);
}
I'm using Angular6 with angular-cli-6.0.8.
While using matTooltip then on mouse hover I'm getting the component(header) position change And mouseOut it's normal behaviour.
The following is the code:
<div #HeaderMenu>
<div id="headerMenu" *ngIf="isHeaderButtonOpenStatus" style="display:block">
<div class="right-h" *ngFor="let head of commonService.AllHeaderRoutingList">
<a [routerLink]="head.routerLink">
<img class="addOnBtn" [id]="head.id" [src]="getSource(head)" [matTooltip]="head.title" (click)="setActive(head.id, head.source, head); toggleHeader()" />
</a>
<div [ngStyle]="{'background-color': head.isRouter ? '#0074BA' : '#232323' }" matTooltip="Pin to the top" (click)="setHeaderRouting(head)" class="isRouter"> </div>
</div>
</div>
</div>
So if you see in the above code on mouse hover on element <a ...</a>and <div [ngStyle]....</div>
Totally <div #HeaderMenu> ....</div> is little bit shift from top to down.In other word creating blank space on top of the header(Please see the below image).
on Mouse hover on Image button header Component position change
Please any help.
Use mdToolTip= "{{ your ngFor expression}}".
I have the following Panel in my jQuery mobile app , I want to make it to be drop down as appears in the following image rather than to be slide from the page edge . Is this can be done in jQuery mobile and How can i do this ?
<div data-role="page" id="MainPage" >
<div data-role="panel" id="Mainnavpanel" data-theme="b" data-display="overlay" data- position="right" data-position-fixed="true">
<ul data-role="listview"><li>
<a href="#MainPageheader" data-rel="close" class="ui-btn" >Close</a></li>
<li>Page1</li>
<li>Page2</li>
<li>Page3</li>
</ul>
</div>
<div data-role="header" id="MainPageheader" data-position="fixed" data-tap- toggle="false" data-fullscreen="false">
<div> <font size="6px"> Main Page </font></div>
</div>
<div data-role="content" >
//content
</div>
</div>
You can use popup widget to simulate dropdown menu.
As of jQuery Mobile 1.4, a new attribute data-arrow is added to popup widget. This creates an arrow which can be positioned anywhere in popup.
Arrow:
The popup can display an arrow along one of its edges when it opens if the data-arrow attribute is set. The attribute can take a value of true, false, or a string containing a comma-separated list of edge abbreviations ("l" for left, "t" for top, "r" for right, and "b" for bottom). For example, if you set data-arrow="r,b" then the arrow will only ever appear along the bottom or right edge of the popup. true is the same as "l,t,r,b" and false or "" indicates that the popup should be displayed without an arrow.
HTML
<div data-role="popup" id="popupID" data-arrow="t">
<!-- content -->
</div>
Add data-rel="popup" to button to call popup.
Menu
To modify arrow's size, check this link.
Demo
I want to place some buttons in the top of my webapp that works like a toolbar. For this purpose I use the controlgroup widget.
Now I have the problem that the button widths are too big for the display so I decide to set the mini attribute to true.
But can anybody explain me the difference between setting mini to every button or only set it to the div? Which scenario should I use for my toolbar?
Example 1:
<div data-role="content">
<div data-role="controlgroup" data-type="horizontal">
Button 1
Button 2
Button 3
</div>
</div>
Example 2:
<div data-role="content">
<div data-role="controlgroup" data-type="horizontal" data-mini="true">
Button 1
Button 2
Button 3
</div>
</div>
Thanks in advance!
They are the same because the buttons inherit from the container. You should just set mini on the DIV in this situation.
If you had many controls in one container and only some needed to be "mini" you would then set those individual elements to mini.
Dynamically injecting buttons into JQM footers seems to be an exercise in frustration. Anyone have a clue how to apply proper formatting for this? Here are several anomalies I found trying to do this:
Multi-column button grids are not properly formatted in the footer
data-corners="false" attribute (to get flush buttons) does not apply to the first and last buttons in the footer
With data-role="controlgroup" data-type="horizontal" for the footer buttons, if there are too many buttons to fit in one row the styling looks weird (since some buttons will have rounded corners, others will not)
If data-role="controlgroup" data-type="horizontal" are omitted for the footer buttons, buttons may be rendered partially off the screen...
In general - argh!!!! Anyone have any success dynamically injecting buttons into a footer? If so, would much appreciate to hear how this was achieved.
Thanks!
Would something like this work:
http://jsfiddle.net/eznh8/7/
JS
$('#addButtonName').click(function() {
var theFooter = $('#addMoreButtons');
var buttonName= $('#newButtonName');
if(buttonName.val() != '') {
theFooter.append(''+buttonName.val()+'');
buttonName.val('');
$('#theHomePage').trigger('create');
}
});
HTML
<div data-role="page" id="theHomePage">
<label for="basic">Button Name:</label>
<input type="text" name="newButtonName" id="newButtonName" value="" />
Add New button
<div data-role="footer" class="ui-bar" id="addMoreButtons">
</div>
</div>
Multi-column button grids are not properly formatted in the footer - this is my response to that.
One thing to check if you are using controlgroup with a href links - make sure your each of the links in the control group has the following CSS;
vertical-align:top;
You will also have to get more control over how the elements look if you are styling them as buttons. I posted a similar discussion over here:
https://forum.jquery.com/topic/jquery-mobile-horizontal-control-groups-creating-a-custom-split-list
https://forum.jquery.com/topic/css-code-to-help-control-entire-button-in-a-jquery-mobile-theme
Hope that helps.