How to avoid text overflow in shape?

6 posts, 1 answers
  1. Holger
    Holger avatar
    77 posts
    Member since:
    Nov 2012

    Posted 23 Sep 2014 Link to this post

    Hello,

    Is there any possibility to avoid text overflow in a shape?

    Maybe by showing a ellipsis or dynamically resizing the shape by it's content size?

    Sample: http://dojo.telerik.com/@Holger/utIYE/3

    Thanks,
    Holger
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 25 Sep 2014 Link to this post

    Hi Holger,

    For this scenario you should manually calculate the shapes widths. For your convenience I modified the example with a possible implementation.

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Oscar
    Oscar avatar
    173 posts
    Member since:
    Oct 2010

    Posted 25 Sep 2014 in reply to Holger Link to this post

    Here you have another implementation:
    http://dojo.telerik.com/iWIW
  5. Holger
    Holger avatar
    77 posts
    Member since:
    Nov 2012

    Posted 29 Sep 2014 in reply to Oscar Link to this post

    Hello Iliana,
    Hello Oscar,

    many thanks for your answers. We are now using a similar approach which gives a slightly better result.

    Just for completeness, here is the code:
    function measureText(text) {
        var canvas = document.createElement("canvas");
        var context = canvas.getContext("2d");
        context.font = '15px sans-serif';
        var metrics = context.measureText(text);
     
        return metrics.width;
    }

    But all of this is just a workaround. I think the final solution will be to make the rectangle a visual group or parent for embedded elements, so it will grow with the size of it's children.

    What do you think?

    Regards,
    Holger
  6. Answer
    Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 30 Sep 2014 Link to this post

    Hi Holger,

    I agree this is a reasonable solution and would suggest to send this idea as a feature request at Kendo UI UserVoice portal - this way the community would be able to vote and comment it. The most popular requests take the highest priority when planning for a release. Thank you in advance.

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  7. Holger
    Holger avatar
    77 posts
    Member since:
    Nov 2012

    Posted 01 Oct 2014 Link to this post

    Link to Kendo UI User Voice:

    Diagram: Make the rectangle a visual group
Back to Top
Kendo UI is VS 2017 Ready