Layout Fullpage Min Width

Suite and Optimus Suite 5
#1

I use the layout in full page mode all the time (this is one of the reasons I choose dhtmlx). When browsers have plenty of screen resolution, this work great. One cell is set to expand or contract so that the page is always full.

I am having issues with low resolution monitors. Some windows xp users only have 1024x768 and iPad users have smaller resolutions too. When this happens, the cell which is set to expand/contract becomes very small.

Is there a way to set the expanding/contracting cell to have a minimum width? And then when the screen resolution is too small, a single horizontal scroll bar would appear at the bottom of the page?

It is challenging to create screens for all sized monitors. Especially when the Ribbon Bar is being used, the right side blocks get chopped off with smaller screens.

#2

Hello
There is a method setMinWidth for layout cell
docs.dhtmlx.com/api__dhtmlxlayou … width.html
But unfortunately there is no approach to resize such components as toolbar/ribbon to show all the items you need when browser window is too small for it

#3

It looks like this method is failing in a view,

4.2 Professional:

  hm.l = pg.lo.cells('a').attachLayout('3W');
  hm.l.setSeparatorSize(0,15);
  hm.l.setSeparatorSize(1,15);
  hm.l.cells('a').fixSize(true, true);
  hm.l.cells('c').fixSize(true, true);
 
  hm.l.cells('a').setWidth(298)
  hm.l.cells('c').setWidth(365);
  
  hm.l.cells('b').setMinWidth(298)  //// error here:  Uncaught ReferenceError: h is not defined
#4

Please, open a ticket in the support system and attach there completed demo. We will inspect it to solve this issue
docs.dhtmlx.com/auxiliary_docs__ … pport.html

#5

I do not think I have any more support tickets available.

setMinWidth() is not working in the most basic layout:

dhtmlxEvent(window,'load', init);

function init() {
  var l = new dhtmlXLayoutObject(document.body, '2U');
  l.cells('b').setMinWidth(200)
}
#6

Looking at the code, there is a problem:

dhtmlXLayoutCell.prototype.setMinWidth = function(a) {
    this.conf.min_height = parseInt(h) || 0
};

The error is: Uncaught ReferenceError: h is not defined

#7

I am not sure if setMinWidth() will do what I need. I am looking to set a minim page width.

I would like to specify a minimum page with of something like 1300px wide. So if someone views with a browser 1024px wide, a horizontal scroll bar would appear at the bottom of the screen.

This would prevent the cells in the layout from getting too small.

#8

Hi

setMinWidth -> this.conf.min_height
known issue, fix will included into the nearest release

setMinWidth is define minimal width for a cell, while resize is in action or if you call cells(id).setWidth().

please attach image with more detailed explanation for second question (post before my)

#9

Hi Andri,

Here’s what I was hoping might be a possibility. I am using screenshots of a dhtmlx window to convey the concept, In reality, the problem is only pertains to fullscreen layouts. So think of the window as a fullscreen.

Here’s a layout, with 2 cells. Cell b is fixed. Cell a is set to expand and contract as the window is resized.

When the browser has a large resolution, cell A expands:

When the browser has a small resolution, cell A contracts:


This is where the problem lies. Cell A is now way too small. If Cell A had content, it would get its own horizontal scrollbar.

What would be nice, is it was possible to set a minimum width for the whole layout. So in case 3, where the browser is too small, a single horizontal scroll bar would appear under cells A and B – similar to a grid where the columns are too large for the container.

#10

Well, according your logic

  1. cell a - flexible, set to autosize, but has minWidth say 200px
  2. cell b - fixed width, for example 200px

so minimal width for lyaout will 200+200=400px?
then if user will make browser width smaller say 300px what should happen? body scroll should appear?

#11

Yes, that what I was hoping to happen, a body scroll bar would appear. Here’s a photoshoped picture:

#12

Actually close to this:

#13

And this when the opposite direction:

#14

Too custom case,
but if it very important in your app, then:

  1. cerate div, attach it to body, set width/height
  2. init layout providing dev frop above as parent
  3. attach resize events to document.body (see sources from 4.2, dhtmlxCommon/codebase/dhtmlxcontainer.js, you need lines 1230…1250, i.e. use similar code)
  4. instead of line 1240 - resize your parent div, height = document.body height, width = Math.max(your_min_width, document.body width);
  5. and finally - call layout.setSizes()
    something like.
#15

Modifying the source code to make this happen is not an option. We can only use supported modules.

#16

I mean you can add your custom code, not modify sources. Text above just a logic and example.

#17

I think I understand the concept.

  • create a page with a single div
  • adjust the size of the div to 100% or a minimum px
  • place a layout in the div