Hi noahhuang, Can you please provide DOM for Tree.. I asked this here.. http://forum.zkoss.org/question/90327/dom-of-zk-7-tree/
Please Help. Thanks in Advance.
MVarun ( 2014-01-29 13:30:19 +0800 )editFirst time here? Check out the FAQ!
In a previous post i was trying to find out how to declare a zk combobox/checkbox with bootstrap support. Now i have the sane problem with the zk datebox:
<n:form class="form-horizontal" role="form">
<n:div class="form-group">
<n:label for="txtMail" class="col-sm-3 control-label">User name</n:label>
<n:div class="col-sm-8">
<textbox id="txtMail" class="form-control input-sm"/>
</n:div>
</n:div>
<n:div class="form-group">
<n:label for="txtPassword" class="col-sm-3 control-label">Password</n:label>
<n:div class="col-sm-8">
<textbox id="txtPassword" type="password" class="form-control input-sm" />
</n:div>
</n:div>
<n:div class="form-group">
<n:label for="chkAdmin" class="col-sm-3 control-label">Administrator</n:label>
<n:div class="col-sm-8">
<div sclass="input-group">
<checkbox sclass="input-group-addon input-sm"/>
<textbox id="chkAdmin" sclass="form-control input-sm" />
</div>
</n:div>
</n:div>
<n:div class="form-group">
<n:label for="lboxRole" class="col-sm-3 control-label">Role</n:label>
<n:div class="col-sm-8">
<listbox id="lboxRole" sclass="form-control input-sm" mold="select">
<listitem label="Administrator" />
<listitem label="Superuser" />
<listitem label="Accounting" />
<listitem label="Finance" />
<listitem label="Corporate" />
</listbox>
</n:div>
</n:div>
<!-- HOW TO DECLARE DATE BOX? -->
<n:div class="form-group">
<n:label for="txtBirth" class="col-sm-3 control-label">Birthdate</n:label>
<n:div class="col-sm-8">
<datebox id="txtBirth" class="form-control input-sm" />
</n:div>
</n:div>
</n:form>
Any idea?
/costas
Hello cyiannoulis, the datebox is composed of span, input and icon, so have to override the input and icon sytle.
<style>
.z-datebox-input { // simlar to bootstrap's form-control class
display: table-cell;
width: 100%;
margin-bottom: 0;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.428571429;
color: #555;
vertical-align: middle;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.z-datebox-button { // simlar to bootstrap's input-group-addon class
padding: 6px 12px;
font-size: 14px;
font-weight: normal;
line-height: 1;
text-align: center;
background-color: #eee;
border: 1px solid #ccc;
border-radius: 4px;
width: 1%;
white-space: nowrap;
vertical-align: middle;
display: table-cell;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
border-left: 0;
}
</style>
<datebox sclass="input-group" />
Hi noahhuang, Can you please provide DOM for Tree.. I asked this here.. http://forum.zkoss.org/question/90327/dom-of-zk-7-tree/
Please Help. Thanks in Advance.
MVarun ( 2014-01-29 13:30:19 +0800 )editGreat! Thank you noahhuang! The layout is fine but i have a question now...
If you declare a date field using a native html input control like the one below:
<input type="date" />
Then the bootstrap recognizes whether you are viewing the page from a desktop or a mobile browser and if you tap with your finger a nice date picker pop up:
The same does not happen with the datebox widget. It displays the same classic datepicker both on the desktop and the mobile browser:
On the other hand, the ZK listview has a different behavior. For example, if you declare something like this:
<listbox id="lboxRole" sclass="form-control input-sm" mold="select">
<listitem label="Administrator" />
<listitem label="Superuser" />
<listitem label="Accounting" />
</listbox>
the page recognizes the mobile browser and opens the "native" mobile list selector.
Any idea?
Thanks again /costas
datebox should change view when using mobile browser, please try in http://temp.zkfiddle.org:1223/t700/1nk3fr0/1/
this feature only work in ZK EE version
noahhuang ( 2014-01-31 04:38:48 +0800 )editYes. You are right. Still i don't understand why this feature is not available in PE edition. Anyway, thanks again, Costas
cyiannoulis ( 2014-01-31 08:19:02 +0800 )editAsked: 2014-01-20 11:19:04 +0800
Seen: 99 times
Last updated: Jan 29 '14