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

  • 00anna123
    Asked on March 18, 2016 at 2: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

  • Boris
    Replied on March 18, 2016 at 2: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:

    Can I rewrite Distance and Duration (chance language) in Driving distance widget? Image 1 Screenshot 30

    The form will end up looking like this:

    Can I rewrite Distance and Duration (chance language) in Driving distance widget? Image 2 Screenshot 41

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

  • 00anna123
    Replied on March 21, 2016 at 4:15 AM

    Thank you , this is what I needed. 

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

    Thanks again.

  • Boris
    Replied on March 21, 2016 at 6: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:

    Can I rewrite Distance and Duration (chance language) in Driving distance widget? Image 1 Screenshot 20

    I hope this helps.

  • 00anna123
    Replied on March 22, 2016 at 5:50 AM

    Hi again,

    I tried CSS and everything looks OK.

    Well done! Thank you very much.

    Have a nice day!