Can I rewrite "Distance" and "Duration" (chance language) in Driving distance widget?

  • Profile Image
    00anna123
    Asked on March 18, 2016 at 02:01 PM

    Hi,

     

    I need rewrite  text Distance and Duration to czech language in Driving distance widget, is it possible? If not, is it possible to remove or hide it? 

     

    Together with this widget I want use widget Form calculation, because I need count price per distance between two town (price taxi drive from A to B). https://form.jotformeu.com/60764493795370

     

    Thank you for your help

  • Profile Image
    Boris
    Answered on March 18, 2016 at 02:48 PM

    We do not have an option for translating this text directly, but we can achieve it by using a small bit of custom CSS in that widget:

    #ddResult tr:nth-of-type(3) > th { font-size: 0px; }
    #ddResult tr:nth-of-type(3) > th:before { font-size: 11pt; content: "Text for distance"; }
    #ddResult tr:nth-of-type(4) > th { font-size: 0px; }
    #ddResult tr:nth-of-type(4) > th:before { font-size: 11pt; content: "Text for duration"; }

    Where you can change the text marked in red into your desired translation.

    You can add this CSS to the widget by clicking on its wand-shaped icon, switching to its Custom CSS tab, and pasting the code there:

    The form will end up looking like this:

    If you need any further assistance, please let us know.

  • Profile Image
    00anna123
    Answered on March 21, 2016 at 04:15 AM

    Thank you , this is what I needed. 

    And is it possible "translate" by Custom CSS red button Change too? 

    Thanks again.

  • Profile Image
    Boris
    Answered on March 21, 2016 at 06:07 AM

    You are most welcome. When it comes to translating the red "Change" button with CSS, I'm afraid that it is not possible - the button is a HTML element called input, and input HTML elements cannot have text added to them through CSS.

    I could manage a workaround by actually hiding the text on the input element, and adding a "translated" text to another element. Then, we can try and position this other element to be on top of the input field, to make it appear that the button is translated. However, I'm not sure how well this workaround would work across all the different browsers and devices that are in use today.

    In case you are interested in this workaround, here is the custom CSS code:

    #buttonChange { font-size: 0px; height: 10pt; }

    #ddResult tr:nth-of-type(5) > td:before {
    font-size: 11pt;
    content: "Promeni";
    position: absolute;
    pointer-events: none;
    color: white;
    margin-top: 2pt;
    margin-left: 50px;
    }

    You can try adding it to your form and testing in the browsers that your intended audience will use, to see if it will work in a satisfactory way for you.

    You can enter your own text in the CSS code for "content", in the place marked in red. You can also position this created text to be correctly centered by adjusting the value for margin-top and margin-left, also marked in red in the above code.

    This is how it appears on my end:

    I hope this helps.

  • Profile Image
    00anna123
    Answered on March 22, 2016 at 05:50 AM

    Hi again,

    I tried CSS and everything looks OK.

    Well done! Thank you very much.

    Have a nice day!