TeamDesk Knowledge Base & Support

cooper collier  6/10/2024 1:25:21 PM

The image you attached, showed everything in a row?

Is it possible that you want the choices that display when you hit a down arrow to be in a row??

Dan ktl Mereanu 6/10/2024 1:28:15 PM

might be a choice indeed :) .Any script will be helpful as a guide , to be fair .Thank you .

cooper collier  6/10/2024 2:13:37 PM

I have NEVER done this, so it is just a guide to get you going the "hopefully" correct way.

I did some checking, the easiest way to do this is add the "size" tag to the <SELECT> in HTML.
The Select box is generated by TEAMDESK and we do not have the ability to directly change it.

It may be possible to do using a combination of Javascript and CSS.

Check the documentation. You need to make a JavaScript and CSS file in resources


Then you will need to make a javascript to inject the Size tag. Something like this

function modifySelectElement(
) {
let selectElement = document.querySelector("#mySelect");
selectElement.setAttribute("size", selectElement.options.length);
}


Once that works, you can make CSS to make the choices in a row.

This is something I looked up, so it may or may not be correct.

select {
display: flex;
flex-wrap: wrap;
width: fit-content;
border: none;
background-color: transparent;
}

select option {
margin-right: 0.5rem;
}


and hope it works!!!

Let me know if this helps in any way?

Kirill Bondar  Staff  6/11/2024 3:59:51 PM

With CSS:

#frm_param dl.ui-col {
/* let browser determine the width */
width: auto;
}
#frm_param div.clear {
/* do not break to next row */
clear: none;
}

cooper collier  6/11/2024 4:29:24 PM

Kirill,
Nice to hear from you.
I tried this on one of my databases and I cannot make it work.
I tried it without edits an then I changed the frm_param to the forms ID like this

#f_6922563 dl.ui-col {
/* let browser determine the width */
width: auto;
}
#f_6922563 div.clear {
/* do not break to next row */
clear: none;
}

Dan ktl Mereanu 6/19/2024 5:38:01 PM

Hi Cooper ,
CSS script from Kirill is working perfect .You don't need to call the form ID .
Thank you Kirill !:)

Patricio Bustos 4/7/2025 12:07:39 PM

Hi Team.
With the new UI, how could the same be done?
I did the test, but it doesn't work :(

Kirill Bondar  Staff  4/8/2025 3:15:48 AM

/* Place into dbstyles-v3.css for new UI */
#frm_param .v3-gridlayout-cell {
/* set width of label and cell to fit content */
--v3-form-label-width: auto;
width: auto;
flex: 1 1 auto;
}
#frm_param .v3-grid__row-break {
/* hide row breaks */
display: none;
}

patricio.bustos@belltech.la 4/8/2025 9:00:19 AM

Tks a lot Kirill work perfectly!

Jorge Solá 4/19/2025 10:38:03 PM

I tried it in the UI. It worked fine with views, but not with dashboards. With dashboards, I had to add a text section to the dashboard with the above code, replacing "param" with the form Id, something like:

<style>
#frm_3587465 .v3-gridlayout-cell {
/* set width of label and cell to fit content */
--v3-form-label-width: auto;
width: auto;
flex: 1 1 auto;
}

#frm_3587465 .v3-grid__row-break {
/* hide row breaks */
display: none;
}
</style>