Have a custom made Category Filter

New home Forums Pro Add-on Have a custom made Category Filter

Viewing 4 posts - 16 through 19 (of 19 total)
  • Author
    Posts
  • #61583
    nicodergrieche
    Participant

    Thank you Dylan

    I’m ok with most of it.

    The thing that still does not work is the thing with the scroll bar for the mobile version.
    The given @media screen does not affect the way the filter is being displayed on my mobile device no matter what the (max-width: 750px) setting is (it does though have an effect on the way it is being displayed on my PC, where I can force the showing of the scroll bars, but I don’t want to 🙂

    I also tried to make the label of a checked filter to be ‘bold’ but I didn’t manage.
    Could you maybe help me on that?

    This is what I’ve tried:

    .wpgmza_checkbox {
    position:absolute;
    visibility:hidden;
    opacity:0;
    }
    .wpgmza_cat_checkbox_item_holder input[type=checkbox] + label {
    color: #000000;
    font-style: normal;
    background: #FFE7C6;
    margin: 5px;
    padding: 5px;
    border-radius: 4px;
    }
    .wpgmza_cat_checkbox_item_holder input[type=checkbox] + label:hover {
    background: #ffb547;
    cursor: pointer;
    }
    .wpgmza_cat_checkbox_item_holder input[type=checkbox]:checked + label {
    background: #FF9A0C;
    font-style: bold italic;
    }

    .wpgmza_cat_checkbox_item_holder input[type=checkbox]:checked ~ label {
    background: #FF9A0C;
    font-style: bold;
    color: #fffff00;
    }

    .wpgmza_cat_checkbox_item_holder {
    display: flex;
    }

    @media only screen and (max-width: 795px) {
    .ct-section-inner-wrap {
    padding-left: unset;
    padding-right: unset;

    }
    .wpgmza_cat_checkbox_item_holder input[type=checkbox] + label {
    margin-right: 0px;
    width: 100%;
    margin-bottom: 5px;

    }
    .wpgmza_cat_checkbox_holder {
    max-height: unset;
    overflow: scroll;

    }
    .wpgmza_cat_checkbox_holder ul:first-child {
    display: block;
    }
    }

    .category-filter-icon {
    width: 50px;
    vertical-align: bottom;
    margin-right: 0px;
    margin-left: 10px;
    }

    .wpgmza_cat_checkbox_item_holder .wpgmza_checkbox {
    display: none;
    }

    .wpgmza_cat_checkbox_item_holder label:nth-child(2) {
    display: none;
    }

    .active_category {
    border: red solid 2px;
    }

    @media screen and (max-width: 1000px){
    .wpgmza_cat_checkbox_holder {
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    }
    }

    p[id^=”wpgmza_filter_”] {
    display: none;
    }

    #61597
    Dylan
    Moderator

    Hi Nico,

    Thank you for your continued time on this one.

    I had a look at the site on a few devices and the filters do appear to be scrollable at the moment. With that said, some devices will not show the scrollbar until you start scrolling. This is managed by the device and not by CSS (the style of the scrollbars).

    With regards to making the selected items bold, please add the following styles:

    .wpgmza_cat_checkbox_item_holder input[type=checkbox]:checked ~ label {
      font-weight: 800;
    }

    The value (800) can be changed to a smaller variation if preferred.

    I hope this helps?

    #61602
    nicodergrieche
    Participant

    Hi Dylan

    Thank you very much for the .css and for the info.
    Funny that it font-style:bold would not do …..

    Best regards

    Nico

    #61617
    Dylan
    Moderator

    Hi Nico,

    Not a problem at all, happy to help wherever possible!

    Have a nice day further!

    🙂

Viewing 4 posts - 16 through 19 (of 19 total)
  • You must be logged in to reply to this topic.