screen loading sequence
Locked
 
|
Generally ofbiz default first loads header,left screen,right screen and then body. But I want in sequence such that first header, body,left bar and then right bar. i made the change in commonscreen.xml file but prob. is that the footer is comming immediately after product screen overlapping the right bar.i tried by changing css but it does not worked.
Plz suggest me some solution since i am trying very hard to achieve this. |
|
|
please attach your screen definition.
--- rajshekhar <[hidden email]> wrote: > > Generally ofbiz default first loads header,left > screen,right screen and then > body. But I want in sequence such that first header, > body,left bar and then > right bar. i made the change in commonscreen.xml > file but prob. is that the > footer is comming immediately after product screen > overlapping the right > bar.i tried by changing css but it does not worked. > Plz suggest me some solution since i am trying > very hard to achieve > this. > > -- > View this message in context: > > Sent from the OFBiz - User forum at Nabble.com. > > |
|
|
This is screen defination
<screen name="main-decorator"> <section> <actions> <property-map resource="EcommerceUiLabels" map-name="uiLabelMap" global="true"/> <property-map resource="CommonUiLabels" map-name="uiLabelMap" global="true"/> <property-map resource="ProductUiLabels" map-name="uiLabelMap" global="true"/> <property-map resource="AccountingUiLabels" map-name="uiLabelMap" global="true"/> <property-map resource="PartyUiLabels" map-name="uiLabelMap" global="true"/> <property-map resource="OrderUiLabels" map-name="uiLabelMap" global="true"/> <set field="MainColumnStyle" value="nocolumns" global="true"/> <script location="component://sfms/widget/EcommerceSetup.bsh"/> <script location="component://sfms/webapp/sfms/includes/metatagfiles/sfmskeywords.bsh"/> </actions> <widgets> <platform-specific><html><html-template location="component://sfms/webapp/sfms/includes/header.ftl"/></html></platform-specific> <container id="ecom-mainarea"> <container style="${MainColumnStyle}"> <platform-specific><html><html-template location="component://common/webcommon/includes/messages.ftl"/></html></platform-specific> <decorator-section-include name="body"/> </container> <include-screen name="${leftbarScreenName}" location="${leftbarScreenLocation}"/> <include-screen name="${rightbarScreenName}" location="${rightbarScreenLocation}"/> <container style="endcolumns"/> </container> <platform-specific><html><html-template location="component://sfms/webapp/sfms/includes/footer.ftl"/></html></platform-specific> </widgets> </section> </screen> |
|
|
I'm getting slightly different behavior than what you
described in the first email. I'm getting center div printing then the leftbar and right bar print after the center div is done, with no overlap of the footer. From this description, the following describes your problem. your problem (if that's what you want to call it) is in your css. The CSS properties for the left and right bars are not set to a vertical position, they're relative and floated. The left bar has the left property so it's is going to wait till everything is output before it, move down a "line" and position itself on the far left. The right bar is going to position itself to the far right. In the ecommerce example the leftbar has nothing written before it in the ecom-mainarea container so it moves to the first "line" inside the container, the right bar follows suit and moves itself as far to the right as possible. The center is printed after it and because it is also relative can take up the empty space in between the left and right bar. In your example, the center area prints, then the left bar moves to the left as soon as it can, which is one line below the center div. Then the right bar prints moving itself to the far right. --- rajshekhar <[hidden email]> wrote: > > This is screen defination > > <screen name="main-decorator"> > <section> > <actions> > <!-- base/top/specific map first, > then more common map added > for shared labels --> > <property-map > resource="EcommerceUiLabels" > map-name="uiLabelMap" global="true"/> > <property-map > resource="CommonUiLabels" > map-name="uiLabelMap" global="true"/> > <property-map > resource="ProductUiLabels" > map-name="uiLabelMap" global="true"/> > <property-map > resource="AccountingUiLabels" > map-name="uiLabelMap" global="true"/> > <property-map > resource="PartyUiLabels" map-name="uiLabelMap" > global="true"/> > <property-map > resource="OrderUiLabels" map-name="uiLabelMap" > global="true"/> > > <set field="MainColumnStyle" > value="nocolumns" > global="true"/> > > <script > > <script > location="component://sfms/webapp/sfms/includes/metatagfiles/sfmskeywords.bsh"/> > </actions> > <widgets> > <!-- render header --> > > <platform-specific><html><html-template > location="component://sfms/webapp/sfms/includes/header.ftl"/></html></platform-specific> > > <container id="ecom-mainarea"> > <!-- by default will render > left-bar only if > left/rightbarScreenName value not empty --> > > <container > style="${MainColumnStyle}"> > <!-- render messages --> > > > <platform-specific><html><html-template > > <decorator-section-include > name="body"/> > > </container> > <include-screen > name="${leftbarScreenName}" > location="${leftbarScreenLocation}"/> > <include-screen name="${rightbarScreenName}" > location="${rightbarScreenLocation}"/> > > <container style="endcolumns"/> > > > </container> > > <!-- render footer --> > <platform-specific><html><html-template > > > > </widgets> > </section> > </screen> > -- > View this message in context: > http://www.nabble.com/screen-loading-sequence-tf2065552.html#a5700068 > Sent from the OFBiz - User forum at Nabble.com. > > |
|
|
i am expecting the same behaviour (center div
printing then the leftbar and right bar print after the center div is done),I want this sequence of loading. Can you suggest what changes are required in css. This is the change i made in css,Please see whether any correction are to be made //CSS #ecom-mainarea { position: relative; background: #FFFFFF; width: 100%; } #ecom-mainarea .left { position: absolute; left: 0px; top: 0px; float: left; width: 150px; background: #ffffff; // margin-top: 10px; } #ecom-mainarea .right { position: absolute; right: 0px; top: 0px; margin-top: 10px; float: right; width: 200px; background: #ffffff; } #ecom-mainarea .center { position: relative; margin-left: 160px; margin-right: 210px; voice-family: "\"}\""; voice-family: inherit; } .footer { color: #999999; font-size: 75%; margin: 2.5em 0.2em 0.5em 0.5em; padding: 0.8em; border-top: 1px solid #999999; text-align: left; clear: both; } |
|
|
The fastest way I know to troubleshoot css is to use
firefox and download the Web Developer Toolbar extention. Granted, this doesn't help you with IE screwups, but will get you close enough nonetheless. --- rajshekhar <[hidden email]> wrote: > > i am expecting the same behaviour (center div > printing then the leftbar and right bar print after > the center div is done),I want this sequence of > loading. > Can you suggest what changes are required in css. > This is the change i made in css,Please see whether > any correction are to be > made > //CSS > > #ecom-mainarea { > position: relative; > background: #FFFFFF; > width: 100%; > } > > #ecom-mainarea .left { > > position: absolute; left: 0px; top: 0px; > float: left; > width: 150px; > background: #ffffff; // > margin-top: 10px; > > } > > #ecom-mainarea .right { > > position: absolute; right: 0px; top: 0px; > margin-top: 10px; > float: right; > width: 200px; > background: #ffffff; > } > > #ecom-mainarea .center { > position: relative; > margin-left: 160px; > margin-right: 210px; > voice-family: "\"}\""; > voice-family: inherit; > > } > > .footer { > color: #999999; > font-size: 75%; > margin: 2.5em 0.2em 0.5em 0.5em; > padding: 0.8em; > border-top: 1px solid #999999; > text-align: left; > clear: both; > } > > -- > View this message in context: > > Sent from the OFBiz - User forum at Nabble.com. > > |
|
|
I am using IE so it is difficult,Can u suggest me what may be wrong with the css code i submitted, There are no any changes i emade expect this
|
Administrator
|
Why not give a try to Firefox http://www.mozilla.com and the Web Developer Toolbar extension https://addons.mozilla.org/firefox/60 ?
Jacques From: "rajshekhar" <[hidden email]> > I am using IE so it is difficult,Can u suggest me what may be wrong with the > css code i submitted, There are no any changes i emade expect this > -- > View this message in context: http://www.nabble.com/screen-loading-sequence-tf2065552.html#a5700556 > Sent from the OFBiz - User forum at Nabble.com. |
|
|
In reply to this post by rajshekhar
change your footer properies to include
position: absolute; bottom: -20px; width:100% this will move the footer 20 px below the bottom of the screen (should be enough room for your footer otherwise salt to taste). The width will make sure that you're centering from the whole screen not just the size of the output of the footer div. not perfect but should work for that ecommerce layout also be sure that your footer definition in the common screen is wrapped with <container style="footer"> <!--footer definition--> </container <container style="mydiv"> --- rajshekhar <[hidden email]> wrote: > > I am using IE so it is difficult,Can u suggest me > what may be wrong with the > css code i submitted, There are no any changes i > emade expect this > -- > View this message in context: > http://www.nabble.com/screen-loading-sequence-tf2065552.html#a5700556 > Sent from the OFBiz - User forum at Nabble.com. > > |
«
Return to OFBiz - User
|
1 view|%1 views
| Free forum by Nabble | Edit this page |