Adding a form to DHTMLX Layout Header

Dear support team

We are using a commercial license of DHTMLX and would like to add a simple text input field to the header of a dhxLayout cell (used as input for an ajax based search in the actual input of the layout container).

Basically, we are doing the following (simplified):

dhxLayout = new dhtmlXLayoutObject(...);
dhxLayout.dhxWins.setImagePath(...);
dhxLayout.setImagePath(...);
dhxLayout.setEffect("resize", true);
dhxLayout.setEffect("collapse", true);
dhxLayout.setEffect("highlight", true);
cell = dhxLayout.cells("a");
txt = "<input type='text' name='query' />"
cell.setText(txt)

The field appears correctly and text can be entered. However, the field behaves funny in terms of selecting text and keyboard navigation (“Home” and “End” do not work, Text can be selected using “Shift+ArrowKey” or “Ctrl+A” but is not highlighted, etc).

You can reproduce this on the demo page:

dhtmlx.com/docs/products/dht … ndex.shtml

Fire up Firebug and execute:

dhxLayout.cells("a").setText("<input type='text' name='query' />")

Any ideas? I really don’t get what is going on here. I’ve never seen such a weird behavior of a text input field before.

Thanks a lot for your response.

Best regards
eddie

Hello,

selection is deisabled in layout header. You may enable it for input as follows:

dhxLayout.cells(“a”).setText("<input type=‘text’ name=‘query’ onselectstart=’(event||arguments[0]).cancelBubble= true’/>");

Alexandra

Thanks a lot for your reply. Your solution works great in IE (8), Chrome (7) and Safari for Windows (4). It does however not have an Effect in FF (3).

Is there an extension to your code which makes it work in FF?

Best Regards
eddie

To enable selection in FF you need to modify dhtmlxlayout_dhx_skyblue.css. Try to comment the following line there:

/* infobar label /
table.dhtmlxLayoutPolyContainer_dhx_skyblue td.dhtmlxLayoutSinglePoly div.dhtmlxPolyInfoBar div.dhtmlxInfoBarLabel {

/
-moz-user-select: none;*/
}

Thanks a lot, Alex. I ended up with:

table td.dhtmlxLayoutSinglePoly div.dhtmlxPolyInfoBar div.dhtmlxInfoBarLabel
{
  -moz-user-select: -moz-none !important;
}
input.searchbox-field
{
  -moz-user-select: text;
}

This way, the “-moz-user-select” property is only re-enabled for the text field, but disabling of selection remains in tact for regular elements in the layout info bar.

Thanks a lot for the rapid support
eddie