Jump to content
  • 0

Listbox alignment


Kuroshi
 Share

Question

11 answers to this question

Recommended Posts

  • 0

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

Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

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

Hi @Batchini

Here are the actual result on my end:


In submissions form:
image.png.a949e5698e3879d37bf5813bad1f39e0.png
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.
image.png.1977f5d0996417b1be2d28b596a914a1.png


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.

listboxcolumns copy.png

Link to comment
Share on other sites

  • 0

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>

image.thumb.png.e69063e2e05e61f6c0fda56909448385.png

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

Link to comment
Share on other sites

  • 0
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.

listboxcolumns copy.png

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>

 

image.png.0d90cedb3b63475b3e6b515bbbc16480.png

 

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

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

Link to comment
Share on other sites

  • 0
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>

 

image.png.0d90cedb3b63475b3e6b515bbbc16480.png

 

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

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.

Link to comment
Share on other sites

  • 0
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>

image.thumb.png.e69063e2e05e61f6c0fda56909448385.png

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.

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.

Guest
Answer this question...

×   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.

Loading...
 Share

×
×
  • Create New...