Hi Sören.

Did you find a workaround for this? I'm having the same problem atm.

-Odd

The width is hard-coded with px. Seems like they have used the static grid of an older Bootstrap version, where you can assign classes like "span6" (width: 360px) and "offset6". That's how the HTML is written for the tree view. Changing this would require to change the HTML of the back-office.

Best solution would be to for someone to update the HTML/CSS of the backoffice to be a bit more "modern"/flexible, otherwise you will have a hard time to do this (only by changing the HTML or CSS (with !important ;-) )).

Hi Guys

I think this should be reported on the issue tracker if it's still an issue.

I don't think changing the width is the proper move though. I think that perhaps making sure that the line is wrapped into more lines instead is probably a better option :) But anyhow, good idea to report it and as Tobias is saying if one wants to do it manually it will require modifying some core files.

/Jan

I am already trying to make it more flexible (forked Belle), but it's a bit of a pain with this fixed stuff -.-

Hi Guys,

I have reported an issue here:

http://issues.umbraco.org/issue/U4-5968

Please vote for it. 

You can use the tweaks.css in the ~/App_Plugins/tweaks/css/tweaks.css folder.

.umb-tree div {
    overflow: visible; //so that the scrollbar shows in tree
}

.umb-tree li {
    min-width: 103%; //so that the options ... button is not over the labels
}

Hi Soren,

You can grab the small grey bar and extend the node tree. It's a manual process but saves having to code.

Hope this helps. Darren

Just for anyone coming across this post the approach Matija mentions in a previous post is explained a bit by Matt Brailsford in this article from last seasons 24ways here http://24days.in/umbraco/2015/umbraco-7-back-office-tweaks/

It mentions how it's possible to do other tweaks apart from styling too - Sooo nice and simple really :)

Hope this helps someone.

/Jan

Hi guys!

Just wanted to share that I found a "solution" that might be useful, there is a hacky way to do this that works:

function resizeMyWindow() {
  var elem = $('#navigation');
  var elem = $('#navigation');
  var eastbar = elem.find(".ui-resizable-handle.ui-resizable-e").first(); 
 var pageX = eastbar.offset().left;
 var pageY = eastbar.offset().top;

  (eastbar.trigger("mouseover")
    .trigger({ type: "mousedown", which: 1, pageX: pageX, pageY: pageY })
    .trigger({ type: "mousemove", which: 1, pageX: pageX, pageY: pageY })
    .trigger({ type: "mousemove", which: 1, pageX: 300, pageY: pageY })
    .trigger({ type: "mouseup", which: 1, pageX: 300, pageY: pageY }));
  }
  resizeMyWindow();
 resizeMyWindow();

Found it here: https://stackoverflow.com/questions/2523522/how-to-trigger-jquery-resizable-resize-programmatically

is working on a reply...