Currently, I am having 3 layouts:
has header and sidebar
has header no sidebar
has no header nor sidebar
What is the way to extend the layout with options whether to turn on or off the sidebar and header? These are 3 possibilities but I'm sure there should be better way
Use 1 layout with vuex state. Set the showHeader and showSidebar beforeMount
Use 1 layout with $route condition to show header and sidebar
Use 3 layouts
Does anyone know any better way?
If displaying header statically, i would prefer to separate 2 layout.
has header
has no header
And control the sidebar open/close state from vuex by user prefer.
If header preference is dynamically,
one default layout and control header and sidebar open/close state from vuex
Related
I make a table with dojo script, but it should see the diferent order of pagination options as that: 1. the page navigation choices, 2. page length menu and, 3. current position display.
I need help with that, how can I change that?
http://dojotoolkit.org/reference-guide/1.10/_images/pagination_ui_overview.bmp
In order to customize/modify an existing dojo widget you will need to manipulate the dom.
In this specific case you should use selectors like dojo/dom and dojo/query to select the portions of the grid you wish to move and then use dojo/dom-construct to place them in the correct location.
domConstruct.place(pageNavigation, positionDisplay, "replace");
Here is a jsfiddle which demonstrates a portion of what you are trying to accomplish and is a good starting point http://jsfiddle.net/kagant15/u6edz0b9/
I am not an expert on themes but i would like to know if it is possible to accomplish that:
Once i pull a panel into a facet i am hiding the panel by disabling the output tag and setting a special css class only for the designer client.
Has somebody tried to do that automatically in themes by checking if the panel is in a facet(Maybe ask for the key: property)?
I have tried to change the panel but i dont know how to set a certain style class based on a property of the panel.
To my best knowledge: A theme styles content rendered, not attributes that define if content gets rendered or not.
You have 2 options you could use:
create your own little extension library with controls you want to use everywhere. Add one 'containerPlaceholder' (or whatever you would call it) that doesn't render any own output, but only it's children.
use a snippet you simply paste into your source code.
don't use a panel or div, but add your custom controls to the callbacks. Makes your XPage more readable (that's what I do)
Hope that helps
I have some custom controls that I want to include in Xpages, but I don't want them to be visible to the user or to take up space on the screen, as it is throwing my alignment off. I have looked at the properties rendered, loaded, and visible, but I don't really understand them and they don't seem to do what I want, which is to include some functionality but not change the layout.
I am sure there is a way to do this, but I can't figure it out.
Loaded means it won't be added to the component tree and only affects server-side functionality. Because it's not in the component tree (the server-side map of the page) it can't be passed to the browser or processed during partial refreshes. Rendered and visible are the same and mean they're in the component tree, so server-side processing can interact with them, but no HTML is passed to the browser for them. So you can't interact with them via CSJS. If you want it passed to the browser, available for CSJS but not visible to the user, you'll need to set the style as display:none. Another option is to put that style in a theme and allocate the themeId you choose to your custom control.
I'm looking for a way to make a dataGrid provided by richfaces responsive.
Meaning, the grid scales based on the size of the device screen.
I've taken a look at Richfaces Bootstrap : http://planet.jboss.org/post/richfaces_bootstrap
but they recommend not to use it in any production code since it is still under development. Tags and attributes are subject to change at anytime.
You'll need to overwrite the default CSS. Here is the list of classes that make up a dataGrid.
The responsivness is achieved by queries like this:
#media(min-width:768px) and (max-width:979px) {
/* styles for the given width range */
}
You shouldn't use the Bootstrap components but you can use the CSS. However the dataGrid is a table and those don't scale very well.
I would like to add in the top right of every page - contact phone & email link.
They are styled uniquely on the page by CSS - based on their containing DIV's class.
What is the best practice way to make that visible on every page - and editable in the CMS?
Would I have to have the HTML markup editable too (the client is non technical)?
Thanks.
You want to add a HTML widget on the default layer. You can give it custom classes etc. and style it within your theme.