Jump to content

Limit the width of my dropdown

Recommended Posts

Hi, please help me.


I've been stuck here for hours, I have a drop down menu in my datapage. And one of its value is very long. As a result the width of this drop increases as well. Is there a way I can limit the size of my drop down, regardless the size of the option or value it contains. Because base on my observation, the size of my datapage dropdown depends on its value / option.

And I can't seem to find an option in my DataPage to set the maximum width of my drop down.




Link to comment
Share on other sites

Hello Eruel,


You can set or limit the size of your drop down menu by overriding the default css of caspio. You can use the CSS code to do this.

width: 900px !important;
.Option {
width: 900px !important;
overflow:hidden !important;

If the code above will not work, you will need to change the '#InsertRecordSelectionOpt' on the top most part of the code to the name of your dropdown in your DataPage.

To see that, just do the steps below.


1. Go to the preview of your DataPage

2. Press F12 on your keyboard, a form should be display. This is the browser developer console

3. Press Ctrl + Shift + C on your keyboard, then hover over your drop down. You should be able to see its element ID, then click on this .

4. You should be redirected to its code, just double click the id of this element. Then paste it on the CSS above to update it.


And lastly, you can also increase the size of your dropdown by change the width size. The '#InsertRecord 'is for the width of your drop down, and the '.Option' is for the width of its value or option


Hope this help, if you are having an error making the code above work. Just provide me the URL of your datapage or web page and I will update it for you.




Link to comment
Share on other sites

In the Datapage Wizard, on the Configure Fields page, select the field that is being used as the dropdown. 

Under Field Options there is an option called Field width: switch it from Auto to pixels or percent. 

Field Options should be found under the Standard tab, so you should be able to see the Field Width option as soon as you click on the field you want to edit.



Screenshot (23).png

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...