0

Datebox button display in wrong place

asked 2017-04-24 06:11:48 +0800

edgardquirino gravatar image edgardquirino
1 1

updated 2017-04-24 06:13:54 +0800

Hey guys,

I am using Zk 8, and I have a problem with the datebox component. Its button is always appearing below its textbox (I attached a link in the comments section for a picture of my problem).

Here is my ZUL file:

    <window id="postModalDialog" position="center,center" closable="true" border="normal"
        sizable="true" mode="modal" title="Goods Collection: Post"
        width="600px" height="725px" contentStyle="overflow:auto;"
        apply="com.vingroup.rocket.widgets.PostGoodsCollectionMethodController">
    <vbox>
        <vbox width="550px" style="float:left;margin-right:15px;margin-top:10px;margin-left:15px;">
            <label value="Name"/>
            <textbox id="nameTextBox"/>
            <label value="Province"/>
            <bandbox id="provinceBandbox" autodrop="true" buttonVisible="true">
                <bandpopup >
                    <listbox id="provinceListbox" mold="paging" pageSize="5"
                             onSelect="provinceBandbox.value=self.selectedItem.label;
                                       provinceBandbox.close();"/>
                </bandpopup>
            </bandbox>
            <label value="District"/>
            <bandbox id="districtBandbox"  autodrop="true" buttonVisible="true">
                <bandpopup>
                    <listbox id="districtListbox" mold="paging" pageSize="5"
                             onSelect="districtBandbox.value=self.selectedItem.label;
                                       districtBandbox.close();"/>
                </bandpopup>
            </bandbox>
            <label value="Ward"/>
            <bandbox id="wardBandbox"  autodrop="true" buttonVisible="true">
                <bandpopup>
                    <listbox id="wardListbox" mold="paging" pageSize="5"
                             onSelect="wardBandbox.value=self.selectedItem.label;
                                       wardBandbox.close();"/>
                </bandpopup>
            </bandbox>
            <label value="Street"/>
            <bandbox id="streetBandbox" autodrop="true" buttonVisible="true">
                <bandpopup>
                    <listbox id="streetListbox" mold="paging" pageSize="5"
                             onSelect="streetBandbox.value=self.selectedItem.label;
                                       streetBandbox.close();"/>
                </bandpopup>
            </bandbox>
            <label value="Po Box"/>
            <textbox id="poBoxTextbox"/>
            <label value="Postal Code"/>
            <textbox id="postalCodeTextbox"/>
            <label value="Phone Number"/>
            <textbox id="phoneNumberTextBox"/>
            <label value="Received Date"/>
            <datebox id="receivedDateDatebox" format="short"/>
            <label value="Parcel Code (Optional)"/>
            <textbox id="parcelCodeTextbox"/>
            <label value="Organization (Optional)"/>
            <textbox id="organizationTextbox"/>
        </vbox>

        <hbox style="float:left;margin-right:15px;margin-top:10px;margin-left:15px">
            <button id="resetButton"
                    label="Reset"
                    width="100%"
                    sclass="oms-widget-createreturnrequest-configuration-button oms-widget-createreturnrequest-configuration-revert-button"/>
            <button id="confirmButton"
                    width="100%"
                    label="Confirm"
                    sclass="y-btn-primary oms-widget-createreturnrequest-configuration-button oms-widget-createreturnrequest-configuration-save-button"/>
        </hbox>
    </vbox>
</window>

Thanks in advance for the help.

delete flag offensive retag edit

Comments

Here is the link of my picture: https://www.dropbox.com/home?preview=datebox_problem.png

edgardquirino ( 2017-04-24 06:13:00 +0800 )edit

1 Answer

Sort by ยป oldest newest most voted
0

answered 2017-05-03 06:27:03 +0800

chillworld gravatar image chillworld flag of Belgium
5143 3 9
https://github.com/chillw...

Hey Edgard,

First of all, I should try to remove all the styles you have set.
You should never or in rare occasions use a float, ZK make it correct.
Same thing with a fix width, ZK make your pages dynamic, fix width breaks this.

Secondly, don't use vbox in your example but vlayout.
Only use box when you need to align the content in it, otherwise use layout.
Less html generation (no table) and lighter to render.

I copy paste your code into a fiddle : http://zkfiddle.org/sample/scoit4/1-datebox-problem
But, I don't see the exact problem.
Can you alter the fiddle (maybe add the sclasses style) and the exact version and browser you use?

Thx in advance.

Chill.

link publish delete flag offensive edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow
1 follower

RSS

Stats

Asked: 2017-04-24 06:11:48 +0800

Seen: 23 times

Last updated: May 03