Skip to main content
5-Regular Member
November 10, 2022
Solved

Disable Menu tab dragging and opening in a New Browser window on ThingWorx mashup

  • November 10, 2022
  • 1 reply
  • 1441 views

Hi Team,

 

Need suggestion how we can prevent Dragging and opening a Menu tab of Menu widget in a new Browser window. Is it possible to apply a CSS or any other way for this?

 

Thanks,

Ravi

Best answer by nmutter

You may want to finetune the css-selector but if you add the following as custom css to your mashup (without changing anything):

.menu-item-name{
 user-select: none;
 -webkit-user-drag: none;
}

>all< menu items won't be draggable anymore (tested in TWX 9.3.4). If you want to limit the behavior to a special menu you may want to give the menu a custom class and add it to the css selector.

Not clear for browser support but for Chrome it is working. I took the css from https://stackoverflow.com/a/66923120 

1 reply

5-Regular Member
November 17, 2022

Hello @RA_10166134 , 

 

Are you using the Menu tab widget in the existing Mashup or building in a New Mashup? also, what are you trying to achieve, it is not very clear from the posted query?

 

Regards

Bhawna

5-Regular Member
November 17, 2022

Hi Bhawna,

I am adding below steps to follow:
1) Create a mashup and add a Menu widget on it 

2) Link a Menu entity on the Menu widget in Properties to show menu options

3) Keep Menu Orientation view as Horizontal, Save and View mashup

4) Hold and drag one of the Menu tab and release on the Browser new tab

5) Menu opens up in new tab of the Browser

 

Any advise how we can prevent the menu from Dragging and opening in new Browser window?

 

Regards,

Ravi

nmutter16-PearlAnswer
16-Pearl
November 25, 2022

You may want to finetune the css-selector but if you add the following as custom css to your mashup (without changing anything):

.menu-item-name{
 user-select: none;
 -webkit-user-drag: none;
}

>all< menu items won't be draggable anymore (tested in TWX 9.3.4). If you want to limit the behavior to a special menu you may want to give the menu a custom class and add it to the css selector.

Not clear for browser support but for Chrome it is working. I took the css from https://stackoverflow.com/a/66923120