Add styleclass to navbar dropdown menus (Titanium)

Using Servoy to administrate the content of your website? Discuss all webrelated Servoy topics on this forum!

Add styleclass to navbar dropdown menus (Titanium)

Postby brigugls » Wed Jun 15, 2022 5:33 pm

Hi there.

I am updating our project as we upgrade to Titanium NGClient. I am an intern who is new to Servoy, so you must bear with me if this is a naive question.

Having run into a problem with a navbar (bootstrapextracomponents-navbar, that is), I wanted to ask if anyone had some insight into how I could resolve this issue. All of my packages have been updated to their Titanium compatible versions.

Problem: When expanded, a dropdown-menu furthest to the right of a navbar is not appearing entirely within the viewport below the button that expands it. Only the left-most part of the menu appears on the screen. I need the dropdown-menu to open directly below this button and within the viewport. The button cannot be moved; it must remain where it is. I have three ideas of how to fix this, which I have attempted.

1. I can add a CSS class to modify the dropdown-menu so it has
Code: Select all
position: relative; /*currently position is set to fixed*/
This works perfectly, except that for some reason, it then changes the height of the navbar to fit the dropdown-menu within it. It also moves all the other elements within the navbar around. So this is not going to work alone. An example of the class I was testing with:
Code: Select all
.some-navbar .dropdown-menu {
    position: relative;
}


2. I can add a CSS class to change the margins on the dropdown-menu such that it's always positioned properly. This would also work well, it doesn't move other navbar elements around, but it causes all the other navbar dropdown-menus to have those same margins. I cannot find out how to modify the style of only the dropdown-menu in question because the form editor for navbar does not show the dropdown menus since they are added dynamically using JS. I have examined the documentation for bootstrapextracomponents-navbar and bootstrapextracomponents-drop-down but setting a styleClass on the actual dropdown-menu element does not seem to work. I can only set the styleClass of only the dropdown button in the navbar which is not a parent of the actual dropdown-menu.

Example code:
Code: Select all
.some-navbar .dropdown-menu {
    right: 0;
    left: auto;
}

...and...
Code: Select all
.some-navbar .dropdown-menu {
   margin-left: -120px;
}


3. I can add a style attribute with appropriate margins to the desired dropdown-menu. I could not make this work for reasons described in (2).

Is there something I am missing here? From my perspective, the issue seems to be because the JS method provided by the boostrapextracomponent doesn't give a styleClass to the dropdown-menu itself; it only gives the styleClass to the dropdown button in the navbar.

Do you have any thoughts or suggestions? Also, thank you kindly for your time! :D
brigugls
 
Posts: 5
Joined: Tue Jun 14, 2022 3:24 pm

Return to Web Development

Who is online

Users browsing this forum: No registered users and 3 guests

cron