Editor select type fields not showing arrow (Foundation CSS)

Editor select type fields not showing arrow (Foundation CSS)

DagobertinaDagobertina Posts: 5Questions: 1Answers: 0

Hello :)

I have just discovered, that in Editor 2.02 (and former versions of Editor 2) the drop down arrow for select type fields is missing when using Foundation framework.

My download of Datatables and Editor comes from the download page where you can generate your individual package with extensions etc. and I checked Foundation CSS framework as usual.

The dropdown itself works just fine. When clicking the field somewhere, the drop down list opens, but to the user it is not clear, that this field is a drop down / select field. You can only discover this by clicking the field.

Is there any chance to add some styling for the select field to bring back the arrow?

Many thanks in advance for you help!

Best regards,
Tina

This question has an accepted answers - jump to answer

Answers

  • DagobertinaDagobertina Posts: 5Questions: 1Answers: 0

    Hello again :)

    In the meantime, I found out, that it is an SVG background-image with the arrow which is not loaded as you can see here:

    I think it collides somewhere with the Foundation CSS framework styles, but I can't figure out where and how to overwrite it.

    Thanks a lot for any help!

    Best regards,
    Tina

  • allanallan Posts: 53,761Questions: 1Answers: 8,360 Site admin

    Could you give me a link to your page showing the issue please? I've just tried it locally and it seems to work:

    Allan

  • DagobertinaDagobertina Posts: 5Questions: 1Answers: 0

    Hi Allan :)

    thanks for taking a look at this. I will try to set up an example case tomorrow. What I have here, is just an internal project which I can't publish. But I have the same problem in another project which I could publish as a sample case. Both use Foundation 6 framework...

    Will come back then.

    Thanks a lot!

    Best regards,
    Tina

  • allanallan Posts: 53,761Questions: 1Answers: 8,360 Site admin
    Answer ✓

    Hi Tina,

    I've put this mini-demo together just to show it working: http://live.datatables.net/mijawedi/1/edit . If you are able to modify that to show the issue, or otherwise publish your project I can take a look.

    Allan

  • DagobertinaDagobertina Posts: 5Questions: 1Answers: 0

    Hi Allan,

    thanks a lot for that one! A few minutes ago, I found the reason for that strange behaviour with the missing arrow...

    Ashes on my head... o:)

    I've used some styling which I found some time ago somewhere in the manual or in the forum - I don't know anymore and I haven't found it now. Seems to be gone...

    This the additional styling I have used in order to simply split the form layout into two columns:

        <style type="text/css">
          div.DTED_Lightbox_Wrapper {
            z-index: 30;
          }
          div.DTE_Body div.DTE_Body_Content div.DTE_Field {
              width: 50%;
              padding: 5px 20px;
              box-sizing: border-box;
          }
          div.DTE_Body div.DTE_Form_Content {
              display:flex;
              flex-direction: row;
              flex-wrap: wrap;
          }
        </style>
    

    At least I found the reason. Without this additional styling the arrows are back again :)

    But I still don't know how to achieve that split into two columns and keeping the arrows. Is there any trick?

    Thank you so much for your help!

    Best regards,
    Tina

  • DagobertinaDagobertina Posts: 5Questions: 1Answers: 0

    Just tried to change the z-index of div.DTED_Lightbox_Wrapper to 10 instead of 30 - and what am I to say?

    The arrows are back again... B)

    At the moment, i can't figure out any disadvantages of z-index 10, so I think, this is it!

    Thanks a lot for your help!

    You have put me on the right track! :)

    Best regards,
    Tina

  • allanallan Posts: 53,761Questions: 1Answers: 8,360 Site admin

    Hi Tina,

    Good to hear you got it working :).

    Allan

Sign In or Register to comment.