Listbox alignment

[Kuroshi]

I have a field in the table that is set to List-String. And in the DataPage i set the form element to "Multiselect Listbox" upon previewing it is displayed vertically. Is there a way to horizontal align the listbox in the DataPage? 

[Barbie]

Hi Batchini,

Please add a Header and Footer in your DataPage and paste the code below in the Header.

 

<style>

.ListData .Item {
    float: left !important;
}
 
.ListData .Body {
    width: 400% !important;
}
 
.ListData.ListBox.cbFormSelect {
border: none !important;
box-shadow: none !important;
}

.ListData.ListBox.cbFormSelect{
height: 40px !important;
}

</style>

I hope this works for you.

-Barbie

[SunakoChan]

Hi Batchini, Make sure that you disable the HTML editor before pasting the code below.

[SunakoChan]

Just to add you may refer to this article on how to do so: https://howto.caspio.com/faq/web-forms/how-to-disable-html-editor-in-datapage-headerfooter-and-html-blocks/

[telly]

Hi @Batchini,

You may use the code, I highly suggest to input the code on the header of the DataPage:
 

<style>

.ListData.ListBox.cbFormMultiSelect {
    width: 500px!important;
    min-width: 13px!important;
    height: 33px!important;
}
div {

overflow: auto!important;
    overflow-y: auto!important;
    display: inline-flex;

}
</style>

I hope it helps

[telly]

Hi @Batchini, 

Here are the actual result on my end:


In submissions form:

Note that if you will use this on the report DataPage the width of the result page will set to the width you set in div id.



Because of that I highly recommend to use the code in the header of the DataPage, it is working also when you use it in Style.
 

[telly]

I also found this article that there is a way to customize your DataPages, I think it will be more helpful to visualize it: https://howto.caspio.com/tech-tips-and-articles/common-customizations/tech-tip-5-ways-to-customize-the-look-of-your-datapages/?_ga=2.62733865.423288817.1606594765-1824126437.1602885981

[captnjames]

On 11/26/2020 at 1:30 PM, telly said:

Hi @Batchini, 

Here are the actual result on my end:


In submissions form:

Note that if you will use this on the report DataPage the width of the result page will set to the width you set in div id.



Because of that I highly recommend to use the code in the header of the DataPage, it is working also when you use it in Style.
 

@telly,

I have a similar need.  I have several list strings on a submission page.  Each one has upwards of 20 options.  Trying to get them to layout horizontally and possibly in columns of 5.  With the code you provided, I can get the list strings to layout horizontally, but with 20 options on one line I loose the option name for each option.  Any thoughts on how to get this to work?  See below for sample desired layout.   Thank you.

[telly]

Hi @captnjames,

You can use this code, however it is only applicable if the DataPage is not responsive:
 

<style>
.cbComboBoxContainer{
-webkit-column-count: 5; /* Chrome, Safari, Opera */
  -moz-column-count: 5; /* Firefox */
  column-count: 5;
}

.ListData.ListBox.cbFormMultiSelect {
    height: 500px!important;
}
.cbFormMultiSelect{
border:none!important}

</style>



Please note that if the value/options is more than or less than 20, you may adjust the height value.

[TellMeWhy]

On 5/26/2021 at 3:28 PM, captnjames said:

@telly,

I have a similar need.  I have several list strings on a submission page.  Each one has upwards of 20 options.  Trying to get them to layout horizontally and possibly in columns of 5.  With the code you provided, I can get the list strings to layout horizontally, but with 20 options on one line I loose the option name for each option.  Any thoughts on how to get this to work?  See below for sample desired layout.   Thank you.

Try this one, this can be used in responsive.

Field should be Multiselect Listbox

Notice the 3 ComboBoxInsertRecordListing (in green), Change the LISTING to your Field Name example, if your List-String Field is named MediaTag in Table, you'll use ComboBoxInsertRecordMediaTag.

 

This will only work on Submission Form.

 

<style>

div[id^='ComboBoxInsertRecordListing'] > div.ListData{
border:none !important;
width:900px !important;
height:125px !important; /*adjust this to align choices*/
}

div[id^='ComboBoxInsertRecordListing'] > div.ListData > div.Body >div >div{
overflow-y:visible !important;

}

div[id^='ComboBoxInsertRecordListing'] > div.ListData > div.Body{
column-count:5 !important; /*change as you like*/
column-fill:auto !important; /*fills the column first until the set height above up to the number of column count you've set*/
line-height:20px !important; /*gap above and below each option*/
}


</style>

 

 

Mobile looks like this, choices gets cut off depending on how little the screen becomes

you can probably use media query to set a new height and column count when the screen is less than a certain amount.

[captnjames]

On 5/29/2021 at 8:18 AM, TellMeWhy said:

Try this one, this can be used in responsive.

Field should be Multiselect Listbox

Notice the 3 ComboBoxInsertRecordListing (in green), Change the LISTING to your Field Name example, if your List-String Field is named MediaTag in Table, you'll use ComboBoxInsertRecordMediaTag.

 

This will only work on Submission Form.

 

<style>

div[id^='ComboBoxInsertRecordListing'] > div.ListData{
border:none !important;
width:900px !important;
height:125px !important; /*adjust this to align choices*/
}

div[id^='ComboBoxInsertRecordListing'] > div.ListData > div.Body >div >div{
overflow-y:visible !important;

}

div[id^='ComboBoxInsertRecordListing'] > div.ListData > div.Body{
column-count:5 !important; /*change as you like*/
column-fill:auto !important; /*fills the column first until the set height above up to the number of column count you've set*/
line-height:20px !important; /*gap above and below each option*/
}


</style>

 

 

Mobile looks like this, choices gets cut off depending on how little the screen becomes

you can probably use media query to set a new height and column count when the screen is less than a certain amount.

@TellMeWhy  Thank you for this. I will give it a try.

[captnjames]

On 5/28/2021 at 4:39 PM, telly said:

Hi @captnjames,

You can use this code, however it is only applicable if the DataPage is not responsive:
 

<style>
.cbComboBoxContainer{
-webkit-column-count: 5; /* Chrome, Safari, Opera */
  -moz-column-count: 5; /* Firefox */
  column-count: 5;
}

.ListData.ListBox.cbFormMultiSelect {
    height: 500px!important;
}
.cbFormMultiSelect{
border:none!important}

</style>



Please note that if the value/options is more than or less than 20, you may adjust the height value.

@telly Thank you Telly.  I created a new teable with several liststring fields each with 20 items. Then created a new datapage using the code you provided and it worked perfectly.  But when I tried to implement in some of my existing datapages I got various results, but not what I was hoping for.  I played a bit with the parameters of the code to try to get to work, but couldn't get it to work.  I'm going to try Tellmewhy's solution and see how that works.  But again, thank you for this.