I have a NotificaitonBar-Control as content element of a detail view, which is a element of a splitApp.
In Google Chrome there is no problem, but on the iPad there is a display issue. The notificationBar is between the master- and the detail-View.
The masterview overcovers a part of the notificationBar and the detail-view did not.
How can I resize the notificationBar. I did not find any method or propertie to modify the notificationBar.
If I look at the API I do not understand why it does not match to the detailview:
A NotificationBar is a "toolbar" that can be added to a page to show messages and notifications from the application. Its position, height and width is inherited from the element that the notification bar is added to.
SAPUI5 NotificationBar API
How can I solve this issue?
From the namespace sap.ui.ux3 I assume that the NotificationBar is not really responsive and therefore not working on smaller devices like the iPad.
I found a demopage for the NotificationBar which has some interesting information:
If the NotificationBar should be smaller than per default a separate CSS-class must be added to the NotificationBar
This means you have to do the resizing via good old CSS. The example they gave looks similar to the following snippet.
style.css (or however your custom CSS file is named)
.slimNotificationBar {
left : 60px;
right: 100px;
}
To make it work on both iPad and Desktop, you should make it responsive by adding media querys (see here: https://developer.mozilla.org/de/docs/Web/CSS/Media_Queries/Using_media_queries)
Your.controller.js (or however it's named)
// after instantiating your NotificationBar
oNotificationBar.addStyleClass("slimNotificationBar");
Link to the demopage: https://sapui5.hana.ondemand.com/sdk/test-resources/sap/ui/ux3/demokit/NotificationBar.html
However, if you prefer a built-in and responsive solution, you might want to try the following approach.
Add a sap.m.Toolbar to your detail page, which has a button that opens a sap.m.MessagePopover.
See the following example: https://sapui5.netweaver.ondemand.com/sdk/explored.html#/sample/sap.m.sample.MessagePopover/preview
Related
I've noticed that when I add an HTML app in Rally/Agile Central, the height doesn't fit/adjust within the browser windows. This means that a vertical scrollbar is always added.
I'm using Chrome and Firebox, but they both have this problem.
Is there a way to limit the height of the custom app?E.g., to (height - 25) so that the browser scroll bar is not necessary?
Can you share some of your code? It might help in diagnosing what's going on. A couple ideas though...
Are you using a layout for your app? This often can help with scrollbar issues.
This guide may be helpful for learning to work with layouts: https://docs.ca.com/ca-agile-central/saas/apps/2.1/doc/#!/guide/layouts
If you're just using auto layout (the default, if you didn't explicitly specify one) then you can also try adding autoScroll: false to your app's config. Note this may cause your content to be clipped if you do actually need a scrollbar though.
Here is an examle with the std list app - and it's the same whether there is anything to show or not.
I'm thinking that it is the HTML app that doesn't take into account that there is a page title, in this case "*test layout scroll bars" - and somehow uses the "full height" = the entire frame (I'm not an html/css expert)
I'm trying to develop a responsive website and even if my Google map displays fine, no marker appear on it if I decrease the size of the window (or if I use a mobile device)…
Here is an example page: http://www.parisdigest.com/test-mobile.htm (the marker should appear on Paris).
Thanks a lot!
I found the solution. My responsive CSS contained some code to add a max-width to some elements, including "div". I just added div#map_canvas,#map_canvas div{max-width: none} and solved this issue.
I have checked many books and sites, where I can see that everyone is saying that it is a default property and we can not use top, right, bottom and left property, I can understand that. But if it is already predefined then why do we use it's syntax? Can anyone please tell me its use.
{position: static;}
We use it's syntax simply because we can make an element on a webpage change positions multiple times. Whether it's for animation purposes or for a real application it's always nice to be able to bring it back to it's default behavior (for whatever reason necessary).
For example, if you wanted a responsive website with an image in a special area, you could set that image position: relative for wide screens. Then when the screen size is reduced you can set it back to position: static , which (in my opinion) is easier to handle when the screen size is small (mobile phones).
The WP responsive theme I'm working on:
http://www.wpexplorer.me/tetris/
I use Firebug for Firefox browser addon thingy to make changes before messing with the actual files. So if you have it or something similar, you will see that by adding position:fixed; to the #header section the header width shrinks well more than half its original size and the navigation menu is jacked up within the new shrunken space.
I have added other snippets of coding to the #header section like width:100%;, width:959px; and other percentages and pixels, which messes up the layout; especially when you resize the window down to what you would consider to be for a tablet and a mobile device - it's all out of whack. I can't get the sticky header for this theme to function or do right. Oh, I've also added z-index:200; to the #header section and margin:160px 0; to #main-content; these don't give me issues.
Adding the width: ; code to the #main-content doesn't seem to help either (which I read somewhere online that this was where the width code goes).
Anyway, does anyone know what code I need to make the header of this theme scroll up until it gets to the top of the page where it becomes sticky/static/fixed/on top (whatever the real term for it is) at all times? And, can you get it to work with the layout being in tact when the window is resized all the way down to the size of a mobile device?
Thanks.
This should work
#header-wrap{position:fixed;top:0;z-index:999;}
#pre-header{margin:20px 0 15px;width:960px;}
#main-content{margin:215px 0 30px;}
The position is fixed at the top using 0 with a z-index:999 you then need to set the width of the inner container pre-header 960px to match the rest.
You will need to setup the media queries for the other sizes you have setup. Easy, and Enjoy.
If you want the menu itself and not the social icons to become the top fixed bar without the social icons then you want to make a jquery scroll CSS change so that the #header becomes the fixed position.
It working with fixed header and social:
An illustration of it working without the social bar using a Jquery Scroll CSS change:
This is the way I would do it, I would move the menu down, and add the social icons to the menu itself. (Below is a screenshot of what I mean, the social icons are reduced to 75%)
PS. The social icons stand out to much so I would add a CSS3 Greyscale, and when the visitor hovers over them it turns on the color with a transition effect.
Hope this helps ;)
I'm using a TabLayoutPanel in a GWT application, attached to the RootLayoutPanel of the page.
Inside each tab I have a ScrollPanel, which is used to display a FlexTable.
Is it possible to make the TabLayoutPanel grow vertically, so the user can scroll the entire page using the browser scroll bar, instead of using the internal ScrollPanel ?
The short answer is: It's not possible with LayoutPanel's. The reason: LayoutPanel's are specific for applications that need to fill the browser client area, or in other words the part that is visible by the user. One of the problems with browsers is to have a widget that has exactly the height of the visible area and also automatically resizes when the browser window is resized. This is one of the problems the LayoutPanels solve.
If you want to use the browser scrollbar and be able to create pages longer than the visible area use the 'normal' Panels.
BTW just FYI you are aware the FlexTable is slow in rendering and if possible better use Grid.
Just add a new style to the TabLayoutPanel:
this.addStyleName("tab-style-content");
And define in your CSS as:
.tab-style-content .gwt-TabLayoutPanelContent
{
overflow: auto;
}
Thus, the property overflow will be overwritten in the gwt-TabLayoutPanelContent and the scrollbar will be shown automatically.
If you make the TabLayoutPanel bigger than the root panel, you will get a browser scroll bar.
If I want to achieve something like this, I always put the TabLayoutPanel in a SimplePanel and add the SimplePanel to the RootPanel. I guess this is not the best way, but it works.
public void onModuleLoad() {
//Create TabPanel
TabPanel tp = new TabPanel();
tp.add(new HTML("Foo"), "foo");
tp.add(new HTML("Bar"), "bar");
tp.add(new HTML("Baz"), "baz");
tp.selectTab(1);
// Create SimplePanel and add TabPanel
SimplePanel sp =new SimplePanel();
sp.add(tp);
// Add SimplePanel to the root panel.
RootPanel.get().add(sp);
}