Hi All, I have one complex UI binder file. The xml file is attached here. The problem is that it appears as fixed size layout on all system resolution / all sizes of monitors. So it does not look good on high resolution. I want that the panels and widgets inside it should automaticall be adjusted/resize according to the screen/monitor size so that it should look good on all kinds of monitor size/resolution.
Kindly someone pl guide me how to acheive this. -- You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group. To post to this group, send email to google-web-tool...@googlegroups.com. To unsubscribe from this group, send email to google-web-toolkit+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent";> <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui" > <ui:style> /* Add CSS here. See the GWT docs on UI Binder for more details */ body{ background:url(images/index.png) repeat-x scroll 0 0 #D8DCE0; bottom:0; left:0; margin:0; overflow:hidden; position:absolute; right:0; top:0; } .important { font-weight: bold; } .verticalLabel { overflow:scroll; } .headerLabel{ box-shadow: 5px 5px 5px #ccc; -moz-box-shadow: 5px 5px 5px #ccc; -webkit-box-shadow: 5px 5px 5px #ccc; -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px; border-top-left-radius: 10px 10px; border-top-right-radius: 10px 10px; background-color:#5590D2; background-image:-moz-linear-gradient(center top , #61A7F2, #5590D2); border-left:1px solid #86B7ED; left:50px; position:absolute; padding-top: 8px; font-weight: bold; font-size: 13px; overflow: hidden; padding-left: 8px; color:white; cursor:default; margin:6px 0px 0 7px; } .headerLabel1{ box-shadow: 8px 8px 8px #ccc; -moz-box-shadow: 5px 5px 5px #ccc; -webkit-box-shadow: 5px 5px 5px #ccc; -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px; background-color:#5590D2; background-image:-moz-linear-gradient(center top , #61A7F2, #5590D2); border-left:1px solid #86B7ED; left:332px; position:absolute; padding-top: 8px; font-weight: bold; font-size: 13px; overflow: hidden; padding-left: 8px; color:white; cursor:default; margin:6px 0px 0 9px; } .headerLabel2{ box-shadow: 8px 8px 8px #ccc; -moz-box-shadow: 5px 5px 5px #ccc; -webkit-box-shadow: 5px 5px 5px #ccc; -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px; border-top-left-radius: 10px 10px; border-top-right-radius: 10px 10px; background-color:#5590D2; background-image:-moz-linear-gradient(center top , #61A7F2, #5590D2); border-left:1px solid #86B7ED; left:248px; position:absolute; padding-top: 8px; font-weight: bold; font-size: 13px; overflow: hidden; padding-left: 5px; color:white; cursor:default; margin:6px 0px 0 9px; } .simplePane{ box-shadow: 5px 5px 5px #ccc; -moz-box-shadow: 5px 5px 5px #ccc; -webkit-box-shadow: 5px 5px 5px #ccc; background-color: white; left:50px; overflow:auto;height:500px; position:absolute; top:27px; margin:6px 0px 0 7px; border-bottom:2px solid #C9E2FC; } .simplePane2{ box-shadow: 5px 5px 5px #ccc; -moz-box-shadow: 5px 5px 5px #ccc; -webkit-box-shadow: 5px 5px 5px #ccc; background-color: white; left:-150px; overflow:visible;height:500px; position:absolute; top:27px; margin:6px 0px 0 7px; } .resize-bar{} .buttonPanel{ background-color:#C9E2FC; background-image:none; border-left:1px solid #E4F1FE; padding:12px 5px 12px 5px; } .bottomPanel{ background-color:#C9E2FC; background-image:none; margin-top:168px;position:absolute; -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px; border-top-left-radius: 10px 10px; border-top-right-radius: 10px 10px; } .bottomPanel2{ background-color:#C9E2FC; background-image:none; margin-top:416px;position:absolute; -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px; border-top-left-radius: 10px 10px; border-top-right-radius: 10px 10px; } .slider{ margin-left: 50px; } .label{ margin-top: 25px; text-align: center; font-size: small; font-weight: bold; } .lblBus{ margin-top: 20px; margin-right: 10px; text-align: center; font-size: small; font-weight: bold; } .image{ margin-top: 2px; } .busType{ padding: 20px; } .searchBox{ width: 425px; } </ui:style> <g:AbsolutePanel> <g:VerticalPanel> <g:HorizontalPanel width="800px"> <g:HTMLPanel> <table> <tr> <td> <img src="images/logo2.png" width="72px" alt="goglytrip.com home"/> </td> </tr> </table> </g:HTMLPanel> </g:HorizontalPanel> <!-- <g:HorizontalSplitPanel width="1024px" height="768px" splitPosition="200x" styleName="{style.resize-bar}">--> <g:HorizontalPanel width="1024px" height="268px"> <!-- <g:VerticalSplitPanel width="400px" height="600px" splitPosition="300px" styleName="{style.resize-bar}">--> <g:VerticalPanel width="400px" styleName="{style.verticalLabel}"> <g:Label text="Bus Filter" styleName="{style.headerLabel}" width="180px" height="20px"/> <g:AbsolutePanel styleName="{style.simplePane}" width="47%" height="515px"> <g:HTMLPanel ui:field="busPanel"> <div class="demo"> <!-- Price filter --> <!-- <g:Label styleName="{style.label}" ui:field="lblPrice" />--> <!-- <s:Slider vertical="false" showTitle="false" styleName="{style.slider}"></s:Slider>--> <p> <label for="amount" style="padding-left: 25px;">Price range:</label> <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" /> </p> <div style="padding-left:10px; padding-right:10px;"><div id="price-range"></div></div> <!-- <p>Date: <input type="text" id="datepicker" /></p>--> <!-- Departure time -leaving time --> <!-- <g:Label styleName="{style.label}" ui:field="lblTime" />--> <!-- <s:Slider vertical="false" showTitle="false" styleName="{style.slider}"></s:Slider>--> <p> <label for="time" style="padding-left: 30px;">Time range:</label> <input type="text" id="time" style="border:0; color:#f6931f; font-weight:bold;" /> </p> <div style="padding-left:10px; padding-right:10px;"><div id="time-range"></div></div> <!-- <p>Date: <input type="text" id="datepicker" /></p>--> </div><!-- End demo --> </g:HTMLPanel> <!-- Bus Type --> <g:HTMLPanel> <table cellPadding="0" cellSpacing="0"> <tbody> <tr> <td width="1000px"> <g:Label styleName="{style.lblBus}" text="Bus Type"/> </td> <td> <div style="margin-right:10px; margin-top: 25px;"> <g:Image url="images/plus.png" ui:field="imgButton"></g:Image> </div> </td> </tr> </tbody> </table> <table width="300px" align="center" style="margin-top: 20px"> <tbody> <tr> <td> <g:CheckBox text="AC" ui:field="acChecks" ></g:CheckBox> </td> </tr> <tr> <td> <g:CheckBox text="Volvo" ui:field="volvoChecks"></g:CheckBox> </td> </tr> <tr> <td> <g:CheckBox text="Sleeper/Semi-sleeper" ui:field="sleeperChecks"></g:CheckBox> </td> </tr> </tbody> </table> </g:HTMLPanel> <g:HorizontalPanel styleName="{style.bottomPanel}" width="100%" height="25px" > <g:HorizontalPanel width="150px"> <g:HTMLPanel> <!-- html --> </g:HTMLPanel> </g:HorizontalPanel> </g:HorizontalPanel> </g:AbsolutePanel> </g:VerticalPanel> <g:VerticalPanel> <g:Label text="Search" styleName="{style.headerLabel2}" width="752px" height="20px" /> <g:AbsolutePanel styleName="{style.simplePane2}" width="758px" height="515px" > <g:HorizontalPanel styleName="{style.buttonPanel}" width="758px" height="35px" > <g:HorizontalPanel width="750px"> <g:HTMLPanel> <table cellPadding="0" cellSpacing="0"> <tbody> <td> From </td> <td> <div class="left"></div> </td> <td class="center"> <g:SuggestBox ui:field="arraiv"> </g:SuggestBox> </td> <td> <div class="right"></div> </td> </tbody> </table> </g:HTMLPanel> <g:HTMLPanel> <table cellPadding="0" cellSpacing="0"> <tbody> <td> To </td> <td> <div class="left"></div> </td> <td class="center"> <g:SuggestBox ui:field="desti"> </g:SuggestBox> </td> <td> <div class="right"></div> </td> </tbody> </table> </g:HTMLPanel> <g:HTMLPanel ui:field="searchPanel"> Date: <input type="text" id="datepicker" size="18px" /> <g:Button ui:field="button"></g:Button> </g:HTMLPanel> <!-- <d:DateBox></d:DateBox>--> </g:HorizontalPanel> </g:HorizontalPanel> <g:HorizontalPanel styleName="{style.bottomPanel2}" width="100%" height="25px" > <g:HorizontalPanel width="150px"> <g:HTMLPanel> <!-- html --> </g:HTMLPanel> </g:HorizontalPanel> </g:HorizontalPanel> <g:VerticalPanel ui:field="gridPanel"> <!-- <c:CellTable ui:field="table"></c:CellTable> --> <!-- <c:SimplePager ui:field="pager"></c:SimplePager> --> </g:VerticalPanel> </g:AbsolutePanel> </g:VerticalPanel> </g:HorizontalPanel> </g:VerticalPanel> </g:AbsolutePanel> </ui:UiBinder>
