22
Views
2
Comments
Solved
Is there any dropdown search widget available, the width of dropdown will dynamically

Is there any dropdown search widget available, the width of dropdown will dynamically grow,ing when we drag, when contents/list item having more text to be visible.

similar to the textarea widget growing when we drag

How we can built it.

2025-01-24 02-53-49
Mustafa Emad Shaker
Solution

Hi @Priya Naveen,

I may recommend a mix using CSS and Js to achieve this feature.


1. Create a Reusable WebBlock

First we need to create a reusable webblock, to apply this function to any dropdown search you want to expand.


2. Add Drag Icon

I used this page, How TO - Create a Draggable HTML Element, at W3Schools as a base on how to create a draggable icon, to use as an anchor to adjust dropdown width.

Bind the drag action to the icon inside the OnReady event of the reusable block.

Last step is to add the base CSS style to the block, to apply the drag icon style.


Results

We use the drag icon position in the screen, to set the width of the placeholder that contains the dropdown search widget. The dropdown search widget adjusts to the width of its container by default.


Finally, you can check the demo attached to this reply for the applied code.

Regards,
Mustafa.

DynamicDropdown.oml
2019-11-11 17-10-24
Manish Jawla
 
MVP
Solution
2025-01-24 02-53-49
Mustafa Emad Shaker
Solution

Hi @Priya Naveen,

I may recommend a mix using CSS and Js to achieve this feature.


1. Create a Reusable WebBlock

First we need to create a reusable webblock, to apply this function to any dropdown search you want to expand.


2. Add Drag Icon

I used this page, How TO - Create a Draggable HTML Element, at W3Schools as a base on how to create a draggable icon, to use as an anchor to adjust dropdown width.

Bind the drag action to the icon inside the OnReady event of the reusable block.

Last step is to add the base CSS style to the block, to apply the drag icon style.


Results

We use the drag icon position in the screen, to set the width of the placeholder that contains the dropdown search widget. The dropdown search widget adjusts to the width of its container by default.


Finally, you can check the demo attached to this reply for the applied code.

Regards,
Mustafa.

DynamicDropdown.oml
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.