Servoy Forum

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!