Switch position of Qcodo elements

Question

I have a checkbox that when clicked shows a drop down list. i just want them to change positions.

Problem is when i change positions using php, it throws an ajax error. Since each one is called in a dynamic div id, i cannot really use CSS to change it.

I have looked into just creating a top margin using nth-child in css, but haven't had luck with that either.

Right now the check box toggles the drop down's visibility, but the check box is below where the dropdown appears. I guess another approach is to use javascript somehow... Am I missing something? Why can't the order be swapped

    $ret['reclength'] = new QListBox($objParent);
    $ret['length']->Name = _sp('Item Name');

    $ret['length']->AddItem("weekly", "7");
    $ret['length']->AddItem("bi-weekly","14" );
    $ret['length']->AddItem("Monthly","30" );
    $ret['length']->Display=false;      

    $ret['checkbox'] = new QCheckbox($objParent);
    $ret['checkbox']->Name = _sp('checkbox name');
    $ret['checkbox']->AddAction(new QClickEvent(), new QToggleDisplayAction($ret['length']));

    return $ret;

Answer 1

The rendering order will depend on your controls parent, in your case $objParent. If $objParent is a QForm then you will just need to switch their order in the QForms template. However with the behavior you are witnessing I am assuming that $objParent is a QPanel. If that is the case you will need to add a template to the QPanel and render your controls in that template in the order you desire. You could try AutoRenderChildren = true, but that will render the controls in the order in which they are delegated as children of the QPanel.

To use CSS to position you may want to add an id to the control. That way you can reference it in your CSS and avoid any ambiguity in your selector. You just need to add a second parameter to the constructor like

$ret['reclength'] = new QListBox($objParent, "myControlId");

Just make sure that the myControlId is unique for the page. then you can access in css using #myControlId.

Another option which may work is to set the parent to $this when you instantiate the QListBox control and then after instantiating the QCheckbox set the parent of the QListBox to $objParent. Haven't tested this but it should work. You cann see an example of QForms in action on the QCubed Examples site. The code would look something like this. Note this is untested but should work.

$ret['reclength'] = new QListBox($this);
$ret['length']->Name = _sp('Item Name');

$ret['length']->AddItem("weekly", "7");
$ret['length']->AddItem("bi-weekly","14" );
$ret['length']->AddItem("Monthly","30" );
$ret['length']->Display=false;      

$ret['checkbox'] = new QCheckbox($objParent);
$ret['checkbox']->Name = _sp('checkbox name');
$ret['checkbox']->AddAction(new QClickEvent(), new QToggleDisplayAction($ret['length']));

$ret['reclength']->SetParentControl($objParent);

return $ret; 

Answer 2

I'm not sure how your template file looks like, possibly the out-of-order problem is there, since ordering them correctly there will change the order how it's displayed. But even without that you can do something about ordering them. Simply use z-index and add a Css class to the QListbox:

$ret['length']->CssClass = "mydropdown";

And this to CSS:

.mydropdown {
    z-index: 9999;
}

But there is also a IE6/7 bug with z-index