[ticketed] Styling Issue for Check Boxes

[laymanan]

The Check boxes for filtering have a styling issue which makes it difficult to click the first check box in the group. If you try to do so, sometimes it will collapse the group all together, rather then check/uncheck the box.

It’s mainly a problem with the “#tribe_events_filters_wrapper h3” on these pages as it has a padding bottom of 15px. It can easily be corrected (from what I can tell) with a change from padding:15px 0; to padding-top:15px; margin-bottom:15px;

This allows you to now select the checkbox without collapsing the group and doesn’t change the overall look of the filters panel.

[Thomas Dexter]

It seems like the proper fix for this should be to remove the negative margin on .tribe-events-filter-group by changing from:

.tribe-events-filters-vertical .tribe-events-filter-group {
margin: -10px 0 20px 0;
}

to:

.tribe-events-filters-vertical .tribe-events-filter-group {
margin: 0px 0 20px 0;
}

And then putting the proper desired padding of 5px (instead of 15px then -10px margin on the element below it) on the #tribe_events_filters_wrapper h3 so change from:

#tribe_events_filters_wrapper h3 {
font-weight: bold;
margin: 0;
padding: 15px 0;
position: relative;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

To:

#tribe_events_filters_wrapper h3 {
font-weight: bold;
margin: 0;
padding: 15px 0 5px 0;
position: relative;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

[Leah]

Thanks Andy and Thomas! I had reported this issue as well on our known bugs list for Filters, but not nearly as eloquently and helpfully as you did. I’ve added your input to the existing ticket.

~Leah

[Author]

Posts