Hide Element in Form Based on Class

[altnetwork]

In an element under the "List View Setting / Filters" there is an option for class. In this option there are options like:

Visible
Visible Phone
Visible Tablet
Visible Desktop
Hidden Phone
Hidden Tablet
Hidden Desktop

What I am looking for is to have an element in a form to be hidden for phones but visible for everything else like in the List View.

Can this be done and if so how?

Thanks

 

[cheesegrits]

Not at the moment, no, although it's something I'm looking at implementing.

-- hugh

 

[altnetwork]

Do you have a time frame?

 

[troester]

You can do it manually with a mediaquery in custom CSS:

in custom_css.php in your form template
@media (max-width: 767px)
{
.fb_el_table___element {display:none!important}
}

in details template
@media (max-width: 767px)
{
.fb_el_table___element_ro {display:none!important}
}

 

[altnetwork]

Sorry, confused.

1.) I am using this for the form template. - I understand this...

So, I use the custom_css.php and add the following:

@media (max-width: 767px)
{
.table___element {display:none!important}
}

Is this correct? Can you break down what each part does?

2.) I wish to use the "Hidden Phone" class. How is this applied to the coding?

You can do it manually with a mediaquery in custom CSS:

in custom_css.php in your form template
@media (max-width: 767px)
{
.fb_el_table___element {display:none!important}
}

 

[troester]

@media (max-width: 767px)
{
.fb_el_table___element {display:none!important}
}

This is not using the "Hidden Phone" class (you would have to create a custom template and add the class manually) but it's defining CSS for the element container class to act like the .hidden-phone

you must keep
.fb_el_
and replace table___element with your full element name

 

[altnetwork]

Sorry, a little more confused.

"(you would have to create a custom template and add the class manually)" - Is it not the purpose of the custom_css.php to define the CSS for the template I am using now?

Also, where does the .hibben-phone come in place?

@media (max-width: 767px)
{
.fb_el_table___element {display:none!important}
}

This is not using the "Hidden Phone" class (you would have to create a custom template and add the class manually) but it's defining CSS for the element container class to act like the .hidden-phone

you must keep
.fb_el_
and replace table___element with your full element name

 

[cheesegrits]

What @troester means is that if you wanted to use the hidden-phone class itself, you would have to use a custom template and add it to each element.

In the list display, we add the responsive classes deep inside the list model code (using a layout, so the class names themselves can be overridden for different frameworks).

In form/details views, we just don't add that class, as we don't (yet) have a built in concept of hiding certain elements according to display device / size.

But the solution Troester is offering using custom CSS does exactly the same thing. It should hide an element when display size is under 767px.

-- hugh

 

[altnetwork]

Thank you very much. This worked great. Copied the default temple and added the following to the custom_css.php:

@media (max-width: 767px)
{
.fb_el_table___element {display:none!important}
}

 

[cheesegrits]

You don't need to use a copy of the template. You can just use that custom_css.php in the out-of-box one. It won't get overwritten by us.

Won't hurt to use a copy, and maybe you have other version of that form (hence with same class names) that you don't want that CSS applied to. But unless you have a specific need for a custom template, it's not required to use custom_css.php.

-- hugh

 

[altnetwork]

Thank You!