Hidden fields on forms

[gbligh]

I am playing around with a form we may use for appraisals. I have a few hidden fields, but is there any way I can hide the lines on the form which separate them?

It looks a bit odd at the end of the form!

[Graham Quince]

Lots of variations are possible here, just open an HTML widget and...

This will hide all lines:

<style>
    .form-body .row-fluid {
        border-top: 0px !important;
    }
</style>

 

Or this will hide specific lines:

<style>
    .form-body .row-fluid:nth-child(3),
    .form-body .row-fluid:nth-child(4)
    {
        border-top: 0px !important;
    }
</style>

 

Or this will hide lines only on a specified form:

<style>
    div[data-content-uuid="FORM_UUID"] .form-body .row-fluid {
        border-top: 0px !important;
    }
</style>

 

[ADT]

On 15/02/2023 at 16:14, Graham Quince said:

Lots of variations are possible here, just open an HTML widget and...

This will hide all lines:

<style>
    .form-body .row-fluid {
        border-top: 0px !important;
    }
</style>

 

Or this will hide specific lines:

<style>
    .form-body .row-fluid:nth-child(3),
    .form-body .row-fluid:nth-child(4)
    {
        border-top: 0px !important;
    }
</style>

 

Or this will hide lines only on a specified form:

<style>
    div[data-content-uuid="FORM_UUID"] .form-body .row-fluid {
        border-top: 0px !important;
    }
</style>

 

That might hide the lines.... but not get rid of the gap!!

 

[Graham Quince]

3 hours ago, ADT said:

That might hide the lines.... but not get rid of the gap!!

How many hidden field!?!  🤯

 

Here you go, it's a bit "belt-and-braces" but it works:

<style>
    div[data-content-uuid="FORM_UUID"] .form-body .row-fluid:nth-child(14),
    div[data-content-uuid="FORM_UUID"] .form-body .row-fluid:nth-child(15),
    div[data-content-uuid="FORM_UUID"] .form-body .row-fluid:nth-child(16),
    div[data-content-uuid="FORM_UUID"] .form-body .row-fluid:nth-child(17),
    div[data-content-uuid="FORM_UUID"] .form-body .row-fluid:nth-child(18),
    div[data-content-uuid="FORM_UUID"] .form-body .row-fluid:nth-child(19),
    div[data-content-uuid="FORM_UUID"] .form-body .row-fluid:nth-child(20),
    div[data-content-uuid="FORM_UUID"] .form-body .row-fluid:nth-child(21),
    div[data-content-uuid="FORM_UUID"] .form-body .row-fluid:nth-child(22),
    div[data-content-uuid="FORM_UUID"] .form-body .row-fluid:nth-child(23),
    div[data-content-uuid="FORM_UUID"] .form-body .row-fluid:nth-child(24),
    div[data-content-uuid="FORM_UUID"] .form-body .row-fluid:nth-child(25),
    div[data-content-uuid="FORM_UUID"] .form-body .row-fluid:nth-child(26),
    div[data-content-uuid="FORM_UUID"] .form-body .row-fluid:nth-child(27)
    {
        height: 0px !important;
        max-height: 0px !important;
        overflow: hidden !important;
        border-top: 0px !important;
        margin: 0px !important;
        padding: 0px !important;
    }
</style>

 

[ADT]

On 17/02/2023 at 14:46, Graham Quince said:

How many hidden field!?!  🤯

 

Here you go, it's a bit "belt-and-braces" but it works:

<style>
    div[data-content-uuid="FORM_UUID"] .form-body .row-fluid:nth-child(14),
    div[data-content-uuid="FORM_UUID"] .form-body .row-fluid:nth-child(15),
    div[data-content-uuid="FORM_UUID"] .form-body .row-fluid:nth-child(16),
    div[data-content-uuid="FORM_UUID"] .form-body .row-fluid:nth-child(17),
    div[data-content-uuid="FORM_UUID"] .form-body .row-fluid:nth-child(18),
    div[data-content-uuid="FORM_UUID"] .form-body .row-fluid:nth-child(19),
    div[data-content-uuid="FORM_UUID"] .form-body .row-fluid:nth-child(20),
    div[data-content-uuid="FORM_UUID"] .form-body .row-fluid:nth-child(21),
    div[data-content-uuid="FORM_UUID"] .form-body .row-fluid:nth-child(22),
    div[data-content-uuid="FORM_UUID"] .form-body .row-fluid:nth-child(23),
    div[data-content-uuid="FORM_UUID"] .form-body .row-fluid:nth-child(24),
    div[data-content-uuid="FORM_UUID"] .form-body .row-fluid:nth-child(25),
    div[data-content-uuid="FORM_UUID"] .form-body .row-fluid:nth-child(26),
    div[data-content-uuid="FORM_UUID"] .form-body .row-fluid:nth-child(27)
    {
        height: 0px !important;
        max-height: 0px !important;
        overflow: hidden !important;
        border-top: 0px !important;
        margin: 0px !important;
        padding: 0px !important;
    }
</style>

 

Thanks Quincey! 😜