Dropdown text unreadable on IOS

  • Resolved thehun80

    (@thehun80)


    4 years, 1 month ago

    When the options in the dropdown have a long text it’s impossible to read it in full on IOS since the lines are cropped (on Android the options are displayed full screen so it’s not an issue). Is there a way to work around this?

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author codepeople

    (@codepeople)

    4 years, 1 month ago

    Hello @thehun80

    In the HTML standard you cannot apply css rules like: text-overflow: ellipsis; or similar to the option tags. So, would be required some of additional code.

    An alternative would be insert a “HTML Content” field in the form, with the following piece of code as its content:

    
<script>
fbuilderjQuery(document).one('showHideDepEvent', function(){
    var $ = fbuilderjQuery;
    if($(window).width()<640)
    {
        $('#fbuilder select option').each(function(){
            var e = $(this), t = e.text(), l = 9;
            if(l<t.length) t = t.substring(0,l)+'...';
            e.text(t);
        });
    }
});
</script>

    If you want the texts be longer, replace l = 9 with the number you want.

    Best regards.

    Thread Starter thehun80

    (@thehun80)

    4 years, 1 month ago

    Thanks,

    I have used that code and set l=110 (the length of the text that I want to show) but I still see the same result on an iPhone. Is there anything else I should be paying attention to?

    Plugin Author codepeople

    (@codepeople)

    4 years, 1 month ago

    Hello @thehun80

    Please, indicate the URL to the page where the form is inserted, to check the code in action.

    Best regards.

    Thread Starter thehun80

    (@thehun80)

    4 years, 1 month ago

    https://deedspain.com/comprar/

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Dropdown text unreadable on IOS’ is closed to new replies.