Looking at the examples in angular-material2 the apps are built inside an md-sidenav-container such as here. Why is this?
A sidenav is a panel which is used for sidenav functions- not a container for the whole app.
This is because the sidenav container wraps both the sidenav and the content that will be possibly covered by the sidenav. This is especially the case when the sidenav is in fullscreen mode, i.e. sidenav has a height of 100%. If you don't insert the components into the sidenav-container they will be shown below or above the sidenav.
Please take a look at the documentation for the sidenav component.
Related
Is there a recommended way to adjust the height of the Angular Material toolbar?
Here is an example of basic usage of the Angular Material toolbar as described here https://material.angular.io/components/toolbar/overview
<mat-toolbar color="primary">
<a class="title" [routerLink]="['']">Azure B2C App1</a>
</mat-toolbar>
This creates a toolbar that is nearly an inch high, which is no use for anything. It's far too big.
The Material documentation page that describes customizing components states that I shouldn't use CSS to override its height, as that might break it. https://material.angular.io/guide/customizing-component-styles
So how am I supposed to resize it to something usable?
I notice the Angular Material documentation doesn't itself use a mat-toolbar for its page header, it uses a hand-rolled custom app-nav component instead. What should I infer from that? That after having installed one of the most heavyweight themeable component libraries around that I'm expected to handroll a themeable and responsive custom toolbar just to get a usable page header?
No, there is no recommended way to adjust the toolbar size.
https://github.com/angular/components/issues/4597
According to this Github issue requests for Angular Material to properly support dense toolbars on desktop in line with Material Design go back to at least 2017, but there is no sign of anything coming soon.
Problem
Using react native web, I am trying to allow for drag to work over a touchable opacity. This will allow mobile users to scroll by dragging over the touchable opacity.
Attempts
Since there are two touchable opacities within a single view, I have been trying to fix it for the view (parent) so that it works for the whole section. So, within the view tag, I have tried handles like: onResponderRelease, onResponderStart, onStartShouldSetResponder, onStartShouldSetResponderCapture, and a few others in an attempt to find something that works, as it seems those handles would fix issues for react native. I have assigned them to false and true, however none of those fixed my issue.
Question
How can I allow components to maintain their ability to be clicked, while also allowing users to click and drag (scroll on mobile)? Thanks for any help!
I checked almost every demo application from the website, but nobody use tabview, only Gridlayout or docklayout for "tabbing" purposes. What is the benefit of the Gridlayout instead of tabview? Apart from the customize the background.
My point is to have a native tab look and feel on every page.
If I have page 1, page 2, page 3, all the page components should have the same tabview/GridLayout part, or I can move out the tabview section to an individual global component?
Apologize for the basic question.
Thanks!
If you are looking for pure native look and feel, you would go with a TabView. Another advantage with TabView is lazy loading, it loads the page only when required.
You may go with GridLayout when you want to keep the TabView look similar on both iOS and Android. iOS by default uses Tabs at bottom and Androids places them at top. iOS would give you a More tab when the number of tab exceeds the available space, on Android it will be scrollable. These are by native, so if you want a customised common look and feel, then you could use GridLayout. Or still you could use the TabView and replace the TabBar with your own custom view, which is a bit complicated.
If you want the tabs on every page, then you should probably have a Frame inside each tab and load your pages there. So the TabBar remains same on every page. The same could be achieved with GridLayout, it's all about choices. I personally like sticking with the native look and feel of platform.
Please see the images below. jQuery UI controls are overlapping/masking MvcSitemap drop down. I believe this is a quick fix (changing a css property of UI theme or so) but I'm having hard time finding how to override this behavior of UI controls. Hope someone will help resolve this issue.
UI Buttons overlapping the menu
Tab control overlapping the menu
Thanks in advance.
Add a high z-index css style to the MvcSitemap dropdowns css. Something like z-index: 1000; would be a reasonable start.
The jQUery UI controls are not intentionally going over anything, instead the menu is being rendered underneath the things below it. This is because its html comes before the other widgets in the document layout.
This feels like a dumb newbie question. I'm attempting to follow the Palm's online tutorial for developing a webOS app. I ran palm-generate and tried updating the generated index.html file to have a body with a bunch of content (the word "HELLO" repeated 400 times).
When I attempt to load that document in the emulator, I find that I'm unable to scroll the screen to read the rest of the text. I drag the screen, but nothing happens. The page scrolls just fine in the Palm web browser.
Is there a setting to allow users to drag my app to scroll it? I see documentation for a Mojo.Widget.Scroller, but that seems like it shouldn't be necessary for a simple web page with a bunch of text on it.
Thanks to arthurthornton:
You can take anything that would normally be inside the tags and put that inside the scene HTML file.
OR you could just make a basic scene with a webview widget inside it that has your site as the source.
Unfortunately, the Scroller widget is needed for scrolling. The standard WebKit view that's shown in a card has no native scrolling ability, so the Mojo scroller widget implements the logic for displaying more content that can fit.
You can try this out by making a new project in the Ares IDE. Just add a Scroller and use the Maximize button to make it fill the scene. Then, add a HTML object to it, and add your HTML content to that object. You'll then have a nice scene which allows you to scroll through a lot of content.