Dropdown alignment

Bootstrap Studio Help
1

Hello maybe a stupid question As an absolute beginner in bootstrap studio I have a problem with dropdowns. I have following:

Container
    Row
        Column
            Label
            Text input  
                   Column   
            Label   
            Dropdown

The column width is sufficient to contain the width of the label and the dropdown. In the first column the label and text input align nicely next to each other, But the dropdown is always located under the label. An I can not figure out how to get them next to each other. please advise. Thanks,

Rob

2

Not tested, but quick shot, as i was shortly working on my menus (which i continue later):

Try changeing the "display" attribute from "block" -> "flex" with "flex direction" or just "inline-flex". Possibly you can define working styles in the Style-Sheets for that if not successfully in GUI.

Maybe you'll find a nav / menu in the local library or check the online library for nav comonents possibly fitting your needs or giv you a hint, howt to best create your own..

Ralph

3

Thanks for your answer Ralph. Unfortunatly it is not working. The button inside the dropdown has indeed an display attribute but if I change that I only the box arround the button text is not displayt any more. the position of the drop down stays where it is. Rob

4

Are you trying to set the dropdown menu to the side of the dropdown link?

Like:

.dropdown-menu {
  top:0;
  left:100%;
}

Saj

5

I found a solution myself. I have put the label inside a div then to that div and the div from the dropdown i added the class .vtop created the class vtop in my css:

.vtop {
    display:inline-block; 
    vertical-align:top; 
    float:none; 
}