Wraparound in bottom content

I have a dropdown in a popver menu.  I have a few labels in there that are causing the words to be "wrapped around", how can I get it to where all the words are on the same line.  So I basically want to alter the width maybe of the bottom content?  Do I find this in the CSS class?  When I go to the CSS class I cant find it.  Also this is in my Personal Environment not Enterprise etc, not sure if that makes a difference.

Hello Peter,

Your application is associated within a Theme. If you check your module's properties, you can find the Default Theme associated to it. If you check the Themes folder in your module, you can open the style sheet and all of the CSS classes should be defined in there. You can always edit them or create new classes.


Also, you can define (or overwrite) your CSS classes directly in your page / block.


Just double click in the Style Sheet property and it will open a pop-up where you can write your CSS code.


Kind regards,

Rui Barradas

Thank you.  I added this to the popover menu and doesnt seem to increase the width of the popover, so the selections in the popover  (the words for each selection) are wrapped around versus each selection being on one single line

SyntaxEditor Code Snippet

.popovermenu, .popover.popovermenu {
    width: 400px;
}

Hello Peter,

Can you share your .oml?


Kind regards,

Rui Barradas

Hi Rui - unfortunately I cannot due to Non-Disclosure Agreements.  No matter what I do that popover the width stays the same.  So the links that I have in the popover, some of the text for each link is long and it gets wrapped around to fit.  So for the user they see one long list of several text even though there are only 7 or so..  Simple example:

Thisisalink1

Thisisalink2

Thisisalinka

swell3

I want Thisisalinkaswell3 all to be on one line


Peter Goyal wrote:

Thank you.  I added this to the popover menu and doesnt seem to increase the width of the popover, so the selections in the popover  (the words for each selection) are wrapped around versus each selection being on one single line

SyntaxEditor Code Snippet

.popovermenu, .popover.popovermenu {
    width: 400px;
}

Hi Peter Try to use "!important":

.popovermenu, .popover.popovermenu {
    width: 400px !important;
}


Carlos Lessa wrote:

Peter Goyal wrote:

Thank you.  I added this to the popover menu and doesnt seem to increase the width of the popover, so the selections in the popover  (the words for each selection) are wrapped around versus each selection being on one single line

SyntaxEditor Code Snippet

.popovermenu, .popover.popovermenu {
    width: 400px;
}

Hi Peter Try to use "!important":

.popovermenu, .popover.popovermenu {
    width: 400px !important;
}


Hi Carlos, that didnt work.  Would the Outsystems UI theme override this?



Hi Peter,

I think for someone to better be able to help you, you should make a seperate oml that does not violate the NDA, in which the error is reproducible.

Regards,

Daniel

Peter Goyal wrote:

Carlos Lessa wrote:

Peter Goyal wrote:

Thank you.  I added this to the popover menu and doesnt seem to increase the width of the popover, so the selections in the popover  (the words for each selection) are wrapped around versus each selection being on one single line

SyntaxEditor Code Snippet

.popovermenu, .popover.popovermenu {
    width: 400px;
}

Hi Peter Try to use "!important":

.popovermenu, .popover.popovermenu {
    width: 400px !important;
}


Hi Carlos, that didnt work.  Would the Outsystems UI theme override this?



Its hard to say without check the oml, try do like Daniel suggested, recreate the problem in another oml that you can share without violate your NDA


Thank you for everyone helping out, here is a quick OML that I created called playground.  The menu option is in the top left next to the application title.  I placed the code that we spoke of in the CSS class and ensure the !important was included.

In the oml you posted, the popover menu's maximum width is being restricted by this: 


[data-popover] > .popover-bottom


If you change the max-width value here to 500, you get your menu without wrap:


Thank you Mariano - ok that worked in this oml.  Question, when I go to the other OML and click on the area I show below, this window doesnt pop up, any reason why?  I could just copy and paste, but I want to understand why this window doesnt show up in the other oml


Solution

I added it on the application's CSS. Remember the Menu css belongs to a Webblock, so that's loaded first, and then overriden by themes and pages:



In this case, Menu.css loads first, then OutsystemsUI, then Playground(Theme Editor) and last Playground.css

Solution