Column width in new web portal

In the new Angular based web portal, I see that the column width in different places, for example Request history and when searching for products to add to the shopping cart, cannot be altered by the end user. This is a problem for service items with long names, as the names are cut with ... and end users have to click on the service items or requests, or hover over it to show the full name. Is there an easy way to manage this problem? I have searched forum, documentation and seen in the administration portal with no luck. 

Regard

Rune Hystad

Parents
  • Hello Rune,

    Allowing users to adjust the width of columns by dragging the column borders is currently not implemented in the HTML application. Maybe it will in a future release. You could do a custom job on the HTML application, but I don't know enough about Angular and the challenges/impact of implementing dynamic resizable columns in tables to give advise on that. I think I read on Git that the users will be able to sort the table data per column in an upcoming release of the HTML application. For now your best option is to play around with the CSS code in the HTML application until you get it to your likings: projects\qer\src\lib\new-request\new-request-product\new-request-product.component.scss

    Example:

    .imx-request-col-display {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: inherit;
    }

    Change: white-space: wrap;

    HTH

Reply
  • Hello Rune,

    Allowing users to adjust the width of columns by dragging the column borders is currently not implemented in the HTML application. Maybe it will in a future release. You could do a custom job on the HTML application, but I don't know enough about Angular and the challenges/impact of implementing dynamic resizable columns in tables to give advise on that. I think I read on Git that the users will be able to sort the table data per column in an upcoming release of the HTML application. For now your best option is to play around with the CSS code in the HTML application until you get it to your likings: projects\qer\src\lib\new-request\new-request-product\new-request-product.component.scss

    Example:

    .imx-request-col-display {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: inherit;
    }

    Change: white-space: wrap;

    HTH

Children
No Data