In the mobile mode, the sap.tnt.SideNavigation controller can be either expanded or collapsed (expanded = "true"/"false"). The problem is that when the sidebar expanded, it shifts the view content aside:
Is it possible to show the sidebar over the view content and not to shift it? Just like it's implemented almost in any mobile apps, e.g. in Gmail or Telegram?
BTW, the sidebar in the UI5 documentation also is shown over the page content in the mobile mode.
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'm developing an ionic app which, on one page, uses touch to scroll down in a table. However, the default "draggableness" of the whole page interferes with what I want to achieve. How can I prevent the content from moving when dragging?
I only found answers about the sidemenu.
.
Example of draggable content: http://codepen.io/ionic/pen/VLwLOG (just try to drag up/down on white background)
Thanks in advance
Use <ion-pane> to wrap the entire page, and insert <ion-scroll> where you have content that you want to be able to scroll (such as the table). You just have to make sure to set the height of the scrollable area. If your page is wrapped in an <ion-content> element, it will be scrollable by default.
From the docs:
If you'd just like to have a center content scrolling area, use
ionContent instead.
I have a series of panels that work with tabs. I'm using aria-controls, aria-selected, role="tablist", role="tab" on the tabs and aria-labelledby, aria-hidden and role="tabpanel" on the panels - all seems good.
However, below a certain screen width I want the same elements to be collapsible, expanded and collapsed by buttons at the top. Obviously I need to hide the tabs list, and include buttons at the top of each panel which are hidden above the breakpoint. I would use aria-controls for the buttons - but there seems to be a few overlaps / clashes between the accessibility markup for the two layouts.
Is there a right way of doing this, or is it simply the case that I should ignore accessibility markup for the "mobile" version, assuming it's irrelevant to screen readers? Are there scenarios where the accessibility markup is necessary for responsive layouts?
The correct solution is to simply show the tabs as buttons (i.e. change the styling) in the small screen layout but leave the markup exactly the same. If you want to have multiple sections expandable simultaneously, then you can use aria-multiselectable (which essentially turns tabs into accordions).
Do not ignore accessibility for mobile. Mobile is as easy to make accessible as the desktop version and is becoming the primary way that users access many web sites and applications.
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
The problem is this:
I have a form which links to a database via javascript. I can only have one instance of this form on the page.
Above the laptop size break point, there should be just the form on the page. Below that on tablet and phone, it should be the accordion, collapsed.
How do you set up the accordion to exist around the form, only when in the smaller view sizes? The form is bootstrap responsive already.
If you want to hide the bar on large and medium screens, just add this 2 classes on the heading div
<div class="panel-heading hidden-md hidden-lg"></div>