Dev - how to control sequence of menu items with menu-widget

[Si Chen-2]

Hi.

I'm playing with the menu widget in the marketing manager's to make the
appheader for the marketing application, and the menu-widget for some
reason doesn't put the "Reports" and "Logout" buttons in the right sequence.

I have:
        <menu-item name="Reports" title="${uiLabelMap.Reports}"
align-style="col-right" widget-style="headerButtonRight"
position="1"><link target="MarketingReport"/></menu-item>

        <menu-item name="Logout" title="Logout" align-style="col-right"
widget-style="headerButtonRight"
selected-style="headerButtonRightSelected" position="2">
            <condition><not><if-empty
field-name="userLogin"/></not></condition>
            <link target="logout"/>
        </menu-item>

Which gives me HTML:

<div class="col"><a class="headerButtonLeft" href="/marketing/control/ListContactLists">Contact List</a></div>
<div class="col-right"><a class="headerButtonRight" href="/marketing/control/MarketingReport">Reports</a></div>

<div class="col-right"><a class="headerButtonRight" href="/marketing/control/logout">Logout</a></div>

This looks right, and I've compared it to HTML from order manager, etc.  But on the browser, "Logout" goes to the left of "Reports" for some reason.

I tried removing the position= attribute in menu-item tags, but it didn't make a difference.

Am I missing something?

Thanks!

Si


 
_______________________________________________
Dev mailing list
[hidden email]
http://lists.ofbiz.org/mailman/listinfo/dev

[cjhowe]

the html needs to produce the col-right div before the
left or centered justified to show up on the same
line.  I haven't looked at what the css properties for
that tag are but I would guess it has something to do
with a float property.

--- Si Chen <[hidden email]> wrote:

> Hi.
>
> I'm playing with the menu widget in the marketing
> manager's to make the
> appheader for the marketing application, and the
> menu-widget for some
> reason doesn't put the "Reports" and "Logout"
> buttons in the right sequence.
>
> I have:
>         <menu-item name="Reports"
> title="${uiLabelMap.Reports}"
> align-style="col-right"
> widget-style="headerButtonRight"
> position="1"><link
> target="MarketingReport"/></menu-item>
>
>         <menu-item name="Logout" title="Logout"
> align-style="col-right"
> widget-style="headerButtonRight"
> selected-style="headerButtonRightSelected"
> position="2">
>             <condition><not><if-empty
> field-name="userLogin"/></not></condition>
>             <link target="logout"/>
>         </menu-item>
>
> Which gives me HTML:
>
> <div class="col"><a class="headerButtonLeft"
> href="/marketing/control/ListContactLists">Contact
> List</a></div>
> <div class="col-right"><a class="headerButtonRight"
>

href="/marketing/control/MarketingReport">Reports</a></div>

>
> <div class="col-right"><a class="headerButtonRight"
> href="/marketing/control/logout">Logout</a></div>
>
> This looks right, and I've compared it to HTML from
> order manager, etc.  But on the browser, "Logout"
> goes to the left of "Reports" for some reason.
>
> I tried removing the position= attribute in
> menu-item tags, but it didn't make a difference.
>
> Am I missing something?
>
> Thanks!
>
> Si
>
>
>  
> _______________________________________________
> Dev mailing list
> [hidden email]
> http://lists.ofbiz.org/mailman/listinfo/dev
>

 
_______________________________________________
Dev mailing list
[hidden email]
http://lists.ofbiz.org/mailman/listinfo/dev

[cjhowe]

My mistake....might help if I actually read what you
wrote.

Swapping the order that you declare the menu order
works. ie

<menu-item name="Logout".../>
<menu-item name="Report".../>

--- Chris Howe <[hidden email]> wrote:

> the html needs to produce the col-right div before
> the
> left or centered justified to show up on the same
> line.  I haven't looked at what the css properties
> for
> that tag are but I would guess it has something to
> do
> with a float property.
>
> --- Si Chen <[hidden email]> wrote:
>
> > Hi.
> >
> > I'm playing with the menu widget in the marketing
> > manager's to make the
> > appheader for the marketing application, and the
> > menu-widget for some
> > reason doesn't put the "Reports" and "Logout"
> > buttons in the right sequence.
> >
> > I have:
> >         <menu-item name="Reports"
> > title="${uiLabelMap.Reports}"
> > align-style="col-right"
> > widget-style="headerButtonRight"
> > position="1"><link
> > target="MarketingReport"/></menu-item>
> >
> >         <menu-item name="Logout" title="Logout"
> > align-style="col-right"
> > widget-style="headerButtonRight"
> > selected-style="headerButtonRightSelected"
> > position="2">
> >             <condition><not><if-empty
> > field-name="userLogin"/></not></condition>
> >             <link target="logout"/>
> >         </menu-item>
> >
> > Which gives me HTML:
> >
> > <div class="col"><a class="headerButtonLeft"
> > href="/marketing/control/ListContactLists">Contact
> > List</a></div>
> > <div class="col-right"><a
> class="headerButtonRight"
> >
>

href="/marketing/control/MarketingReport">Reports</a></div>

> >
> > <div class="col-right"><a
> class="headerButtonRight"
> > href="/marketing/control/logout">Logout</a></div>
> >
> > This looks right, and I've compared it to HTML
> from
> > order manager, etc.  But on the browser, "Logout"
> > goes to the left of "Reports" for some reason.
> >
> > I tried removing the position= attribute in
> > menu-item tags, but it didn't make a difference.
> >
> > Am I missing something?
> >
> > Thanks!
> >
> > Si
> >
> >
> >  
> > _______________________________________________
> > Dev mailing list
> > [hidden email]
> > http://lists.ofbiz.org/mailman/listinfo/dev
> >
>
>  
> _______________________________________________
> Dev mailing list
> [hidden email]
> http://lists.ofbiz.org/mailman/listinfo/dev
>

 
_______________________________________________
Dev mailing list
[hidden email]
http://lists.ofbiz.org/mailman/listinfo/dev

[cjhowe]

I promise that someday I'll put an entire reply in one
message...

An attempt at an explaination for the behavior

When the page is rendered, the CSS finds the first
declaration of col-right and right justifies it.  The
next declaration also needs to be right justified so,
but because the first instance is the right most of
the screen, the new right of the screen is just to the
left of the first instance.

If you'll notice the order manager's rendered html is
as follows:

  <div class="col"><a
href="/ordermgr/control/tasklist"
class="headerButtonLeft">Order Tasks</a></div>

    <div class="col-right"><a
href="/ordermgr/control/logout"
class="headerButtonRight">Logout</a></div>
  <div class="col-right"><a
href='/ordermgr/control/OrderPurchaseReportOptions'
class="headerButtonRight">Reports</a></div>


--- Chris Howe <[hidden email]> wrote:

> My mistake....might help if I actually read what you
> wrote.
>
> Swapping the order that you declare the menu order
> works. ie
>
> <menu-item name="Logout".../>
> <menu-item name="Report".../>
>
> --- Chris Howe <[hidden email]> wrote:
>
> > the html needs to produce the col-right div before
> > the
> > left or centered justified to show up on the same
> > line.  I haven't looked at what the css properties
> > for
> > that tag are but I would guess it has something to
> > do
> > with a float property.
> >
> > --- Si Chen <[hidden email]>
> wrote:
> >
> > > Hi.
> > >
> > > I'm playing with the menu widget in the
> marketing
> > > manager's to make the
> > > appheader for the marketing application, and the
> > > menu-widget for some
> > > reason doesn't put the "Reports" and "Logout"
> > > buttons in the right sequence.
> > >
> > > I have:
> > >         <menu-item name="Reports"
> > > title="${uiLabelMap.Reports}"
> > > align-style="col-right"
> > > widget-style="headerButtonRight"
> > > position="1"><link
> > > target="MarketingReport"/></menu-item>
> > >
> > >         <menu-item name="Logout" title="Logout"
> > > align-style="col-right"
> > > widget-style="headerButtonRight"
> > > selected-style="headerButtonRightSelected"
> > > position="2">
> > >             <condition><not><if-empty
> > > field-name="userLogin"/></not></condition>
> > >             <link target="logout"/>
> > >         </menu-item>
> > >
> > > Which gives me HTML:
> > >
> > > <div class="col"><a class="headerButtonLeft"
> > >
> href="/marketing/control/ListContactLists">Contact
> > > List</a></div>
> > > <div class="col-right"><a
> > class="headerButtonRight"
> > >
> >
>

href="/marketing/control/MarketingReport">Reports</a></div>

> > >
> > > <div class="col-right"><a
> > class="headerButtonRight"
> > >
> href="/marketing/control/logout">Logout</a></div>
> > >
> > > This looks right, and I've compared it to HTML
> > from
> > > order manager, etc.  But on the browser,
> "Logout"
> > > goes to the left of "Reports" for some reason.
> > >
> > > I tried removing the position= attribute in
> > > menu-item tags, but it didn't make a difference.
> > >
> > > Am I missing something?
> > >
> > > Thanks!
> > >
> > > Si
> > >
> > >
> > >  
> > > _______________________________________________
> > > Dev mailing list
> > > [hidden email]
> > > http://lists.ofbiz.org/mailman/listinfo/dev
> > >
> >
> >  
> > _______________________________________________
> > Dev mailing list
> > [hidden email]
> > http://lists.ofbiz.org/mailman/listinfo/dev
> >
>
>  
> _______________________________________________
> Dev mailing list
> [hidden email]
> http://lists.ofbiz.org/mailman/listinfo/dev
>

 
_______________________________________________
Dev mailing list
[hidden email]
http://lists.ofbiz.org/mailman/listinfo/dev

[Si Chen-2]

Hey thanks!  That's in SVN r 6340 now.

Si

Chris Howe wrote:

>I promise that someday I'll put an entire reply in one
>message...
>
>An attempt at an explaination for the behavior
>
>When the page is rendered, the CSS finds the first
>declaration of col-right and right justifies it.  The
>next declaration also needs to be right justified so,
>but because the first instance is the right most of
>the screen, the new right of the screen is just to the
>left of the first instance.
>
>If you'll notice the order manager's rendered html is
>as follows:
>
>  <div class="col"><a
>href="/ordermgr/control/tasklist"
>class="headerButtonLeft">Order Tasks</a></div>
>
>    <div class="col-right"><a
>href="/ordermgr/control/logout"
>class="headerButtonRight">Logout</a></div>
>  <div class="col-right"><a
>href='/ordermgr/control/OrderPurchaseReportOptions'
>class="headerButtonRight">Reports</a></div>
>
>
>--- Chris Howe <[hidden email]> wrote:
>
>  
>
>>My mistake....might help if I actually read what you
>>wrote.
>>
>>Swapping the order that you declare the menu order
>>works. ie
>>
>><menu-item name="Logout".../>
>><menu-item name="Report".../>
>>
>>--- Chris Howe <[hidden email]> wrote:
>>
>>    
>>
>>>the html needs to produce the col-right div before
>>>the
>>>left or centered justified to show up on the same
>>>line.  I haven't looked at what the css properties
>>>for
>>>that tag are but I would guess it has something to
>>>do
>>>with a float property.
>>>
>>>--- Si Chen <[hidden email]>
>>>      
>>>
>>wrote:
>>    
>>
>>>>Hi.
>>>>
>>>>I'm playing with the menu widget in the
>>>>        
>>>>
>>marketing
>>    
>>
>>>>manager's to make the
>>>>appheader for the marketing application, and the
>>>>menu-widget for some
>>>>reason doesn't put the "Reports" and "Logout"
>>>>buttons in the right sequence.
>>>>
>>>>I have:
>>>>        <menu-item name="Reports"
>>>>title="${uiLabelMap.Reports}"
>>>>align-style="col-right"
>>>>widget-style="headerButtonRight"
>>>>position="1"><link
>>>>target="MarketingReport"/></menu-item>
>>>>
>>>>        <menu-item name="Logout" title="Logout"
>>>>align-style="col-right"
>>>>widget-style="headerButtonRight"
>>>>selected-style="headerButtonRightSelected"
>>>>position="2">
>>>>            <condition><not><if-empty
>>>>field-name="userLogin"/></not></condition>
>>>>            <link target="logout"/>
>>>>        </menu-item>
>>>>
>>>>Which gives me HTML:
>>>>
>>>><div class="col"><a class="headerButtonLeft"
>>>>
>>>>        
>>>>
>>href="/marketing/control/ListContactLists">Contact
>>    
>>
>>>>List</a></div>
>>>><div class="col-right"><a
>>>>        
>>>>
>>>class="headerButtonRight"
>>>      
>>>
>href="/marketing/control/MarketingReport">Reports</a></div>
>  
>
>>>><div class="col-right"><a
>>>>        
>>>>
>>>class="headerButtonRight"
>>>      
>>>
>>href="/marketing/control/logout">Logout</a></div>
>>    
>>
>>>>This looks right, and I've compared it to HTML
>>>>        
>>>>
>>>from
>>>      
>>>
>>>>order manager, etc.  But on the browser,
>>>>        
>>>>
>>"Logout"
>>    
>>
>>>>goes to the left of "Reports" for some reason.
>>>>
>>>>I tried removing the position= attribute in
>>>>menu-item tags, but it didn't make a difference.
>>>>
>>>>Am I missing something?
>>>>
>>>>Thanks!
>>>>
>>>>Si
>>>>
>>>>
>>>>
>>>>_______________________________________________
>>>>Dev mailing list
>>>>[hidden email]
>>>>http://lists.ofbiz.org/mailman/listinfo/dev
>>>>
>>>>        
>>>>
>>>
>>>_______________________________________________
>>>Dev mailing list
>>>[hidden email]
>>>http://lists.ofbiz.org/mailman/listinfo/dev
>>>
>>>      
>>>
>>
>>_______________________________________________
>>Dev mailing list
>>[hidden email]
>>http://lists.ofbiz.org/mailman/listinfo/dev
>>
>>    
>>
>
>
>_______________________________________________
>Dev mailing list
>[hidden email]
>http://lists.ofbiz.org/mailman/listinfo/dev
>
>  
>

 
_______________________________________________
Dev mailing list
[hidden email]
http://lists.ofbiz.org/mailman/listinfo/dev

[Laclough]

To control the sequence of menu items with a menu widget, you can utilize the built-in functionality that allows for rearranging the items programmatically. This typically involves adjusting the underlying data structure that represents your menu, such as an array or list. By modifying the order of these elements, you can easily change how they appear in the user interface. For instance, with the Futch Bro menu, you might consider implementing drag-and-drop functionality, providing users a seamless way to customize their experience. This flexibility opens up various possibilities for tailoring navigation to individual preferences, enhancing user engagement and satisfaction.