I'm trying to add a scrollbar to a firefox extension so that it displays when the window is too small.
I'm having issues with having the scrollbar span the entire range from top to bottom of the sidebar and only having it displayed when the window is too small.
One extension that has the functionality I would like is the sage extension, however searching through the CSS and XUL, I'm unable to figure out how it works.
XUL File
<vbox flex="1" id="main" align="center" pack="end" maxwidth="300">
<spacer height="10"/>
<image id="logo" maxwidth="300"/>
<spacer height="20"/>
<vbox id="button" flex="1">
<button id="a-button" label=""/>
<spacer height="20"/>
<listbox id="listbox1" width="300" maxwidth="300" rows="6">
<listhead id="list-header">
<listheader label=""/>
</listhead>
</listbox>
<spacer height="20"/>
</vbox>
<tabbox id="details-box" maxwidth="300">
<tabs id="tabs">
<tab id=a"-label" label="" style="text-align: center;"/>
</tabs>
<tabpanels>
<vbox>
<button id="another-button" label="" />
</vbox>
</tabpanels>
</tabbox>
<spacer height="20"/>
<vbox maxwidth="300">
<description id="message" style="display: none;">
<!-- updated with ajax -->
<html:h1 id="header"/>
<html:p id="body"/>
</description>
</vbox>
<spacer flex="10"/>
</vbox>
<spacer flex="10"/>
</page>
Relevant CSS
/* Main */
{
padding: 0;
margin: 0;
}
#sidebar {
background-color: #fff;
font: 10pt "arial", "sans-serif";
line-height: 11pt;
}
vbox#main {
padding-left: 20px;
padding-right: 20px;
/* min-height: 600px; */
min-width: 330px;
overflow-x: hidden;
overflow-y: auto;
}
How it currently looks
Example Screenshot http://img203.imageshack.us/img203/7209/screenshot20100805at201.png
Desired effect in Sage Extension
Sage Relevant Screenshots http://img193.imageshack.us/img193/9206/sageexample.png
The problem is that vbox#main was not the only child node of . I also had a panel in there which would popup based on some action.
By moving the panel inside of vbox#main, vbox#main would span the entire space of the sidebar.
Related
<edit>I decided to clean this question up a little bit, for easier reading.</edit>
I have a centered <menulist>, of variable width (maxwidth="200"), next to which I want to lean a couple of <toolbarbuttons> in an <hbox>. These elements are part of a xul <page> element.
The following image shows what my current result is and what my actual goal is:
The vertical red line is merely drawn to indicate the center of the window.
The current result was achieved with the following css and xul:
css:
page {
-moz-appearance: none;
background-color: #fff;
text-align: center;
}
toolbarbutton {
list-style-image: url( 'chrome://codifiertest/skin/icons.png' );
}
toolbarbutton .toolbarbutton-icon {
width: 16px;
height: 16px;
}
toolbarbutton.add {
-moz-image-region: rect( 0px, 16px, 16px, 0px );
}
toolbarbutton.edit {
-moz-image-region: rect( 0px, 32px, 16px, 16px );
}
toolbarbutton.delete {
-moz-image-region: rect( 0px, 48px, 16px, 32px );
}
toolbarbutton.config {
-moz-image-region: rect( 0px, 64px, 16px, 48px );
}
xul:
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/css" href="chrome://global/skin/"?>
<?xml-stylesheet type="text/css" href="chrome://codifiertest/skin/index.css"?>
<!DOCTYPE page>
<page xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:html="http://www.w3.org/1999/xhtml">
<div xmlns="http://www.w3.org/1999/xhtml">
<h1>Title</h1>
<vbox xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
pack="start"
align="center">
<stack maxwidth="200">
<hbox pack="center" align="center">
<menulist maxwidth="200">
<menupopup>
<menuitem label="Item" value=""/>
</menupopup>
</menulist>
</hbox>
<hbox left="200">
<toolbarbutton class="add"/>
<toolbarbutton class="edit"/>
<toolbarbutton class="delete"/>
</hbox>
</stack>
</vbox>
</div>
</page>
icons.png:
You can also download this as an installable bootstrapped test example:
http://extensions.codifier.nl/test/downloads/test#extensions.codifier.nl.xpi
Be aware that the example xpi install will immediately open a new tab with the example xul file after install. And as a disclaimer: the file is downloadable from an insecure location (my own domain), so be sure you validate what you downloaded before you install (i.e. save the xpi to disk first, before installing).
So, the goal is to always have the <menulist> horizontally centered to the page and the <hbox> with <toolbarbutton>s lean to right side of the <menulist>, no matter its width.
Is this doable with xul and perhaps some additional css?
I've actually gotten it to work by mixing in more (x)html:
css:
#container {
position: relative;
}
#container > span {
position: absolute;
left: 100%;
}
altered xul/(x)html:
<html:div id="container"> <!-- no more xul:stack -->
<hbox pack="center" align="center">
<menulist maxwidth="200">
<menupopup>
<menuitem label="Item" value=""/>
</menupopup>
</menulist>
</hbox>
<html:span> <!-- additional span -->
<hbox>
<toolbarbutton class="add"/>
<toolbarbutton class="edit"/>
<toolbarbutton class="delete"/>
</hbox>
</html:span>
</html:div>
... but I'd really rather want to see a pure xul solution though, if anyone knows one.
Thank you, in advance, for looking into this.
I think this should be the solution:
page.xul
<?xml-stylesheet type="text/css" href="page.css"?>
<!DOCTYPE page>
<page xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:html="http://www.w3.org/1999/xhtml">
<vbox>
<hbox>
<hbox>
<menulist>
<menupopup>
<menuitem label="Item" value=""/>
</menupopup>
</menulist>
</hbox>
<hbox>
<button class="add"/>
<button class="edit"/>
<button class="delete"/>
</hbox>
</hbox>
<hbox>
<hbox>
<menulist>
<menupopup>
<menuitem label="Item" value=""/>
</menupopup>
</menulist>
</hbox>
<hbox>
<button class="add"/>
<button class="edit"/>
<button class="delete"/>
</hbox>
</hbox>
</vbox>
</page>
page.css:
#namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
page {
-moz-appearance: none;
background-color: #fff;
text-align: center;
background-image: url( 'dot.png' );
background-position: top center;
background-repeat: repeat-y;
}
page > vbox {
-moz-box-flex: 1;
}
page > vbox {
padding-left: 90px;
-moz-box-align: center;
-moz-box-pack: start;
}
.buttonsgroup {
-moz-appearance: toolbox;
}
button {
-moz-appearance: toolbarbutton;
list-style-image: url( 'icons.png' );
min-width: 27px !important;
width: 27px;
height: 16px;
margin: 0px 0px 0px 0px;
}
button.add {
-moz-image-region: rect( 0px, 16px, 16px, 0px );
}
button.edit {
-moz-image-region: rect( 0px, 32px, 16px, 16px );
}
button.delete {
-moz-image-region: rect( 0px, 48px, 16px, 32px );
}
button.config {
-moz-image-region: rect( 0px, 64px, 16px, 48px );
}
Here is how it looks (on FF 36, Kubuntu 15.04):
Hope that helps.
There should be an answer that states the actual solution to the problem rather than it only being in the comments. This answer is based on information from Ondřej Doněk's .xpi which was placed as downloadable in a comment to the answer that user provided.
The easy solution:
All you have to do to make the original code work is change:
<hbox left="200">
to
<hbox right="-66">
MDN says that for elements immediately within XUL <stack> elements, the attribute right:
specifies the pixel position of the right edge of the element relative
to the right edge of the stack.
Based on the fact that using a negative number such as right="-66" works, we can deduce that what it is actually telling the stack to do is: enlarge such that the right edge of the <stack> is 66 pixels to the right of where it was and place the element with its right edge at the right edge of the stack.
If Ondřej Doněk's answer is updated to include information about using a negative number for the right attribute, then this community wiki answer can be deleted.
Your CSS looks good. You can solve this with pure attributes of XUL. You can use: pack, orient, align, flex ...
Try play with the xul-periodic-table example:
https://github.com/alijc/xul-periodic-table/blob/master/layout.xul
I built a List of CustomListItems in a XML View:
<!-- List with CustomListItem (seperate Icon for event) -->
<List class="cTL" id="test-list2" type="Active" headerText="CustomListItems with Icon Control" items="{path : '/products'}">
<CustomListItem title="boom" counter="3" class="cTL-item" tabindex="1">
<content>
<core:Icon tabindex="2" decorative="false"
color="{
path: 'price',
formatter:'.setPrioColor'
}"
src="sap-icon://add"></core:Icon>
<layout:VerticalLayout class="cTL-text">
<layout:content>
<Label color="#333333" class="cTL-text-title" text="Orange"></Label>
<Text maxLines="1" wrapping="true" class="cTL-text-desc" text="Spain this is a long long long text lalalala onetwothree einzweidreivier Spain this is a long long long text lalalala onetwothree einzweidreivier"></Text>
</layout:content>
</layout:VerticalLayout>
</content>
</CustomListItem>
</List>
and I added some custom css, so that it looks just like a StandardListItem:
.cTL .cTL-item.sapMLIB {
padding: 0 1rem 0 1rem;
}
.cTL .sapUiIcon {
font-size: 1.375rem;
vertical-align: 80%;
}
.cTL .cTL-text {
margin: 1rem 0.5rem 0.5rem 1rem;
}
.cTL .cTL-text .cTL-text-title.sapMLabel {
font-size: 1rem;
color: #333333;
}
.cTL .cTL-text-desc {
color: #666666;
}
So it works fine if the browser window is fullscreen, BUT: On the Screenshot you can see the List with StandardlistItems above and the CustomListItems below. .. They are not responsive! Which Layout element would you recommend to get it behave like the Standardlistitem (shorten the Text and responsive alignment)?
I would wrap the content in a HBox, and both the icon and the additional layout (which I prefer to be a VBox instead of a VerticalLayout) in their own, centered VBox:
(removed all properties except for the important ones):
<List>
<CustomListItem>
<content>
<HBox justifyContent="Start" fitContainer="true">
<VBox justifyContent="Center">
<core:Icon />
</VBox>
<VBox justifyContent="Center">
<Label />
<Text />
</VBox>
</HBox>
</content>
</CustomListItem>
</List>
In our team, we replace the VBox and HBox with sap.ui.layout.Grid control. This will allow your layout to be responsive and work in IE9.
https://sapui5.hana.ondemand.com/sdk/explored.html#/sample/sap.ui.layout.sample.GridInfo/preview
In the example below the rowSelect-event will be triggered if I click a row, but not if clicking the image in the row.
I understand why this happening, but i'm wondering if there is some elegant way to include the subcomponents also (possibly nested subcomponents also)?
<h:form id="form">
<p:growl id="growl" showDetail="true" />
<p:dataTable id="cars" var="car" value="#{tableBean.cars}" rows="5"
selectionMode="single">
<p:ajax event="rowSelect" listener="#{tableBean.onRowSelect}"
update=":form" />
<p:column headerText="Model">
<p:graphicImage value="myImage.png"
style="width: 40px; height: 40px;" />
</p:column>
</p:dataTable>
</h:form>
You can try to add an onclick event on the image:
<p:dataTable rowIndexVar="rowIndex" widgetVar="scrollist"...
... onclick="scrollist.unselectAllRows(); scrollist.selectRow(#{rowIndex})"
If the embedded content is an image that will be always displayed in a column (like in the picture below) and you want the image not interfering with the row selection, you can do:
<p:column styleClass="my_icon">
And create the css class:
.my_icon {
background-image: url("myicon.png");
background-repeat: no-repeat;
background-position: center;
}
You will get something like this:
just add the css to embeded img tag:
table tbody td img {
pointer-events: none;
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
user-select: none;
}
i have an error when deploying ZK in apache,
java.lang.ClassCastException: neraca.neracaController cannot be cast
to org.zkoss.zk.ui.util.Composer
org.zkoss.zk.ui.metainfo.ComponentInfo.toComposer(ComponentInfo.java:410)
org.zkoss.zk.ui.metainfo.ComponentInfo.toComposer(ComponentInfo.java:397)
org.zkoss.zk.ui.metainfo.ComponentInfo.toComposers(ComponentInfo.java:365)
continued...
here's my zul file,
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit"?>
<zk>
<style>
.silvergray .complex-layout,
.silvergray .complex-layout .z-south,
.silvergray .complex-layout .z-west {
background: #C5E6EF;
}
.breeze .complex-layout,
.breeze .complex-layout .z-south,
.breeze .complex-layout .z-west {
background: #F7F7F7;
}
</style>
<style>
.z-borderlayout {
background: #FFFFFF
}
.complex-layout .z-north {
background: #008BB6;
}
img.complex-layout-header-img {
padding: 0 10px;
}
.complex-layout-header-label {
position: relative;
top: -30px;
padding-left: 40px;
font-size: 24px;
color: White;
font-weight: bold;
}
.inner-border,
.inner-border .z-north,
.inner-border .z-west,
.inner-border .z-south,
.inner-border .z-east {
background: #FFFFFF;
}
.dl-link {
text-decoration: none;
cursor: pointer;
}
</style>
<borderlayout sclass="complex-layout" height="700px">
<north size="90px" border="0">
<div>
<image sclass="complex-layout-header-img" src="/images/Adempiere.png" />
<label sclass="complex-layout-header-label" value="SCM for Small and Medium Business" />
</div>
</north>
<!-- Sidebar -->
<west width="200px" border="0" flex="true" splittable="true" margins="0,5,0,0">
<vlayout spacing="0">
<panel width="100%" border="normal" title="Menu">
<panelchildren style="padding:5px;">
<vbox>
<toolbarbutton label="Jurnal Keuangan" href="lap_keuangan.zul" image="images/book.png"/>
<toolbarbutton label="Buku Besar " href="neraca.zul" image="images/3.png"/>
<toolbarbutton label="Rasio Lancar" href="rasiolancar.zul" image="images/Modify.png" />
<toolbarbutton label="Rasio Kas" href="kas.zul" image="images/2.png"/>
<toolbarbutton label="Rasio Cepat" href="cepat.zul" image="images/Pie.png"/>
<toolbarbutton label="Rasio Modal Kerja dan Aktiva" href="aktiva.zul" image="images/Bar.png"/>
</vbox>
</panelchildren>
</panel>
</vlayout>
</west>
<!-- Content -->
<center>
<borderlayout sclass="inner-border">
<north border="0" height="4%" margins="2,3,0,0">
<label value="Neraca Keuangan" style="font-size:20px;" />
</north>
<center border="0" margins="0,3,3,3">
<window id="win2" title="" width="auto" height="auto" border="" apply="neraca.neracaController">
<grid>
<rows>
<row>
<hlayout>
<div>
<label>Tahun</label>
<combobox id="tahun" >
<comboitem label="2002"/>
<comboitem label="2003"/>
<comboitem label="2004"/>
<comboitem label="2005"/>
<comboitem label="2006"/>
</combobox>
<button id="pilih" label="pilih"/>
<button id="cetak" label="Cetak" image="images/Print.png"/>
</div>
</hlayout>
</row>
</rows>
</grid>
<listbox id="neraca" multiple="true" model="#{win2$composer.allEvents, load-after='pilih.onClick'}">
<listhead>
<listheader label="Nomer Transaksi"/>
<listheader label="Akun"/>
<listheader label="Periode"/>
<listheader label="Saldo Awal"/>
<listheader label="Debet"/>
<listheader label="Credit"/>
</listhead>
<listitem self="#{each='event'}" value="#{event}">
<listcell label="#{event.trans_no}"/>
<listcell label="#{event.acc_number}"/>
<listcell label="#{event.periode}"/>
<listcell label="#{event.saldo}"/>
<listcell label="#{event.debet}"/>
<listcell label="#{event.credit}"/>
</listitem>
</listbox>
</window>
</center>
</borderlayout>
</center>
<south size="40px" border="0" style="background: none repeat scroll 0 0 ;">
<toolbar mold="panel" align="center">
Powered by ZK
</toolbar>
</south>
</borderlayout>
</zk>
i guess error in apply tag, but im not sure, i have changed it but error still occured, please anyone help me :)
What does your java class neraca.neracaController look like? It must extend from GenericForwardComposer. If it does then there should be no problems.
public class NeracaController extends GenericForwardComposer {
...
}
For more information please refer to this documentation.
I have created a tabbox using the following code (with a screenshot attached).
How do I set the size of the tab to be larger so there is padding around the label?
<tabbox>
<tabs>
<tab label="A LABEL"></tab>
</tabs>
<tabpanels>
<button>
</tabpanels>
</tabbox>
http://img38.imageshack.us/img38/2484/tabbox.png http://img38.imageshack.us/img38/2484/tabbox.png
I have tried the following CSS:
tab, tabs, tabbox {
height: 2em;
line-height: 20px;
padding: 10px;
margin: 10px;
}
However nothing changes, I've tried to also replace the label attribute with a child label element and a child description element, however that proves futile also.
Suggestions?
edit for searching: Unable to change styles for XUL elements in firefox on Mac OS X
It is an OSX thing, which you can override with something like this :
<tabbox>
<tabs>
<tab style="-moz-appearance: none;">
<label value="test1" style="font-size: 20px; padding: 5px;"/>
</tab>
</tabs>
<tabpanels>
<button/>
</tabpanels>
</tabbox>
Now you can pretty much customize it to anything you like.
Here is a screenshot of something I did with tabs :
alt text http://img299.imageshack.us/img299/8103/selection001.png