Tabbar with attached form does not show with enableAutosize

Hi guys,

I’ve attached a form to the the tabbar but it does not display letalone resize. Please help!!

Below is an example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Test</title>  <!-- tags -->
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <!-- javascript -->
  <script src="/dhtmlx/dhtmlx.js"></script>
  <script>
    window.dhx_globalImgPath = "/dhtmlx/imgs/";
  </script>
  <!-- stylesheets -->
  <link rel="stylesheet" type="text/css" href="/dhtmlx/dhtmlx.css"/>
</head>
<body>

<div id="tabbar" style="margin-top:10px;width:100%;height:100px;background-color:white;"></div>

<script>

var tabbar = new dhtmlXTabBar("tabbar", "top");
tabbar.setSkin("dhx_web");
tabbar.setImagePath("/dhtmlx/imgs/");
tabbar.enableAutoSize(true, true);
tabbar.addTab("a1", "Search", "100px");
tabbar.addTab("a2", "Results", "100px");

var myForm = tabbar.cells("a1").attachForm();
myForm.setSkin("dhx_web");
myForm.loadStruct("form.xml?e=" + new Date().getTime());

tabbar.setTabActive("a1");

</script>
</body>
</html>

If I remove the enableAutoSize command the form shows.

Hi
Could you, please, provide us yout form xml?

<?xml version="1.0" encoding="UTF-8"?> <items> <item type="fieldset" name="data" label="Welcome" inputWidth="auto"> <item type="input" name="name" label="Login" position="label-top"/> <item type="password" name="pass" label="Password" position="label-top"/> <item type="button" name="save" value="Proceed"/> </item> </items>

Oh, sorry… Now i see the issue: when you attach form - it tries to adjust to its parent size. But at first you call enableAutoSize() for tabbar, which will be trying to adjust to form’s size. And here is a conflict. If you are going to use enableAutoSize() - you need to know attached element dimension.

Yes, that’s right. Is there a way around this?

No, because of elementary logic.
You can only choose one of these components, which will be with fixed size.

OK, so is it possible to define the size fo the form and allow the tabbar to resize?

I did try creating the form as a

element. ANd then attaching it using attachObject. It kind of works but does not render properly. I have to switch between the tabs to see the form. Also, although the resize has a good attempt its not perfect.

Is this an avenue that can be followed up?

It seems like we need your demo to help you. Not enough of data.
Please, provie it with a description of your application logic.
docs.dhtmlx.com/doku.php?id=othe … leted_demo

Sorry,

Here it is I an using the latest enterprise version:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Test</title>  <!-- tags -->
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <!-- javascript -->
  <script src="/dhtmlx/dhtmlx.js"></script>
  <script>
    window.dhx_globalImgPath = "/dhtmlx/imgs/";
  </script>
  <!-- stylesheets -->
  <style type="text/css">
    body, p, div, a {
      font-family:"Lucida Grande","Lucida Sans Unicode","bitstream vera sans","trebuchet ms",verdana,sans-serif;
      font-size:12px;
    }
  </style>
  <link rel="stylesheet" type="text/css" href="/dhtmlx/dhtmlx.css"/>
</head>
<body>

<div id="form" style="width:auto;height:auto;"></div>
<div id="tabbar" style="margin-top:10px;width:100%;height:100px;background-color:white;"></div>

<script>

var tabbar = new dhtmlXTabBar("tabbar", "top");
tabbar.setSkin("dhx_web");
tabbar.setImagePath("/dhtmlx/imgs/");
tabbar.addTab("a1", "Search", "100px");
tabbar.addTab("a2", "Results", "100px");

var myForm = new dhtmlXForm("form");
myForm.setSkin("dhx_web");
myForm.loadStruct("form.xml?e=" + new Date().getTime(),function(){
  tabbar.cells("a1").attachObject("form");
  tabbar.enableAutoSize(false,true);
});

tabbar.setTabActive("a1");

</script>
</body>
</html>

The form.xml is the same as the one in the thread.

If you switch between the tabs the form appears resized - well sort of.

Also, a different problem is with the form checkbox object. If you click on it the checkbox the text is greyed out and the checkbox itself disappears until you place the focus on another obect.

Look forward to hearing from you!

If you switch between the tabs the form appears resized - well sort of.
Ok, now, please, could you provide expecting result?

Also, a different problem is with the form checkbox object. If you click on it the checkbox the text is greyed out and the checkbox itself disappears until you place the focus on another obect.
But you haven’t any checkbox type in your form xml…

Apologies, I amended the form.xml :blush:

<?xml version="1.0" encoding="UTF-8"?> <items> <item type="settings" labelWidth="120" inputWidth="120"/> <item type="fieldset" name="data" label="Welcome" inputWidth="auto"> <item type="input" name="name" label="Login" /> <item type="password" name="pass" label="Password" /> <item type="checkbox" name="check" label="Confirm" /> <item type="button" name="save" value="Proceed"/> </item> </items>

With regards to the tabbar I was hoping that by loading the form first into the div element and then attaching that the tabbar would resize automatically. By pressing the between the tabs you can see when you switch back it resizes to the size of the form but a small amount is chopped off at the bottom (hence me saying sort of).

With regards to the check box - it seems that by using the default dhtmlx.js it works but my version is a cut down version I have built using your tool provided in the ent. suite. It seems to occur when I use this newly bult version.

Update on the check box problem - the full standard version works but the pro version does not. Just to be clear we are using the dhtmlx_pro_full_web_skin.zip package.

Hi,

Any update on these?

Cheers!

About checkbox: it causes by focus. Just press the TAB key to go from this item and you will see previous style.

Darya,

You are right when the focus is taken away it appears but surely, this cannot be correct if you click on the checkbox the box and the tick disappears!! That should certainly not happen.

Its works correctly in the std version but NOT in pro.

Localy it replicates in both versions: std and pro. It is a focus feature.

Hi Darya,

Are you saying that once you click on the check box the checkbox and tick disappear from the screen? If that is so I’m sorry but I don’t agree that that is a feature.

I have attached three images showing:

  1. initial state
  2. after the checkbox is clicked
  3. after focus is taken away.




Please, replace your picture with attached

Thanks Darya,

That’s fixed it.

However, it seems like the image I have came from the custom skin I built using your online builder :astonished:

It can be so, because this picture was added after the last Designer update.