U4-7749 - Split slider moved all the way to the left causes UI display issues

Created by Kevin Giszewski 15 Jan 2016, 13:09:57 Updated by Claus Jensen 17 Jan 2017, 08:03:11

What did you do?

Opened the backoffice and moved the navigation slide panel all the way left.

The search box is still visible and the first tab is clipped by another element (see image).

When the navigation panel is hidden (when screen size is small), the whole panel is hidden and is therefore not an issue.

So to replicate, you'll have to use a large screen.

1 Attachments


Bjarne Fyrstenborg 19 Jan 2016, 11:56:07

Here is a quick way to solve it :)

  • For the form element add display: flex;

  • For the input field (textbox) add flex:1; width:auto;

  • For the container (.navigation-inner-container or maybe it is enough just for #search-form) add overflow:hidden;

  • The input (textbox) can also e.g. min-width: 200px; and/or max-width: 100%;

Bjarne Fyrstenborg 19 Jan 2016, 12:38:26

Maybe it is fine it has a min-width, so by dragging the split slider all the way to the left it cover the search input like it does with the tree nodes.

Bjarne Fyrstenborg 19 Jan 2016, 21:50:37

PR: https://github.com/umbraco/Umbraco-CMS/pull/1037

Simon Busborg 26 Jan 2016, 10:44:39

Commit https://github.com/umbraco/Umbraco-CMS/commit/738f24d6c9d58d672d7603665948828e7a496be1

Priority: Normal

Type: Bug

State: Fixed


Difficulty: Normal

Category: UI

Backwards Compatible: True

Fix Submitted: Pull request

Affected versions: 7.4.0

Due in version: 7.4.0


Story Points: