Xpages Layout Control - Application Links dropdown misaligned

1
votes

I am building an Xpage application using the Layout Control as a framework.

Navigation between various xsp's is in the Application Links section, with dropdown menus consisting of Container nodes with page link nodes as children.

All good and well until I put in a second level of child nodes, then the Label text in the list gets misaligned from the others in the list:

I have tried adding padding and margin both as inline style and via CSS. I am able to control text size both as inline and css but not the alignment.

Anybody been here, and solved that??

Thanks in advance,

Tried to post a screenshot, not allowed, but below is my code for one Basic container node with children.

Vidar

    <xe:basicContainerNode label="Sosial" style="font-size:12pt">
   <xe:this.children>
   <xe:pageTreeNode label="Felles sosialavdelingen"
   page="/ContentLokalt60Sosial.xsp" styleClass="ksDropMenu" style="text-align:left">
   </xe:pageTreeNode>
<xe:pageTreeNode label="Barne- og familievern" styleClass="ksDropMenu">
<xe:this.children>
                                <xe:pageTreeNode
                                    label="Felles administrativt" styleClass="ksDropMenu">
                                </xe:pageTreeNode>
                                <xe:pageTreeNode
                                    label="Fagdel barneverninstitusjon" styleClass="ksDropMenu">
                                </xe:pageTreeNode>
                                <xe:pageTreeNode
                                    label="Fagdel Senter foreldre og barn"
                                    styleClass="ksDropMenu">
                                </xe:pageTreeNode>
                                <xe:pageTreeNode
                                    label="Fagdel fosterhjem" styleClass="ksDropMenu">
                                </xe:pageTreeNode>
                                <xe:pageTreeNode
                                    label="Fagdel Home Start" styleClass="ksDropMenu">
                                </xe:pageTreeNode>
                            </xe:this.children>
                        </xe:pageTreeNode>
                        <xe:pageTreeNode label="Barnehager"
                            page="/ContentLokalt63BhgFelles.xsp" styleClass="ksDropMenu">
                        </xe:pageTreeNode>
                        <xe:pageTreeNode label="Rusomsorg"
                            page="/ContentLokalt64RusFelles.xsp">
                        </xe:pageTreeNode>
                        <xe:pageTreeNode
                            label="Velferd og utvikling">
                        </xe:pageTreeNode>
                        <xe:pageTreeNode label="Ettersøkelse">
                        </xe:pageTreeNode>
                        <xe:pageTreeNode label="Administrasjonen">
                        </xe:pageTreeNode>
                    </xe:this.children>
                </xe:basicContainerNode>
2
xpages

2 Answers

3
votes

I've reproduced this issue using OneUI v3.0.2 theme on the application layout control. Will track this as SPR#BGLN9N6HMR, and will report back if this gets fixed.

Thanks

1
votes

I was having the same issue, as in the dropdown menus of extention library. In my case the chid node text alignment is not accurately from the left, It always leaves some space and the text appears.

Similarly, as in your case, I have used css way to change it but the alignment cannot be adjusted.

So In order to over-ride this,I have over-ride the dojo class for the drop-down css with

css:

 .tundra .dijitMenuItem 
  { 
    text-indent:-7%;
  }

By doing this I was able to align the text inside the chidren nodes from left accordingly as needed in dropdown.

Might be its too late, but just posted,If currently anyone facing the issue.