10 Replies Latest reply on Sep 12, 2017 6:54 AM by Denis Savenko

    Universal Theme 42 Look and Feel for Select2 plugin

    Denis Savenko

      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).

        • 1. Re: Universal Theme 42 Look and Feel for Select2 plugin
          -Max-

          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

          1 person found this helpful
          • 2. Re: Universal Theme 42 Look and Feel for Select2 plugin
            -Max-

            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

            • 3. Re: Universal Theme 42 Look and Feel for Select2 plugin
              Denis Savenko

              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.

              • 4. Re: Universal Theme 42 Look and Feel for Select2 plugin
                Denis Savenko

                Hey, Max, how is it going out there?

                • 5. Re: Universal Theme 42 Look and Feel for Select2 plugin
                  -Max-

                  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

                  • 6. Re: Universal Theme 42 Look and Feel for Select2 plugin
                    Denis Savenko

                    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.

                    • 7. Re: Universal Theme 42 Look and Feel for Select2 plugin
                      Denis Savenko

                      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).

                      • 8. Re: Universal Theme 42 Look and Feel for Select2 plugin
                        Denis Savenko

                        Any news, Max? Maybe I can help somehow?

                        • 9. Re: Universal Theme 42 Look and Feel for Select2 plugin
                          -Max-

                          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

                          • 10. Re: Universal Theme 42 Look and Feel for Select2 plugin
                            Denis Savenko

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