Mobile View — class="checked" doesn't appear??

[Jessica Hanson]

When viewing the filter bar on a mobile device, I have noticed that the checkbox field no longer get’s the class=”checked” added to it.

I have styles applied to the field dependant on whether it has the class=”checked” or not. So having it not be applied in mobile view is super unhelpful.

Is there a way to make the class=”checked” not disappear from the input in mobile?

Example:

On desktop the input appears like this:
<input type=”checkbox” value=”24″ checked=”checked” name=”tribe_eventcategory[]” data-slug=”for-families”>

On mobile the input appears like this:
<input type=”checkbox” value=”24″ name=”tribe_eventcategory[]” data-slug=”for-families”>

thanks,

[George]

Hey @Jessica,

I’m unable to produce problems with this; when you say “on a mobile device”, can you clarify exactly which browsers on which devices have this problem for you?

Next, how SPECIFICALLY did you first notice this problem? E.g. do you have a way to view the page source code on your mobile device? Or did you notice that your custom styles don’t seem to work on mobile and you are inferring that this is the problem?

Finally, can you share your system information with us? Here’s how → https://theeventscalendar.com/knowledgebase/sharing-sys-info/

Thank you!
George

[Jessica Hanson]

Ok, so… for instance…

On the pc web browser when I click on a filter the style that is tied to the class=”checked” turns the background white and the border blue. When I click on a filter on my mobile phone, the background color does not change, even though the input is actually checked. When I inspect in web developer mode on Chrome and have it viewed as mobile, the class=”checked” does not appear even though the input is checked. When I inspect in regular browser mode (not mobile) then the class=”checked” is applied.

This is important because on mobile, right now you cannot tell what is checked and not checked the way that it is styled. The styles are all done through CSS and work in regular browser view, so this must be an issue with your javascript not applying the style=”checked” to the input while in mobile view.

[George]

Thank you for elaborating on this @Jessica! I went to your events page here to investigate → http://www.mingei.org/mim-event/

Here there are no inputs, there just buttons that instead of using the Checked HTML attribute, they use the class .btn, and .active when it is the active filter…

This worked fine for me no matter what browser or device I viewed things on, and the filters themselves were applied too.

Let me know what you think!

[Jessica Hanson]

That’s actually the wrong link 😉

Here is where your calendar is located: http://www.mingei.org/test/

[George]

Hey @jessica,

When I view things on my iPhone, any time I click a filter there the filters themselves collapse; so in other words even if the button I pressed did have its “active styles” (white bg, blue border) the whole set of buttons itself would be hidden and so I (or, another user) won’t see it anyways.

Upon further inspection I’ve found this to basically be by design, so that after clicking a filter the filters don’t just stay open taking up a bunch of unnecessary screen space…

To change all of this, your best bet is unfortunately to write some custom code. You’ll likely need to write custom JavaScript to add a custom class to the buttons when a filter is clicked, and use this new CSS class instead of the ‘checked’ attribute to apply styles to active filters and such.

— George

[Support Droid]

This topic has not been active for quite some time and will now be closed.

If you still need assistance please simply open a new topic (linking to this one if necessary)
and one of the team will be only too happy to help.

[Author]

Posts