Editor select type fields not showing arrow (Foundation CSS)

Dagobertina

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

Dagobertina

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

allan

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

Dagobertina

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

allan

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

Dagobertina

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

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

Dagobertina

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

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

allan

Hi Tina,

Good to hear you got it working .

Allan