Make 'filter' field look like a table filter

  • 1
  • Question
  • Updated 3 years ago
  • Answered
  • (Edited)
I'm using a ui-only multipicklist field as a filter for a calendar's grouping model. Next to that, I'm using a table with a regular filter for the calendar's events model.


I'd like the 'field' filter to look like a typical table filter. I've messed with the css and kid of got there. Has anyone successfully make a multipicklist field look and act like a multipicklist filter?



I'm missing the dropdown arrow, and the wrapping doesn't work the way users will expect.


Instead of modifying all of the field css, would it be better/easier to remove the field classes and add the filter classes to the field with jquery on pageload?
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb

Posted 3 years ago

  • 1
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Any jquery/css wizards want to take a crack at this one?
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
The quick answer to your question is NO.  We are not aware of anyone who has gotten both multipicklist controls to look exactly the same. 

But Matt's challenge still stands.  Any jquery/css wizards out there?   I bet an offer for tacos would stand... 
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
How about a donut? We've got an awesome little doughnut shop here in Rochester called Ridge Donuts, each doughnut easily twice the size as a standard Dunkin. Doughnut of your choice, baked fresh and shipped the same day!
(Edited)
Photo of JG GBC

JG GBC

  • 694 Points 500 badge 2x thumb
Hi Matt

I found the idea quite cool, so I first tried to do it with JQuery. But somehow couldn't get it to work. With CSS it finally worked.

For the dropdown arrow, I took a FontAwesome Icon:
.ui-multiselect::after{
font-family:fontAwesome !important;
content:'\f0d7';
color:white;
padding-left: 0.5em;
}
Rest of the CSS:
.ui-multiselect{
white-space:nowrap;
color:white !important;
}

.ui-multiselect span{
color:white;
padding: 0px 10px 0 0;
}

.ui-multiselect-checkboxes label input{
display:none;
}

.ui-multiselect-menu.ui-widget-content{
padding:0;
}

div.ui-multiselect{
background:#0288d1;
}

.ui-multiselect-menu.ui-widget.ui-widget-content.ui-corner-all ul{
height:inherit !important;
background:#0288d1;
}

.ui-multiselect-menu{
width:9.2%;
}

.ui-widget-header{
display:none;
}

.ui-multiselect-checkboxes.ui-helper-reset li label:hover{
cursor:pointer;
color: rgba(255,255,255,.85);
}

.ui-multiselect-checkboxes.ui-helper-reset li{
color:#fff;
border-bottom: 1px solid #0298ea;
}
The field has a column width of 10%.

Play a little bit with the colors, this code fits for the default theme.

Cheers
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Nice work, JG!

I added some additional CSS for the background, label, and some additional spacing (and added my field editor's unique id to all of yours CSS). I had to change the font size. Apparently the font size for filters on the table component is slightly smaller than the font size for the page.

 Here's the image:



Here's the updated CSS:

#roomsFilter .ui-multiselect::after{
    font-family:fontAwesome !important;
    content:'\f0d7';
    color:white;
}
#roomsFilter .ui-multiselect{
    white-space:nowrap;
    color:white !important;
}
#roomsFilter .ui-multiselect span{
    color:white;
    padding: 0 8px 0 0;
}
#roomsFilter .ui-multiselect-checkboxes label input{
    display:none;
}
#roomsFilter .ui-multiselect-menu.ui-widget-content{
    padding:0;
}
#roomsFilter div.ui-multiselect{
    background:#f58378;
    padding: 5px 8px;
    border:none;
}
#roomsFilter .ui-multiselect-menu.ui-widget.ui-widget-content.ui-corner-all ul{
    height:inherit !important;
    background:#f58378;
}
#roomsFilter ui-multiselect-menu{
    width:9.2%;
}
#roomsFilter .ui-widget-header{
    display:none;
}
#roomsFilter ui-multiselect-checkboxes.ui-helper-reset li label:hover{
    cursor:pointer;
    color: rgba(255,255,255,.85);
}
#roomsFilter .ui-multiselect-checkboxes.ui-helper-reset li{
    color:#fff;
    border-bottom: 1px solid #0298ea;
}
#roomsFilter .nx-editor-contents {
    margin-top: 8px;
}
#roomsFilter .nx-basicfieldeditor-item {
    border-bottom: none;
    background-color: transparent;
    font-size:.91em;
}
#roomsFilter .nx-basicfieldeditor-item-label.nx-layout-above {
    position: absolute;
    top: -6px;
    font-weight: normal;
    font-size: .7em;
    text-transform: uppercase;
    word-wrap: break-word;
    padding: 6px 0 0 0;
}

Text me your address and the doughnut of your choice: 585.500.7681 :)
(Edited)
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Note for posterity: I have the multiselect field in it's own field editor, in the div of a responsive grid which is set to Fit Contents. Works very smoothly.
Photo of JG GBC

JG GBC

  • 694 Points 500 badge 2x thumb
I'm not quite sure if they'll ship to Switzerland. :D
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Haha, true. :-/