Limit the width of my dropdown

[Ronan]

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.

 

Thanks,

Eruel

[TsiBiRu]

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.

<style>
#InsertRecordSelectionOpt{ 
width: 900px !important;
}
  
.Option {
width: 900px !important;
overflow:hidden !important;
}
</style>

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.

 

Regards

 

[kpcollier]

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.

Regards,

KPC

[Mushigee2266]

Please use this code in the header of the datapage. Simply use field ID and set its minimum width to your required width

<style>
#yourFieldID{ 
min-width: 900px !important;
}
  
.Option {
min-width: 900px !important;
overflow:hidden !important;
}
</style>