8 Replies - 268 Views - Last Post: 22 March 2019 - 10:09 AM Rate Topic: -----

#1 DarenR   User is offline

  • D.I.C Lover

Reputation: 601
  • View blog
  • Posts: 3,932
  • Joined: 12-January 10

how do i force a sub menu to open to the left?

Posted 22 March 2019 - 06:43 AM

I have a menu floated right however i want the submenu items under it to open to the left. I have attached a picture of how it looks currently
the sub menus are dynamically created

asp part:

 <div class="rightFloatDiv">
                   <%-- <asp:Menu id="emailMenu" runat="server" Orientation="Horizontal" StaticSubMenuIndent="10px" CssClass="menuDirection" SubMenuDirection="Left" Visible="False">--%>
                    <asp:Menu id="emailMenu" runat="server" Orientation="Horizontal"  CssClass="menuDirection" SubMenuDirection="Left" Visible="False">
                    <%-- <StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" CssClass="menuDirection" />--%>
                        <DynamicMenuItemStyle CssClass="menuLeft"/>
                   <Items>
                            <asp:MenuItem  Text="Email Tower"  ></asp:MenuItem>
                        </Items>
                    </asp:Menu>  
                    </div>



css part:
.menu {

    background-color: transparent;
}
.menuDirection {
    direction: rtl;
    background-color: transparent;
    text-align: left;
}


.menuLeft {
    text-align: left;
    left: -50% !important;
}



vb part:

 If(count >0 )
                    emailMenu.Visible=true
                  
                    newSubMenuItem.Text = menuItemName
                    newSubMenuItem.NavigateUrl = "mailto:"+ menuItemUrl + "?subject=" + txtSubject '+ "&body=" + txtFrom + "@libertyTire.com"
                    
                    homeMenuItem.ChildItems.Add(newSubMenuItem)

                End If



any thoughts?

Attached image(s)

  • Attached Image


Is This A Good Question/Topic? 0
  • +

Replies To: how do i force a sub menu to open to the left?

#2 andrewsw   User is offline

  • quantum multiprover
  • member icon

Reputation: 6775
  • View blog
  • Posts: 27,938
  • Joined: 12-December 12

Re: how do i force a sub menu to open to the left?

Posted 22 March 2019 - 06:53 AM

Properties left (top, etc.) have no effect unless the element is positioned.

I would also test it first with pixels, rather than a percentage.

And try to avoid the use of !important (although I appreciate you probably added it just as a test).

Is rtl deliberate or another test? It could hinder your debugging I think.

Also: Your question is about HTML/CSS so it is preferable to post the resultant code from the browser, rather than the ASP.NET code.
Was This Post Helpful? 0
  • +
  • -

#3 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 14925
  • View blog
  • Posts: 59,589
  • Joined: 12-June 08

Re: how do i force a sub menu to open to the left?

Posted 22 March 2019 - 07:08 AM

It's hard to gauge.. I can't get a working example from the code above.

Time for the ol' F12 and futz with turning off CSS bits until things line up.
Was This Post Helpful? 0
  • +
  • -

#4 DarenR   User is offline

  • D.I.C Lover

Reputation: 601
  • View blog
  • Posts: 3,932
  • Joined: 12-January 10

Re: how do i force a sub menu to open to the left?

Posted 22 March 2019 - 07:11 AM

here is what the f12 returns -- not sure how to change the li for the sub menu

i tried this but it didnt do anything:

menuItem li {
    left: -50%;
}




maybe i have the wrong syntax?

Attached image(s)

  • Attached Image

Was This Post Helpful? 0
  • +
  • -

#5 DarenR   User is offline

  • D.I.C Lover

Reputation: 601
  • View blog
  • Posts: 3,932
  • Joined: 12-January 10

Re: how do i force a sub menu to open to the left?

Posted 22 March 2019 - 07:20 AM

this is what it needs to be for the particular elements:

 
<ul class="level2 dynamic" id="emailMenu:submenu:2" style="display: none; position: absolute; top: 100%; left: -100px;">
			<li role="menuitem" class="dynamic" style="position: relative;"><a class="level2 menuLeft dynamic" href="mailto:[email protected]?subject=TowerChanges" tabindex="-1">TowerChanges</a></li><li role="menuitem" class="dynamic" style="position: relative;"><a class="level2 menuLeft dynamic" href="mailto:[email protected]?subject=TowerChanges Canada" tabindex="-1">TowerChanges Canada</a></li><li role="menuitem" class="dynamic" style="position: relative;"><a class="level2 menuLeft dynamic" href="mailto:[email protected][email protected]" tabindex="-1">Contracts</a></li><li role="menuitem" class="dynamic" style="position: relative;"><a class="level2 menuLeft dynamic" href="mailto:[email protected][email protected]" tabindex="-1">Tower Payments</a></li><li role="menuitem" class="dynamic" style="position: relative;"><a class="level2 menuLeft dynamic" href="mailto:[email protected][email protected]" tabindex="-1">Accounts Payable</a></li><li role="menuitem" class="dynamic" style="position: relative;"><a class="level2 menuLeft dynamic" href="mailto:[email protected][email protected]" tabindex="-1">Internal AP</a></li><li role="menuitem" class="dynamic" style="position: relative;"><a class="level2 menuLeft dynamic" href="mailto:[email protected][email protected]" tabindex="-1">Crump PO</a></li>
		</ul>




element.style {
    display: none;
    position: absolute;
    top: 100%;
    left: -100px;
}


li
<li role="menuitem" class="dynamic" style="position: relative;"><a class="level2 menuLeft dynamic" href="mailto:[email protected]?subject=TowerChanges" tabindex="-1">TowerChanges</a></li>
li {
    display: inline-block;
    float: left;
    padding: 3px;
    background-color: #dddddd;
}



how do i change the element style and the menu li?
Was This Post Helpful? 0
  • +
  • -

#6 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 14925
  • View blog
  • Posts: 59,589
  • Joined: 12-June 08

Re: how do i force a sub menu to open to the left?

Posted 22 March 2019 - 07:32 AM

In F12 you would double click the line's value and change it.. delete it.. etc.
Was This Post Helpful? 0
  • +
  • -

#7 DarenR   User is offline

  • D.I.C Lover

Reputation: 601
  • View blog
  • Posts: 3,932
  • Joined: 12-January 10

Re: how do i force a sub menu to open to the left?

Posted 22 March 2019 - 07:54 AM

yeah i did that-- no i mean where in my actual css would i make that change? the one i showed is the thing i need to change in my css -- i dont know how to change that or what it is actually looking for

this is how the f12 code looks on edit after i changed the code in f12 to see a change

<ul class="level2 dynamic" id="emailMenu:submenu:2" style="display: none; position: absolute; top: 100%; left: -100px;">
			<li role="menuitem" class="dynamic" style="position: relative;"><a class="level2 menuLeft dynamic" href="mailto:[email protected]?subject=TowerChanges" tabindex="-1">TowerChanges</a></li>



ive tried this in my css but it never actually pulls this into the ul class

.level2 dynamic {
    display: none;
    position: absolute;
    top: 100%;
    left: -100px;

}

Was This Post Helpful? 0
  • +
  • -

#8 andrewsw   User is offline

  • quantum multiprover
  • member icon

Reputation: 6775
  • View blog
  • Posts: 27,938
  • Joined: 12-December 12

Re: how do i force a sub menu to open to the left?

Posted 22 March 2019 - 08:13 AM

.level2 dynamic dynamic is also a class-name so requires another dot .
Was This Post Helpful? 0
  • +
  • -

#9 DarenR   User is offline

  • D.I.C Lover

Reputation: 601
  • View blog
  • Posts: 3,932
  • Joined: 12-January 10

Re: how do i force a sub menu to open to the left?

Posted 22 March 2019 - 10:09 AM

the fix:

.level2 { <-- asp dynamically added this class for the sub menus so i just used it
    display: inline-block;
    padding: 3px;
    background-color: transparent;
    text-align: left;
}
    .level2 .dynamic { <-- asp dynamically added this class for the sub menus so i just used it
        display: inline-block;       
        background-color: transparent;
        left: -100px;
        text-align: left;
       
    }

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1