Collapsed Vertical Text is not shown correctly on bar

Suite and Optimus Suite 5
#1

I have a 3L layout, sets header text and Collapsed text. Collapsed text looks okay for horizontal bars, however the vertical bar is not being printed correctly. The text is horizontal and its not being printed on the bar, but in what looks like the header section

moUI.layoutMain = new dhtmlXLayoutObject(document.body, "3L", activeSkin);
moUI.layoutMain.cells("a").setText("collapsed");
moUI.layoutMain.setCollapsedText("a", "collapsed");

I tried using <span class="panelverticaltitle">collapsed, however in that case it flips it correctly, however only the first few letters are shown.

How do I get it to print on the actual bar?

#2

skydrive.live.com/?cid=F1B5469C … lapsed.png

#3

Alright, I found your problem. First of all you got a ton of syntax errors in your dhtmlx\dhtmlxLayout\codebase\skins\dhtmlxlayout_dhx_skyblue.css file, Im using 3.6 Pro, also dhtmlxInfoBarLabel_collapsed_hor has a rotate in there which is wrong. I compared it with the 3.0 version and took it out, now header text gets rotated nicely, after I fixed your bugs. Looks like many of your css files have these weird errors, like random = instead of : and the letter a in front of some of the properties.

#4

Turns out the problem is not entirely solved. The test is shown vertically now when collapsing the layout box, however it is now covering the button to expand it again, how do I position the text within the bar?

#5

For anybody with the same issue, this is how I fixed the issue,

dhtmlxlayout.css:

div.dhtmlxLayoutObject {
	position: absolute;
	overflow: hidden;
	width: 100%;
	height: 100%;
}
.dhxCursorWResize {
	cursor: w-resize!important;
}
.dhxCursorNResize {
	cursor: n-resize!important;
}
/* dhxcont */
div.dhxcont_global_layout_area {
	position: absolute;
	left: 0px;
	top: 0px;
	overflow: hidden;
}
/*
div.dhxcont_global_layout_area div.dhxcont_statusbar {
	position: absolute;
	width: 100%;
	bottom: 0px;
	_bottom: -1px;
	aborder-top: #FFFFFF 1px solid;
	aborder-bottom: #B5CDE4 1px solid;
	background-color: #D9E8F6;
	width: 100%;
	overflow: hidden;
	font-family: Tahoma;
	font-size: 11px;
	vertical-align: middle;
	line-height: 17px;
	-moz-user-select: none;
	cursor: default;
	padding-left: 4px;
}
*/
div.dhxcont_content_blocker {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 101%;
	height: 101%;
	filter: alpha(opacity=0);
	-moz-opacity: 0;
	opacity: 0;
	background: #FFFFFF;
	z-index: 1;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
}
/* skin detect */
div.dhxlayout_skin_detect {
	position: absolute;
	height: 1px;
	margin: 0px;
	padding: 0px;
}
body.dhxCursorWResize,
body.dhxCursorNResize {
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
}

dhtmlxlayout_dhx_skyblue.css:

table.dhtmlxLayoutPolyContainer_dhx_skyblue td.dhtmlxLayoutSinglePoly div.dhtmlxPolyInfoBarCollapsedVer div.dhtmlxInfoBarLabel_collapsed_hor {
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
	
    color: #000000;
    cursor: default;
    font-family: Tahoma;
    font-size: 11px;
    font-weight: normal;
    height: 400px;
    left: 0;
    line-height: 18px;
    margin-top: 30px;
    overflow: hidden;
    position: absolute;
    vertical-align: middle;
    white-space: nowrap;
}

javascript:

                moUI.layoutMain.cells("a").setText("Expanded");
                moUI.layoutMain.setCollapsedText("a", "<span class=\"panelverticaltitle\">Collapsed</span>");

This will print the full label in black vertically, a little down from the expand button

#6

hi

let me insert some comments

before 3.5 version (or 3.0) layout do not used css to rotate text, you need to crate image with already rotated text and use it. after this we added css-support for rotate (css skin files for this and a bit of js (_fixCollapsedText) to adjust for different browsers). localy it works fine, online demo seems also.

if you have any problem - please feel free to share link with issue or create completed demo, yuo also can send it to support@dhtmlx.com

regarding mysterious “letter a in front of some of the properties” - its just a way to comment text instead of /* … */ (my style, browser will ignore this rule and in editor it also will not highlighted) and = instead of : used for some IE versions (like browser css hack)