We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
MODX Community Forums Archive

Answered Listbox (Multi-Select) TV values not visible (in manager) when selected, in Safari

    • 2396
    • 101 Posts
    atype Reply #1, 12 years, 1 month ago
    Has anyone had an issue after upgrading to 2.3.1 (on a Modx cloud account) where the value of a listbox is not visible when selected, but this only seems to be the case in Safari? I can see the values in the drop down list before selecting them, but then the value becomes a grey box with close X icon, but no value is visible.

    Does Safari maybe render some aspect of the manager UI differently?

    See attached screenshot.

    This question has been answered by m.engel. See the first response.

      • 28042 ☆ A M B ☆
      • 24,524 Posts
      sottwell Reply #2, 12 years, 1 month ago
      Can I have more details? Exactly what type of TV is this? Where are the values for the options coming from? What version of Safari, on which platform?

      I just tested a regular single-select drop-down with simple Input Options and it looks fine in Safari 7.0.5 on OS X 10.9.4.
        Studying MODX in the desert - http://sottwell.com
        Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
        Join the Slack Community - http://modx.org
        • 28042 ☆ A M B ☆
        • 24,524 Posts
        sottwell Reply #3, 12 years, 1 month ago
        Ah, now I see. A multi-select dropdown. Yes, indeed it does do the same thing in my Safari. It appears that the "x" image overlay is covering the whole space, not just the rightmost part.
          Studying MODX in the desert - http://sottwell.com
          Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
          Join the Slack Community - http://modx.org
          • 28042 ☆ A M B ☆
          • 24,524 Posts
          sottwell Reply #4, 12 years, 1 month ago
          How very interesting! In Firefox, this is the HTML for the "x" button
          <a id="ext-gen347" class="x-superboxselect-item-close" href="#" tabindex="0"></a>

          But in Safari I get
          <button class="x-superboxselect-item-close" tabindex="0" id="ext-gen347"></button>

          Now why would that be the case?
            Studying MODX in the desert - http://sottwell.com
            Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
            Join the Slack Community - http://modx.org
            • 2396
            • 101 Posts
            atype Reply #5, 12 years, 1 month ago
            Yes, I can see that now, thanks, the button is just covering the list item behind it, if I remove the button node I can see the selected value. Maybe the button default width is at 100% or something. I'll look some more.
              • 40045
              • 534 Posts
              exside Reply #6, 12 years, 1 month ago
              will have a look at it, extjs is sometimes doing some "extra" work for specific browsers, I also discovered issues in IE11 with the superboxselect...may be due to the fact, that the superboxselect component is a custom (non extjs core) script that was not updated for quite some time...

              EDIT: PR sent https://github.com/modxcms/revolution/pull/11889

              The issue comes from safaris "feature" to not tab to a / anchor elements by default (has to be manually activated in the settings > se PR comment) so the author of the plugin replaced the default a element with a button element which then causes that UI glitch...I basically removed that "exception" for safari which results in not-tabbable tags by default (as long as that setting is not activated in safari) [ed. note: exside last edited this post 12 years, 1 month ago.]
              • discuss.answer
                • 40706
                • 128 Posts
                Michael Engel Reply #7, 12 years, 1 month ago
                We added some css script for shrinking the buttons back. With an small Plugin:

                <?php
$modx->regClientCSS("<style>
.x-superboxselect ul li.x-superboxselect-item .x-superboxselect-item-close {
min-width: 0;
background: transparent;
}
</style>");

                Event: OnDocFormRender
                  • 2396
                  • 101 Posts
                  atype Reply #8, 12 years, 1 month ago
                  Quote from: m.engel at Aug 20, 2014, 06:47 AM
                  We added some css script for shrinking the buttons back. With an small Plugin:

                  Hey, thanks Michael, nice work. I had been trying to edit the css in manager > templates > default > css > index.css but couldn't get it fixed 100%. I have taken your solution and added it to the index.css file and it's all good now. I also added margin-top:0; to your css to bring the cross back up as it was hanging a bit lower, so to the end of the styles for .x-superboxselect ul li.x-superboxselect-item .x-superboxselect-item-close I have added:

                  min-width:0;background:transparent;margin-top:0;


                  I have checked other browsers and it all looks good. Apologies for editing core files but this was all that was standing in the way of upgrading a couple of sites for my clients, not that they even use Safari...