How do you change the width of the left menu region in the Dublin template?

Hi all.

I'm working on a fairly simple web application but can't figure out how to change the width of the left vertical menu region in the Dublin template. It's too small for the accordion widgets I've placed within it, causing the accordions to be placed over the rest of the page. 

I've tried setting some custom CSS to change it:


.desktop .Menu,
.tablet .Menu {
    display: block;
    width: 250px;
    height: 100%;
}


but it has no effect. Strangely, the desktop preview display looks like the way I expect it, until I click the expand button. When expanded, I see this:

Can I ask why you're using an accordion control inside a menu? That's not really how the controls are designed to work, so I'm not really surprised that you're encountering issues.

Perhaps if you share what your end goal is, we can help you find a better approach?

Assuming, for the sake of discussion, that CSS is the right approach, you need to keep in mind that the menu controls and CSS are designed to be responsive, so you might need to modify the width in multiple places to cover the various scenarios (phone/tablet/desktop).

I'm trying to replicate my team's site which has a sidebar that contains collapsible menu items. Is there a better approach?

I hadn't considered that I'd need to modify multiple instances of CSS in order to get this to work correctly, so thanks for the heads up.

I'm very new to OutSystems and am trying to learn, so I apologize for the simple questions.

Robert Wardrup wrote:

I'm trying to replicate my team's site which has a sidebar that contains collapsible menu items. Is there a better approach?

I hadn't considered that I'd need to modify multiple instances of CSS in order to get this to work correctly, so thanks for the heads up.

I'm very new to OutSystems and am trying to learn, so I apologize for the simple questions.

Hi Robert,

If I understood correctly, you are trying to add sub menu items. If it is, you can use the built-in accelerator to create sub menu.

Check here , it may help you.

Regards

Seema


Seema Pandey wrote:

Robert Wardrup wrote:

I'm trying to replicate my team's site which has a sidebar that contains collapsible menu items. Is there a better approach?

I hadn't considered that I'd need to modify multiple instances of CSS in order to get this to work correctly, so thanks for the heads up.

I'm very new to OutSystems and am trying to learn, so I apologize for the simple questions.

Hi Robert,

If I understood correctly, you are trying to add sub menu items. If it is, you can use the built-in accelerator to create sub menu.

Check here , it may help you.

Regards

Seema



Thanks, Seema. I think that maybe we don't have some components installed or I am too new as I'm not seeing many of the items shown in that guide.

Robert Wardrup wrote:

Seema Pandey wrote:

Robert Wardrup wrote:

I'm trying to replicate my team's site which has a sidebar that contains collapsible menu items. Is there a better approach?

I hadn't considered that I'd need to modify multiple instances of CSS in order to get this to work correctly, so thanks for the heads up.

I'm very new to OutSystems and am trying to learn, so I apologize for the simple questions.

Hi Robert,

If I understood correctly, you are trying to add sub menu items. If it is, you can use the built-in accelerator to create sub menu.

Check here , it may help you.

Regards

Seema



Thanks, Seema. I think that maybe we don't have some components installed or I am too new as I'm not seeing many of the items shown in that guide.

You can check those items under the interface tab\Common\Menu.

Check the following link for more detail, that may help you.

https://www.outsystems.com/forums/discussion/26145/struggling-to-add-submenu/#Post95267


Seema Pandey wrote:

Robert Wardrup wrote:

Seema Pandey wrote:

Robert Wardrup wrote:

I'm trying to replicate my team's site which has a sidebar that contains collapsible menu items. Is there a better approach?

I hadn't considered that I'd need to modify multiple instances of CSS in order to get this to work correctly, so thanks for the heads up.

I'm very new to OutSystems and am trying to learn, so I apologize for the simple questions.

Hi Robert,

If I understood correctly, you are trying to add sub menu items. If it is, you can use the built-in accelerator to create sub menu.

Check here , it may help you.

Regards

Seema



Thanks, Seema. I think that maybe we don't have some components installed or I am too new as I'm not seeing many of the items shown in that guide.

You can check those items under the interface tab\Common\Menu.

Check the following link for more detail, that may help you.

https://www.outsystems.com/forums/discussion/26145/struggling-to-add-submenu/#Post95267


I seem to be missing the RichWidgets/DropDownMenu item. Is there a step I missed? Again, I apologize for my ignorance. I jumped into the deep end here.


Robert Wardrup wrote:

Seema Pandey wrote:

Robert Wardrup wrote:

Seema Pandey wrote:

Robert Wardrup wrote:

I'm trying to replicate my team's site which has a sidebar that contains collapsible menu items. Is there a better approach?

I hadn't considered that I'd need to modify multiple instances of CSS in order to get this to work correctly, so thanks for the heads up.

I'm very new to OutSystems and am trying to learn, so I apologize for the simple questions.

Hi Robert,

If I understood correctly, you are trying to add sub menu items. If it is, you can use the built-in accelerator to create sub menu.

Check here , it may help you.

Regards

Seema



Thanks, Seema. I think that maybe we don't have some components installed or I am too new as I'm not seeing many of the items shown in that guide.

You can check those items under the interface tab\Common\Menu.

Check the following link for more detail, that may help you.

https://www.outsystems.com/forums/discussion/26145/struggling-to-add-submenu/#Post95267


I seem to be missing the RichWidgets/DropDownMenu item. Is there a step I missed? Again, I apologize for my ignorance. I jumped into the deep end here.



Hi Robert,

Drag and drop your screen on common/menu web block and it will automatically create RichWidgets/DropDownMenu item for you.

or

click on Common/menu and then click on widget tree

Right click on application_menu container and click insert widget, select web block.

type menu and select Richwidgets/dropdownmenu 

Now you will get something like this

right click on menu item and menusubitems to insert link of your web page.

hope this helps.

Regards

Seema