Language Configuration of the Close Button

Hi @achibra,

It would seem the language setting doesn’t cover the elements in the modal/popup as the button is not a part of the table.

A workaround for this would be to either hide the button via CSS since an X button is already on the upper right corner of the popup which closes it.

Another option would be to change the responsive type to “Collapsed” so that the row would expand to show details instead of inside a popup.

Please see: https://share.getcloudapp.com/v1uQwOoX

Let us know if this helps!

If you’d be open to sharing the link to your table so we can check as well, that would be great!

Hello @kimmyx

Thank you for your response. I want it to remain responsive.

Now the first option, using css to hide the button, it sounds good, but unfortunately, I do not know any CSS. Would it be possible that you help me with the code?

The website is currently under construction. For that reason, I can’t provide you the link.

• This reply was modified 2 years ago by achibra.
• This reply was modified 2 years ago by achibra.

Hi @achibra,

Thanks for the response.

Please add the following CSS code to Appearance > Customize > Additional CSS (or to wherever you usually add custom CSS)

.wpda-modal-footer {
display: none !important;
}

Let us know if this works!

Hello @kimmyx

It works! Thank you very much.

But now, I see another problem occurring.

The X button, on the upper right corner of the popup, sometimes doesn’t appear on the mobile screen (on the responsive mode). How is this possible and how can I solve this problem?

My guess would be, that there is something wrong with the width of the table. The reason is, that on other rows of the same table, the X button appears.

Hi @achibra,

Maybe you can temporarily change the button label using javascript like this:
jQuery(“input[type=button].button.dtr-modal-close”).val(“Schlie?en”)

For the long term we will internationalize the button. It is on our to do list. We’ll add it to the next release.

Is this an acceptable solution for you?

Have a nice weekend,
Peter

Hello @peterschulznl

thank you very much for your reply.

Now about the code you provided,
I would love to use it to To change
the translation of the modal/popup.

The only problem is that I don’t know where to place
the the code ??.

Could you advise me on this matter?

With kind regards
Achibra

Hi Achibra,

Sorry! Developers always seem to think everyone is a developer… ??

Please open your publication in the Data Publisher and go to advanced settings. Presuming your advanced table options is currently empty, copy / paste the following code into that field:

{ "initComplete": "function(settings, json) { jQuery('#'+settings.sTableId).on('click', function() { jQuery('input[type=button].button.dtr-modal-close').val('Schlie?en'); } ) }" }

This will change the close button label on the popup. If your advanced table options is not empty, you need to add the initComplete option to your current settings. Let me know if you need help with this…

Does this solve this issue?

Thanks,
Peter

Hello @peterschulznl

it worked. ??
Thank you very much.

But there is now something CSS-wise
that is inefficient.

The close-button color is not
what I want. The first reason
is that you can’t see the text
unless you hover on the button.

And the second reason is that
the color of the “Close” button does not
match the brand identity.
(Accent color:#08428C)

How can I change this?

With kind regards
Achibra

Hi @achibra,

Thanks for the update!

Now for the button’s color, you can add this CSS code:

div.dtr-modal-content input.dtr-modal-close {
color: #ffffff;
background: #08428C;
border: 1px solid #23282d;
}

For the color on hover (just change the color/background to something else):

div.dtr-modal-content input.dtr-modal-close:hover {
color: #ffffff;
background: #08428C;
}

Let us know if this works!

Hello @kimmyx

Thank you very much.

It works perfectly.
And also, thank you @peterschulznl

With kind regards
Achibra