locked
Tile List - Text Wrapping Issues RRS feed

  • Question

  • Basically I have added overflow hidden to all elements from the tiles <li> down to the <span> that contains the text. I did this in the Chrome Dev tools to find the element which I needed to adjust the postRender for. However none of them seem to affect the flow. 

    Please help.


    Regards, Christopher Maduro



    • Edited by Chris Maduro Thursday, September 18, 2014 2:10 PM
    Thursday, September 18, 2014 1:22 PM

Answers

  • Hi Chris,

    The Columns Layout automatically renders the second column beneath the first when the container width is too small for two columns.  The theory is good to ensure all controls on an edit screen appear on narrow screens, for example.  But the behavior is no good when you're trying to display text inside a tile.  It would be nice if we could toggle this behavior on or off at design time.

    Since your Tile Width appears to be fixed, this wrapping will happen when the text in the second column is too long.  A way to avoid this is to wrap the columns layout inside a rows layout. 

    For some reason this causes the text to be truncated and ellipsis (...) is displayed, which is nicer than the wrapping of the columns layout.

    HTH,

    Josh




    • Edited by joshbooker Thursday, September 18, 2014 8:52 PM
    • Marked as answer by Chris Maduro Friday, September 19, 2014 11:53 AM
    Thursday, September 18, 2014 8:43 PM

All replies

  • Hi Chris,

    The Columns Layout automatically renders the second column beneath the first when the container width is too small for two columns.  The theory is good to ensure all controls on an edit screen appear on narrow screens, for example.  But the behavior is no good when you're trying to display text inside a tile.  It would be nice if we could toggle this behavior on or off at design time.

    Since your Tile Width appears to be fixed, this wrapping will happen when the text in the second column is too long.  A way to avoid this is to wrap the columns layout inside a rows layout. 

    For some reason this causes the text to be truncated and ellipsis (...) is displayed, which is nicer than the wrapping of the columns layout.

    HTH,

    Josh




    • Edited by joshbooker Thursday, September 18, 2014 8:52 PM
    • Marked as answer by Chris Maduro Friday, September 19, 2014 11:53 AM
    Thursday, September 18, 2014 8:43 PM
  • Just to add that in our case, as we include the desktop as an audience and have gone with the ellipsis (...) approach, we're using the following helper function to add mouse-over tool-tips for the truncated text: -

    function addTextOverflowTooltips (element) {
        $(element).find(".msls-text").filter(function () {
            return $(this).css("overflow") == 'hidden';
        }).on("mouseenter", function () {
            var $this = $(this);
            // NOTE: + 2 to act as a small buffer
            if (this.offsetWidth + 2 < this.scrollWidth && (!$this.attr("title") || $this.attr("title") != $this.text())) {
                $this.attr('title', $this.text());
            } else {
                $this.removeAttr("title");
            }
        });
    };

    We then call this function from the container of the elements which may be truncated e.g.: -

    myapp.BrowseEmployees1.rows_postRender = function (element, contentItem) {
        addTextOverflowTooltips(element);
    };

    Hopefully this may be useful,

    Chris


    • Edited by ChrisCookDev Thursday, September 18, 2014 10:15 PM
    Thursday, September 18, 2014 9:25 PM
  • Just to add that in our case, as we include the desktop as an audience and have gone with ellipsis (...) approach, we're using the following helper function to add mouse-over tool-tips for the truncated text: -

    function addTextOverflowTooltips (element) {
        $(element).find(".msls-text").filter(function () {
            return $(this).css("overflow") == 'hidden';
        }).on("mouseenter", function () {
            var $this = $(this);
            // NOTE: + 2 to act as a small buffer
            if (this.offsetWidth + 2 < this.scrollWidth && (!$this.attr("title") || $this.attr("title") != $this.text())) {
                $this.attr('title', $this.text());
            } else {
                $this.removeAttr("title");
            }
        });
    };

    We then call this function from the container of the elements which may be truncated e.g.: -

    myapp.BrowseEmployees1.rows_postRender = function (element, contentItem) {
        addTextOverflowTooltips(element);
    };

    Hopefully this may be useful,

    Chris

    That is cool :)

    Do you have a Blog?


    Unleash the Power - Get the LightSwitch 2013 HTML Client / SharePoint 2013 book

    http://LightSwitchHelpWebsite.com

    Thursday, September 18, 2014 10:04 PM
  • Thanks for the positive feedback - though we're only standing on the shoulders of other LightSwitch giants like you (your website and books have been really helpful in our LightSwitch journey).

    Whilst we don't have a blog at the moment, we do plan to organise one once we've a lull in our development schedule - we've incorporated a few other cool approaches in our ERP/CRM system which will hopefully be of interest to other LightSwitch developers (especially those using the HTML client on the desktop or using Xamarin's mobile development tools alongside LightSwitch).

    Thursday, September 18, 2014 10:52 PM
  • This was instantly useful!

    I've been meaning to do something like this! Thanks!



    Regards, Christopher Maduro

    Friday, September 19, 2014 11:56 AM
  • In order to address the pixel rounding limitations of using offsetWidth and scrollWidth, we've updated the helper function I mentioned earlier in this thread as follows: -

    function addTextOverflowTooltips (element) {
        var $element = _ptsgLsHelper.getDollarElement(element);
        $element.find(".msls-text").filter(function () {
            return $(this).css("overflow") === "hidden";
        }).on("mouseenter", function () {
            var $this = $(this);
            var clientWidth = this.getBoundingClientRect().width;
            var $clone = $this
                .clone()
                .css({ display: "inline", width: "auto", visibility: "hidden" })
                .insertAfter(this);
            var scrollWidth = $clone[0].getBoundingClientRect().width;
            $clone.remove();
            if (scrollWidth > clientWidth) {
                var title = $this.attr("title");
                var text = $this.text();
                if (!title || title !== text) /* If the control doesn't have a title or the title needs to change to match the text */ {
                    $this.attr("title", text);
                }
            } else {
                $this.removeAttr("title"); // Remove the title if it's no longer necessary
            }
        });
    };

    This function adds mouse-over tool-tips for truncated text in tile lists and tables and can be used from the container of the elements which may be truncated e.g.: -

    myapp.BrowseEmployees1.rows_postRender = function (element, contentItem) {
        addTextOverflowTooltips(element);
    };

    Also, if you're comfortable making changes to the standard LightSwitch library, this change can easily be added globally to any list or table by searching for the following standard lines of code (highlighted in bold) and adding the additional calls to the above function (highlighted in italics): -

    if (listView._shouldEnhance) {
        $elements.trigger("create");
    }
    addTextOverflowTooltips($elements);

    The above adds tooltips to the tile lists and the following adds them to the tables: -

    if (table._shouldEnhance) {
        $elements.trigger("create");
    }            
    addTextOverflowTooltips($elements);

    To introduce this modification you'll also need to reference the changed version of the un-minified LightSwitch library by making the following change in your HTML client's default.htm file (the question marks in the msls will need to relate to the version you're using): -

    <!--<script type="text/javascript" src="Scripts/msls-?.?.?.min.js"></script>-->
    <script type="text/javascript" src="Scripts/msls-?.?.?.js"></script>

    HTH,

    Chris



    • Edited by ChrisCookDev Sunday, September 20, 2015 12:18 AM
    Sunday, September 20, 2015 12:15 AM
  • Great post. I'm looking at Xamarin right now and would like to know what you did. Are you using simple odata or what? Can you pleace share some of your experience :)

    Sven Elm

    Sunday, September 20, 2015 6:14 AM
  • On mobile clients maybe we can use the touch event on the truncated text. I'm using tipped.js for my tooltips.

    Sven Elm

    Sunday, September 20, 2015 6:19 AM
  • Great post. I'm looking at Xamarin right now and would like to know what you did. Are you using simple odata or what? Can you pleace share some of your experience :)

    Sven Elm

    Initially we used Vagif's great Simple.OData.Client which played very nicely with LightSwitch and Xamarin.  Also, when we did encounter any issues, Vagif responded very quickly and resolved the issues within a few days :-)

    Having said this, we have moved onto using our own WebApi end-points to allow a more sophisticated level of data-shaping and synchronisation.

    Another aspect of the Xamarin development which has proved invaluable is the MvvmCross framework which provides a fantastic model/binding solution which I find very reminiscent of the 'old' Silverlight/WPF MVVM approach. 

    We had the pleasure of meeting Stuart Lodge (one of the main contributors to the MvvmCross project) at a Microsoft event last year.  He did a really good presentation on Xamarin development and was a great guy to talk to.  We managed to collar him when he was searching for coffee and he took the time to have a look at our app and answer a few technical questions we had :-)

    Having had a quick look, the tipped.js library appears excellent and the following post contains some useful info regarding it's implementation in the HTML Client: -

    Using tipped.js for custom tool tips in LightSwitch HTML client

    HTH,

    Chris


    • Edited by ChrisCookDev Sunday, September 20, 2015 10:32 AM
    Sunday, September 20, 2015 10:06 AM