i just updated my project from Angular v13 to v15.
While using v13 i created a nested menu with dynamic data from an API. I mostly followed this guide and it worked.
Now after the update I got the issue, that the text inside the mat-list-item is hoverable and only that part is clickable. I didn't change any code and it worked pre v15.
It seems like mat-list-item is not working right inside ng-template.
Screenshot: Hover and click only working over the text "id"
Related
I am using angularjs and ng-material in my project. I want to make md-select dropdown look like bootstrap dropdown. Attached the dropdown link for the Reference.. I have added animations and it working fine but the prob is when the dropdown is closing.. white backgorund is shown when the dropwdown is closing. Link is in comments. Any help will be helpful.
I have a simple Angular app with two components, a header and a side panel. There is a menu icon in the header, which when clicked shows the side panel.
It works when the code is in AppComponent. But it does not work, if I make the side panel into its own Angular component (SidenavComponent). I am using "transform:Â translateX" to hide and show the panel.
Here is a stackblitz workplace where the code for the panel is in AppComponent and is working.
Here is a another stackblitz workplace where the code for the panel is in SideanavComponent and is NOT working.
When the menu icon is clicked, the header component sends a message to the component to open the panel. This is AppComponent in the working code and SidenavComponent in the non-working code. The component receiving the message then applies the CSS class to open the panel.
When I run this in Chrome and open the developer tools, the same CSS gets applied to both the working and non-working sidenav html. So I am baffled.
This was originally part of a bigger app. I removed all code unrelated to the problem that I am having and then moved it to the Stackblitz workplace.
NOTE: Both the working and non-working code has a console error when run in stackblitz: "Unhandled Promise rejection". This does not happen when run in Chrome and does not stop the working code from working.
So the issue is that you've created a new Angular component that you want to have act the same as the <aside> element you had running in the AppComponent html page, right?
But then in your sidenav component, you go ahead and put a new <aside> element with the sidenav class within your new component. Do you see the problem here? You've now got an element (the component element), with its own css rules, sitting between the parent element and the sidenav element.
To resolve this, what you want is to treat your sidenav component as the element itself! This means you need a couple of changes.
Learn about applying css to the component itself (here's the trick: it's called :host in the scss file).
https://angular.io/guide/component-styles
And for dynamically changing the component's classes, use #HostBinding
https://angular.io/api/core/HostBinding
With these two techniques, you can remove the <aside> element from within your sidenav component, and the component itself will act in the way you desire.
I forked your stackblitz workplace with a working example:
https://stackblitz.com/edit/angular-5gl3cu?file=src/app/sidenav/sidenav.component.ts
i'm using bootstrap nav-tabs(vertical pills). i want to make this - when i click on tab, the content of THIS tab drop downing exactly under this tab(not somewhere else) like this
Then the Bootstrap feature what you are looking for is called Accordion or Collapse and not Nav-Tabs.
Here is the link where its available in the bootstrap documentation. You do not need any extra plugin except ofcourse jquery.min.js', bootstrap.js and bootstrap.css to make this work.
Important Note : jquery.min.js should be loaded before bootstrap.js.
http://getbootstrap.com/javascript/#collapse
Here is the basic Accordion example with the required libraries.
Hope it helped :-)
I have found solution. if someone also have this problem, just check bootstrap accordion
accordion
thats it!
From the Bootstrap docs:
Navs available in Bootstrap have shared markup, starting with the base .nav class, as well as shared states. Swap modifier classes to switch between each style.
Using navs for tab panels requires JavaScript tabs plugin
For tabs with tabbable areas, you must use the tabs JavaScript plugin. The markup will also require additional role and ARIA attributes – see the plugin's example markup for further details.
Make navs used as navigation accessible
If you are using navs to provide a navigation bar, be sure to add a role="navigation" to the most logical parent container of the <ul>, or wrap a <nav> element around the whole navigation. Do not add the role to the <ul> itself, as this would prevent it from being announced as an actual list by assistive technologies.
I've been pulling my hair out trying to get my CSS hover menu to work properly on iPad. I have tried applying hover classes using javascript with the same result, so it must be in the css. The site also utilizes twitter bootstrap.
What happens currently is that on a tap, the dropdown/link hover state show for a split second, then the previous link dropdown/hover show, then it shows the correct one again and it remains open as it should.
EDIT: In case anyone else has this problem, update bootstrap (primarily the dropdown class) and you should be fine.
Updated bootstrap, primarily the dropdown class javascript.
I'm using the Sencha ExtJS Framework in Version 4.05 and i have the following problem. I am displaying Ext.Grids which have a pagination toolbar at the bottom of the Grid. On the Sencha Sample Page the Grids will display some buttons (first-page, prev-page, next-page, last-page, refresh) with icons on it.
Unfortunately the icons are not displayed in my Grids:
As you can see, the buttons are actually there, and they're working correcrly, only the icons are not displayed.
The references to the images are correct and the images are there and accessible for the browser. (If i view the css of the button in Firebug and hover the imageurl it will display the correct icon).
One thing i noticed is, that for some reason the <span> Element which should display the icon is "grayed out" in the firebug view. (On the Sencha example page it is not).
The CSS of that element looks fine for me:
Note: The complete CSS File used can be found HERE
A short note on the Theme: i made this grey theme (named "documents") just by changing the main colour of the .sass template and compiling the ext-all.css to a new one for my theme. So i didn't change anything with the icons.
Any suggestions what could cause this problem?
Hard to debug without access to the actual code. However, I noticed that both in the CSS you copied above as well as the css link you posted (which was supposedly the whole css), that neither set of css (that I could find) had any reference to the x-btn-icon class by itself, and yet that is the class (along with x-tbar-loading) that is on your grayed out span element. So, what is that class doing? Where is it defined? There may reside your issue.
EDIT: I went to the Sencha website and firebugged an icon on the grid sample. When I deleted the x-btn-icon class from the element, I believe I duplicated your problem. So it seems that the necessary definition of that class is missing from your css. On their site it is defined in the ext-all.css.