Forum Stats

  • 3,752,906 Users
  • 2,250,584 Discussions
  • 7,868,043 Comments

Discussions

Universal Theme 42 Look and Feel for Select2 plugin

Denis Savenko
Denis Savenko Member Posts: 126 Red Ribbon
edited Sep 12, 2017 2:54AM in APEX Discussions

Hello APEX community!

There's a great plugin for APEX called Select2 plugin (https://apex.oracle.com/pls/apex/f?p=64237:20:0: ). It gives us functionality of a select list component with searching, autocompletion, tagging and much more. Since the standard component for big lists of values is not that good (I'm talking about Popup LOV, which is not that convenient), this plugin seems really useful.

The problem is that by default Select2 looks different from others component and the developer of Select2 plugin don't provide us with a CSS file for this plugin in order to make it look like standard APEX Universal Theme 42 Select list component (at least since 3.0 version). But I don't believe that I'm the only one who wants to have Universal Theme Look and Feel for Select2.

So, Is there any generous developer who can share with the community these CSS styles to make Select2 look like standard Select list? (which are compatible with the last Select2 plugin version).

Denis SavenkoNick Buytaert

Answers

  • askMax
    askMax Member Posts: 344 Gold Badge
    edited Sep 3, 2017 10:03PM

    Hello Denis

    Let me know if the following CSS is what you're looking for:

    /* Single-Value UT Style */.select2-container .select2-selection--single {  height: 24px;}.select2-container--default .select2-selection--single {  border-color: #dfdfdf;  background-color: #f9f9f9;  -webkit-border-radius: 2px;  -moz-border-radius: 2px;  border-radius: 2px;}.select2-container--default .select2-selection--single:hover {  background-color: #fff;}.select2-container .select2-selection--single .select2-selection__rendered {  padding-left: 3px;  padding-right: 30px;  font-size: 1.2rem;}.select2-container--classic .select2-selection--single .select2-selection__rendered,.select2-container--default .select2-selection--single .select2-selection__rendered {  line-height: 24px;}.select2-container--classic .select2-selection--single .select2-selection__arrow,.select2-container--default .select2-selection--single .select2-selection__arrow {  height: 22px;}.select2-container--classic .select2-selection--single .select2-selection__clear,.select2-container--default .select2-selection--single .select2-selection__clear {  line-height: 22px;  height: 22px;  font-size: 1.4rem;}.select2-container--default .select2-selection--single .select2-selection__arrow b {  display: none;}.select2-container--default .select2-selection--single .select2-selection__arrow {  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MDAiIGhlaWdodD0iMjAwIiB2aWV3Qm94PSItOTkuNSAwLjUgNDAwIDIwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAtOTkuNSAwLjUgNDAwIDIwMCI+PHBhdGggZmlsbD0iIzQ0NCIgZD0iTTE1Ni4yNSA3My43YzAgMS42LS42MTIgMy4yLTEuODI1IDQuNDI1bC01NC40MjUgNTQuNDI1LTU0LjQyNS01NC40MjVjLTIuNDM4LTIuNDM4LTIuNDM4LTYuNCAwLTguODM3czYuNC0yLjQzOCA4LjgzNyAwbDQ1LjU4OCA0NS41NzQgNDUuNTc1LTQ1LjU3NWMyLjQzOC0yLjQzOCA2LjM5OS0yLjQzOCA4LjgzNyAwIDEuMjI2IDEuMjI2IDEuODM4IDIuODI1IDEuODM4IDQuNDEzeiIvPjwvc3ZnPg==);  background-repeat: no-repeat;  background-position: 100% 50%;  background-size: 32px 16px;  width: 30px;}/* Multi-Value UT Style */.select2-container--default .select2-selection--multiple {  border-color: #dfdfdf;  background-color: #f9f9f9;  -webkit-border-radius: 2px;  -moz-border-radius: 2px;  border-radius: 2px;}.select2-container .select2-selection--multiple {  min-height: 24px;}.select2-container--default .select2-selection--multiple .select2-selection__choice {  font-size: 1.2rem;}/* Corrects display of very long label when they are larger than container removes additionnal space for first line so that the clear button is shown correctly */.select2-container--default .select2-selection--multiple .select2-selection__choice {  max-width: calc(100% - 35px);  overflow: hidden;  text-overflow: ellipsis;  white-space: nowrap;}.select2-container--default .select2-selection--multiple .select2-selection__choice ~ .select2-selection__choice {  max-width: 100%;}

    Let me know if there's anything to change or if everything looks good, then I'll be able to share it in a blogpost as well.

    Maxime

    Denis Savenko
  • askMax
    askMax Member Posts: 344 Gold Badge
    edited Sep 3, 2017 10:01PM

    Hello Denis

    Just updated above CSS so that the select2 is using the same arrow image as the regular select list.

    Here's what it looks like:

    Select2-UT.png

    Let me know if it needs other changes.

    Maxime

    Denis Savenko
  • Denis Savenko
    Denis Savenko Member Posts: 126 Red Ribbon
    edited Sep 4, 2017 2:31PM

    Hello, Max!

    Great job! But unfortunately this styles don't follow region template properties. Also the fonts, which are used in the standard Select Lists, are different to the ones in Select2.

    You can see what I mean on my demo: https://apex.oracle.com/pls/apex/f?p=SELECT2

    The Select2 plugin developer has some CSS in his repo, which can help us, but I haven't got enough time to investigate it: https://github.com/nbuytaert1/apex-select2/blob/master/src/main/css/select2-ut.css

    P.S. Also, it would be really nice to replace standard Select2 'remove' icon (the cross) with the icon fa-times from Font APEX.

  • Denis Savenko
    Denis Savenko Member Posts: 126 Red Ribbon
    edited Sep 6, 2017 1:25AM

    Hey, Max, how is it going out there?

  • askMax
    askMax Member Posts: 344 Gold Badge
    edited Sep 6, 2017 9:44PM

    Hello Denis

    I was able to come up with this for the single-value lists

    /* Stretch Items */.t-Form--stretchInputs .select2-container,.t-Form-fieldContainer--stretchInputs .select2-container {  width: 100% !important;}/* Single-Value UT Style */.t-Form-inputContainer .select2-container .select2-selection--single {  line-height: 1.6rem;  height: 2.4rem;}.select2-container .select2-selection--single .select2-selection__rendered {  line-height: 1.6rem;  height: 100%;  padding: .4rem 3rem .4rem .4rem;  font-size: 1.2rem;}.t-Form--large .select2-container .select2-selection--single,.t-Form-fieldContainer--large .select2-container .select2-selection--single {  line-height: 1.6rem;  height: 3.2rem;}.t-Form--large .select2-container .select2-selection--single .select2-selection__rendered,.t-Form-fieldContainer--large .select2-container .select2-selection--single .select2-selection__rendered {  line-height: 1.6rem;  height: 100%;  padding: .7rem 3rem .7rem .7rem;  font-size: 1.4rem;}.t-Form--xlarge .select2-container .select2-selection--single,.t-Form-fieldContainer--xlarge .select2-container .select2-selection--single {  line-height: 2rem;  height: 4rem;}.t-Form--xlarge .select2-container .select2-selection--single .select2-selection__rendered,.t-Form-fieldContainer--xlarge .select2-container .select2-selection--single .select2-selection__rendered {  line-height: 2rem;  height: 100%;  padding: .9rem 3rem .9rem .9rem;  font-size: 1.6rem;}.select2-container--default .select2-selection--single {  border-color: #dfdfdf;  background-color: #f9f9f9;  -webkit-border-radius: 2px;  -moz-border-radius: 2px;  border-radius: 2px;}.select2-container--default .select2-selection--single:hover {  background-color: #fff;}.select2-container .select2-selection--single .select2-selection__rendered {  padding-left: 3px;  padding-right: 30px;  font-size: 1.2rem;}.select2-container--classic .select2-selection--single .select2-selection__rendered,.select2-container--default .select2-selection--single .select2-selection__rendered {  font-family: 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif;  color: #393939;}.select2-container--default .select2-selection--single .select2-selection__arrow b {  display: none;}.select2-container--default .select2-selection--single .select2-selection__arrow {  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MDAiIGhlaWdodD0iMjAwIiB2aWV3Qm94PSItOTkuNSAwLjUgNDAwIDIwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAtOTkuNSAwLjUgNDAwIDIwMCI+PHBhdGggZmlsbD0iIzQ0NCIgZD0iTTE1Ni4yNSA3My43YzAgMS42LS42MTIgMy4yLTEuODI1IDQuNDI1bC01NC40MjUgNTQuNDI1LTU0LjQyNS01NC40MjVjLTIuNDM4LTIuNDM4LTIuNDM4LTYuNCAwLTguODM3czYuNC0yLjQzOCA4LjgzNyAwbDQ1LjU4OCA0NS41NzQgNDUuNTc1LTQ1LjU3NWMyLjQzOC0yLjQzOCA2LjM5OS0yLjQzOCA4LjgzNyAwIDEuMjI2IDEuMjI2IDEuODM4IDIuODI1IDEuODM4IDQuNDEzeiIvPjwvc3ZnPg==);  background-repeat: no-repeat;  background-position: 100% 50%;  background-size: 32px 16px;  width: 30px;}.select2-container--default .select2-selection--single .select2-selection__arrow {  position: absolute;  top: 0;  right: 0;  height: 100%;}.select2-container--default .select2-selection--single .select2-selection__clear {  font-size: 1.4rem;}/* Corrects display of very long label when they are larger than container removes additionnal space for first line so that the clear button is shown correctly */.select2-container--default .select2-selection--multiple .select2-selection__choice {  max-width: calc(100% - 35px);  overflow: hidden;  text-overflow: ellipsis;  white-space: nowrap;}.select2-container--default .select2-selection--multiple .select2-selection__choice ~ .select2-selection__choice {  max-width: 100%;}

    I'm still working on the multi-value lists visual.

    Let me know if everything is correct for the single-value lists.

    Maxime

    Denis Savenko
  • Denis Savenko
    Denis Savenko Member Posts: 126 Red Ribbon
    edited Sep 7, 2017 5:18AM

    Good job again Max!

    Flaws which I found so far:

    - Standard Select2 'remove' icon (the cross) looks bad, it would be nice to replace it with the fa-times or fa-times-circle icon from Font APEX:

    3.png

    - The border style and color of Select2 don't follow the current theme (I'm not sure if it's possible to follow custom theme from Theme Roller, but it would be great to at least have the default Vita theme border style). Background and font colors are also different:

    1.png

    - Font size of the text in dropdown menu is different.

    123.png

    Everything else is great. Actually, I think, it can be used from now on.

    But for the full picture, it would be great to fix the issues I mentioned.

  • Denis Savenko
    Denis Savenko Member Posts: 126 Red Ribbon
    edited Sep 7, 2017 5:47AM

    By the way, we could 'subscribe' on the original Universal Theme 42 styles using LESS, couldn't we? Using it, I think it could be even possible to follow a custom user theme (which they composed in the Theme Roller).

  • Denis Savenko
    Denis Savenko Member Posts: 126 Red Ribbon
    edited Sep 11, 2017 7:10AM

    Any news, Max? Maybe I can help somehow?

  • askMax
    askMax Member Posts: 344 Gold Badge
    edited Sep 11, 2017 11:04PM

    Hello Denis

    I started working on an APEX app to generate custom Select2 CSS for the UT based on the selected UT Style.

    It's going to be able to use the UT Styles settings to generate a custom CSS file that will match the users look and feel.

    I'll keep you posted once it's completed.

    Maxime

    Denis SavenkoNick Buytaert
  • Denis Savenko
    Denis Savenko Member Posts: 126 Red Ribbon
    edited Sep 12, 2017 2:54AM

    That'd be wonderful if APEX community had such an application.

This discussion has been closed.