No horizontal scrollbars on layout

Suite and Optimus Suite 5
#1

I have a 5E layout…

In cell “a”, I have a

that I attach with “attachObject()”

The

has style: width:1000px;overflow:auto;

and basically contains a form containing a table with a bunch of input fields (and labels). The text and body fits comfortably at about 1000px wide.

Cells “b”, “c”, “d”, etc are basically grids.

When I resize the browser horizontally, the grids all resize automatically… works great. However, the upper area (cell “a”) truncates the content. There is no way to scroll to the right without making the browser window bigger.

I want a horizontal scrollbar to show up if the content of the

doesn’t fit in the cell. I thought the “overflow:auto;” style would do it, but it doesn’t work.

I also tried a few permutations like setting the cell width to 1000 and/or doing fixSize, neither had any effect
searchLayout.cells(“a”).setWidth(1000);
searchLayout.cells(“a”).fixSize(true, true);

Any ideas?

#2

Could you reproduce us a completed demo?
docs.dhtmlx.com/doku.php?id=othe … leted_demo
Try to help you on your sample.

#3

It would take too long to strip down my complex application into some kind of stand alone demo that i could send you.

The question is pretty straight forward… if you have a “5E” layout and on “a” cell I attach a DIV (which basically contains a form/table with labels and entry fields – see attachment), and on the other panes (directly below it) there are grids and toolbars attached. When you shrink the window horizontally, the grid columns properly resize, but the top “a” cell containing the div remains constant and is clipped. I would expect a horizontal scrollbar there.

The attached DIV looks like this (note, this is part of a JSP so ignore the <% %> directives, they are resolved by the time it is loaded in the browser)

I would think that "overflow:auto; and a fixed width should cause a horizontal scroll bar to appear?

<div id='searchFormDiv' style="display:none;width:1000px;overflow:auto;">
	<form action="searchBody" id="search_form">
	 	<table cellspacing="5">
			<tr>
				<td align="left">
					<table class="mainLabel" style="width:100%;" cellspacing="5">
						<tr>
							<td align="right">
								<%=msgs.getString("Index.jsp.searchruleid") %>
							</td>
							<td align="left"><input class="mainLabel" type="text" name="ruleId"/></td>
							<td align="right">
								<%=msgs.getString("Index.jsp.searchrulename") %>
							</td>
							<td align="left">
								<select class="mainLabel" name="ruleNameSearchType">
  									<option value="includes"><%=msgs.getString("Index.jsp.searchincludes") %></option>
									<option value="startswith"><%=msgs.getString("Index.jsp.searchstartswith") %></option>
  								</select>
							</td>
							<td align="left"><input class="mainLabel" type="text" name="ruleName"/></td>
						</tr>
						<tr>
							<td align="right">
								<%=msgs.getString("Index.jsp.searchlastmodifiedby") %>
							</td>
							<td align="left"><input class="mainLabel" type="text" name="lastModifiedBy"/></td>
							<td align="right">
								<%=msgs.getString("Index.jsp.searchcreationdatefrom") %>
							</td>
							<td align="left"><input class="mainLabel" type="text" id="srchCreationDateStart" name="creationDateStart" style="width: 100px;"/></td>
						</tr>
						<tr>
							<td align="right">
								<%=msgs.getString("Index.jsp.searchcalendarname") %>
							</td>
							<td align="left">
								<select class="mainLabel" name="srchCalendar"></select>
							</td>
							<td align="right">
								<%=msgs.getString("Index.jsp.searchcreationdateto") %>
							</td>

							<td align="left"><input class="mainLabel" type="text" id="srchCreationDateEnd" name="creationDateEnd" style="width: 100px;"/></td>

						</tr>
						<tr>
							<td align="right"><%=msgs.getString("Index.jsp.searchpending") %></td>
							<td align="left">
								<input class="mainLabel" type="checkbox" name="srchPendingDeployment"></input>
							</td>

							<td align="right"><%=msgs.getString("Index.jsp.conditionparm") %></td>
							<td align="left">
								<select class="mainLabel" name="srchConditions"></select>
							</td>

							<td align="right"><%=msgs.getString("Index.jsp.actionparm") %></td>
							<td align="left">
								<select class="mainLabel" name="srchActions"></select>
							</td>
							
						
							<td align="right">
							   	<table cellspacing="0" cellpadding="0">
									<tr>
										<td id="searchLeft" class="button-left"/>
										<td>
											<a id="search" class="button-style" href="javascript: searchRulePackage();" onmouseover="buttonMouseOver('search');" onmouseout="buttonMouseOut('search');" onmousedown="buttonMouseDown('search');return false;" onmouseup="buttonMouseUp('search');">
												<span id="searchTxt"><%=msgs.getString("Index.jsp.searchbutton") %></span>
											</a>
										</td>
										<td id="searchRight" class="button-right"/>
									</tr>
								</table>
							</td>							
						</tr>
					</table>
				</td>
			</tr>
		</table>
	</form>
</div>
#4

Then you attach an onject (i.e.div) by attachObject method you can face with resize issue.
Some ways to avoid this:

  1. use dhtmlxForm (not HTML) and method attachForm()
    dhtmlx.com/docs/products/dht … ayout.html
    And you will have all the scrolls you need, because the form containes resizes with the layout cell it atached in
  2. use iframes and method attachURL()
    dhtmlx.com/docs/products/dht … h_url.html
    The attached page will reaize with the layout cell