• [6.9.2] GUI Docker page layout error in advanced view when container repository name is very long


    greenflash24
    • Solved

    I have observed, that the layout in the "Advanced View" is not what is is supposed to be, when a container is installed, which has a very long repository name.

    When this is the case, the Container-ID is not displayed below the container name and picture anymore instead it shows up on the right.

    (See screenshots below.)

     

    This issue was tested with Google Chrome and Microsoft Edge in Version 90.x.x.

     

     

    To recreate this issue, simply run my hello-world container, which i have given a very long name. Then have a look at the Docker Page.

     

    docker run --rm fabianbees/a-simple-hello-world-example-with-an-extra-ultra-super-duper-long-name-for-showing-an-unraid-ui-layout-error:latest

     

     

    This is how it should look like: (Container-ID below the container name and picture)

    288479214_1-InkedScreenshot2021-05-18155301_LI.thumb.jpg.1ba5a91947c7939a5cfa2bd2886308b1.jpg

     

    When a container with a very long image name is present it looks as follows: (Container-ID on the right hand side of the container name and picture)

    1551929024_2-InkedScreenshot2021-05-18155416_LI.thumb.jpg.1c19cb6caf765c120b6f05c517bc16ac.jpg

     

     

     

    A simple fix could be to remove the display: inline; CSS from the class="advanced". This can be replicated with the Dev-Tools in the browser.

    Then all is displayed normally but the long image name isn't visible any more (but thats a better solution than the current behavior).

    Best solution would be to concat a long image name after a specifed width and show three dots at the end (e.g. long-name...).

    120621929_4-InkedScreenshot2021-05-18155625_LI.thumb.jpg.480ab504cb3bfe168d667a8439cc261f.jpg

     

     

     

     

     

     

     

     

     

     




    User Feedback

    Recommended Comments

    @bonienl In my opinion this is not fixed completly yet.

     

    I have just upgraded from 6.9.2 to 6.10.0-rc2, there i can see now that the width is fixed now which is good and a improvement over 6.9.2.

     

    But as you can see in the screenshots below the Container ID with its hash is not placed consistently below the container name & icon and above the by: library/imagename.

     

    In 6.10-rc2 the container id is placed to the right of the Container name & icon if it fits there (but it should never be there), and if the space is not enough it is placed in the correct position below the container name & icon and above the by: library/imagename.

     

     

     

    See: (correct position marked GREEN, false position marked RED)

    1533289757_Screenshot2021-11-02144710.thumb.png.b8e37b481891d6520206608ce17ed034.png

     

     

    913304039_Screenshot2021-11-02144642.thumb.png.c521399d4431cd90ee76edd96a1b6e41.png

     

     

     

    Link to comment


    Join the conversation

    You can post now and register later. If you have an account, sign in now to post with your account.
    Note: Your post will require moderator approval before it will be visible.

    Guest
    Add a comment...

    ×   Pasted as rich text.   Restore formatting

      Only 75 emoji are allowed.

    ×   Your link has been automatically embedded.   Display as a link instead

    ×   Your previous content has been restored.   Clear editor

    ×   You cannot paste images directly. Upload or insert images from URL.


  • Status Definitions

     

    Open = Under consideration.

     

    Solved = The issue has been resolved.

     

    Solved version = The issue has been resolved in the indicated release version.

     

    Closed = Feedback or opinion better posted on our forum for discussion. Also for reports we cannot reproduce or need more information. In this case just add a comment and we will review it again.

     

    Retest = Please retest in latest release.


    Priority Definitions

     

    Minor = Something not working correctly.

     

    Urgent = Server crash, data loss, or other showstopper.

     

    Annoyance = Doesn't affect functionality but should be fixed.

     

    Other = Announcement or other non-issue.