Still learning ionic. I have a slide menu integrated into the app. The problem that I have is that I want to completely hide ionic nav bar and menu on top for my login view. I tried using ng-show to hide the nav bar based on whether or not current user is authenticated, but all it does is hide the content in the bar, but leaves empty nav bar container on top of the page.
I also tried using ng-if instead of ng-show, which does make the bar disappear completely, but when I need it to become visible again, the code produces an error: Cannot read property 'outerHtml' of null. I guess because the DOM object for the menu is not there anymore.
What is the best way to address this? Am I on the right path or is there a better way to show/hide
Related
I am looking for a split view in react js , i am using chakra ui for my layouts and i am not able to achive it .
Left Pane is Menu which has a fixed height (no scrolling needed)
Right Pane is the page which gets loaded every-time user selects an option in left menu.
Right pane should be scrollable.
You should give a try on the Choc-UI Layouts for achieving this:
https://choc-ui.com/docs/application-shells/sidebar-layouts
Or here too:
https://chakra-templates.dev/navigation/sidebar
On the links you will get previews of components that have a side bar on left side getting th full height of the viewport, also a sidebar and a container for your app content or other components.
This section is independent of the sidebar and navbar showed on the previews. You can access the code with the show code option on each previo (top-right location)
Try removing the navbar and modifying the width of sidebar, and you will get a split version of the layouts as you are reaching for.
I am using the react-select package for our menu dropdowns. However, I've noticed that if a dropdown menu is open and you scroll the page down or up, the menu moves with the page. Expected behavior is that the dropdowns position should stay static. This expected behavior can be seen here on the "single" dropdown. Any ideas what could cause this issue?
wrap react-select inside the container with some height & relative position.
I use React and Material-UI. I use huge Popover with the Tooltip behaviour. The goal is to display data when the user hover some links. It's working well but i have a problem about scrolling.
I want to be able to scroll INSIDE the popover when the Mouse is inside it. The default behaviour is to let the user scroll the entire page instead of focus on the popover.
I have set a CodeSansBox to show you.
How can I make the paper-drawer-panel element behave like this site?
https://home-assistant.io/demo/
I want to be able to open and close the drawer panel even when the page is large. I also don't want there to be a drop shadow over the page when the drawer is out and the page is large, and I want the drawer to expand into the page and not overlay the "main".
I know about "forceNarrow" but it doesn't acheive what i want because it overlays the rest of the page when the drawer is active and it casts a drop shadow over the "main".
I just tested this on one of my sites with a drawer and, when I set forceNarrow to true and back again, I don't get a backdrop or anything, it is just as in the site you linked.
I am sure you know this, but for someone else stumbling on this the code would look something like this:
var drawer = document.getElementById('drawer');
drawer.forceNarrow = true;
drawer.forceNarrow = false;
Could you link to your site, or post some code here?
Edit: Here is an example
I have a page with a set of tabs, two of which contain accordions. I have several AJAX functions that reload the content of both sets of accordions, and once complete, I refresh both of them.
While the accordion of the currently active tab refreshes just fine, the one in the inactive tab does not. It opens the top accordion panel, and its height is just fine. But when you activate any other panel, it only has the minimal height and adds a scroll bar.
How can I get the accordions in the inactive tabs to maintain the proper height?
Hi i believe ur issue is similar to this thread, pls check out these links. JQuery Accordion Auto Height issue http://jqueryui.com/accordion/#no-auto-height