So, after a new browsers update on last year, a menu component doesn't work properly anymore.
When the page loads, the menus appears like this
But in the html they are there:
The most stranger part is when a zoom-in or zoom-out the page, they show up.
I don't know whats is going on. I had read the last changelogs, but I couldn't find anything that leads me on somenthig.
On the project we use AngularJS version 1.6.4 and AngularJS Material with SCSS for components.
Related
Hello and thanks for looking. I now suddenly in charge of a website due to Covid-19. This website is running a custom wordpress theme that was not put together well at all. The "Menu" tab was missing altogether in the admin panel so I had to figure out how to put that back together. I did. Ok. sO i am trying to create a menu with a dropdown and the standard wordpress editor is not working at all. It is visually showing it but on the actual website home page, instead of showing the child links under the parent of the dropdown, they are just all side by side. Invesitagation has shown me that there are basic dependencies in this theme missing completely for wordpress to implement the menus. Any idea on how I would reference those and bring them into this custom theme?
I'm trying to customize Matt Lewis's calendar, I've read the documentation and researched this but I can't find an easy solution. What I need to do is pretty straightforward, but I have no idea how to do it.
The Week view contains my event names, and I can click on that to launch my modal but that's where I am stuck.
I want that same functionality to appear in the Month view instead of the badge incremented label, and the slid down div.
I won't post lots of code here because I don't know what logic is the part that needs changing!
Here is a URL to the test site: UI Calendar Test Site
I'm building a React app, using Foundation 6 for my UI. So far this has worked pretty well, but I'm now getting to where I'm changing the markup based on user events instead of just on page load, and the Foundation Plugins aren't working for newly rendered markup.
As a simple example, I've got a Login menu that renders as a Foundation Dropdown. Clicking on an entry in this will, once the user has logged in, cause this to be removed and a different menu to replace it - with the User Profile and the Logout links on it.
My initial attempt simply had $(document).foundation() called in the componentDidMount method of the top level UI. This worked great for everything rendered in the initial page load, but doesn't pick up anything rendered later on.
I've just tried replacing this with a MutationObserver, and again this works perfectly for anything rendered in the initial page load, but when the menu changes I instead get: "Tried to initialize dropdown-menu on an element that already has a Foundation plugin" - despite this being rendered inside a different React Component.
Is there a correct way to get this to work?
I am using your Angular JS Input Dropdown control, and I've followed the code example you put on your demo page to implement the control on a page in my PHP Laravel based website. I have found a problem with the implementation, though, and I was unable to identify what triggered it or how to fix it, so I was hoping that one of you may be of some assistance.
The issue consists of the control not getting rendered into the page until I refresh the page, then it shows up and works perfectly fine, right until I leave the page and get back to it; forcing me to refresh the page every time I re-enter it to be able to use the control.
To elaborate further, the control does not get rendered, but the page acknowledges that there is supposed to be a control on the page, which is why it displays a white blank space at the position where the control is supposed to be. So, I am pretty sure that it's a rendering issue.
The website is using Voyager which has a navigation sidebar, and if the page is entered via the sidebar button, the issue occurs, while if it was entered directly through the url bar or refreshed, then it works fine.
Has this ever happened to anyone before, and if so, how should I go on about fixing it? If not, then what do you propose might be the issue?
Thanks for taking your time to read this issue, and have a wonderful day.
Link to Angular control repository: https://github.com/hannaholl/angular-input-dropdown
EDIT: This issue was self-fixed.
Solution: Manually bootstrap Angular JS.
This issue was self-fixed.
Solution: Manually bootstrap Angular JS.
I'm attempting to use Ember.js for a small demo site for viewing gigapans of macroinvertebrates (e.g. like this one). Each is categorized one the site by taxonomic rank, in this case only order, family, and genus (since they're all of the same class and we don't have species-level identification). It's a small site, only 13 genera. Here's a simple working example with nothing but navigation:
http://jsbin.com/ihapaw/10
The home page lists all three orders, and under each are the families, and then genera. Click around a bit and you'll see that I'm using dynamic segments to get an URL scheme that follows a /ORDER_ID/FAMILY_ID/GENUS_ID pattern.
What I'd like to add now is a menu from which the user could choose to jump to any rank or genus. The design calls for a menu button which the user would click, a div would appear with a listing of all the orders, families, and genera, and the user could click to jump to the page they want. Populating the menu panel, making it appear onclick, and so on is not a problem. What I'm having a trouble with is that using the links in the menu end up resulting in Ember errors that I can't make any sense of. Here's an updated demo:
http://jsbin.com/ihapaw/14
In that demo, pretend the blue area is the menu panel that appears after clicking a menu button. If you open the JavaScript console, and then click the "Brachycentrus" genus in the blue menu area, and then click the "Tallaperla" genus (the very last one) in the menu area, you'll see the following errors in the console:
Error while loading route: TypeError {}
Uncaught TypeError: Cannot call method 'connectOutlet' of undefined
For the repro steps above, I see also in the content area below the menu that, after clicking on the "Tallaperla" genus, the order is correctly updated to "Plecoptera", but the family and genus aren't. I imagine that's a clue to the problem, but have no clue what it means. I should maybe add that it's not just those two genera causing the problem--it's easy to repro the errors if you click around enough in the menu area. That repro example was just the easiest and fastest I could find.
I'm using Ember 1.0.0-rc.6, Ember Data 0.13, and Handlebars 1.0.0-rc.4.
I've looked at your code and it looks good. I believe this is the same bug I am facing wrt nested routes with ember. There is a discussion going on about it here. Maybe you should chime in. :)
I posted a temporary fix there that worked for me, but my routes were only 2 level deep, so it was working ok. Your nesting is 3 levels deep, that fix may not work for you.
A different approach to your problem, would be to use a single resource with multiple dynamic segments.
this.resource('species', { path: '/:order_id/:family_id/:genus_id'});
You'll lose flexibility in the controllers, having to put everything in one controller, and the route would need to do more work in find based on which params are present. but it might work!