1

I'm working on Yii Framework and Yii Booster extension as bootstrap. I'm trying to make a Login form inside a dropdown. I have a TbNavbar and on it is the dropdown code, but when I add the login form inside the dropdown it just shows the code inside the drop down.

I use as guide this post:

Here is my code with the form and it's just not working:

<?php  $this->beginWidget('bootstrap.widgets.TbNavbar', array(
'type'=>'inverse',
'brand' => 'Title',  
'fixed'=>'bottom',  
'collapse'=>true,  
'items'=>array(
array(
  'class'=>'bootstrap.widgets.TbMenu',
  'type'=>'inverse',
  'items'=>array(
    array('label'=>'Home', 'url'=>'#', 'active'=>true),
    array('label'=>'Link', 'url'=>'#'),
    array('label' => 'DropDown', 'items' => array(
          array('label' => 'Item1', 'content' => 'Item1 Content'),
          array('label' => 'Item2', 'content' => 'Item2 Content')
        )),
    array('label'=>'Dropdown', 'url'=>'#', 'items'=>array(
      array('label'=>'Action', 'url'=>'#'),
      array('label'=>'Another action', 'url'=>'#'),
      array('label'=>'Something else here', 'url'=>'#'),
      '---',
      array('label'=>'NAV HEADER'),
      array('label'=>'Separated link', 'url'=>'#'),
      array('label'=>'One more separated link', 'url'=>'#'),


    )),
  ),
),


'<ul class="nav pull-right">
               <li><a href="/users/sign_up">Sign Up</a></li>
               <li class="divider-vertical"></li>
               <li class="dropdown">
                   <a class="dropdown-toggle" href="#" data-toggle="dropdown">Sign In <strong class="caret"></strong></a>
                   <div class="dropdown-menu" style="padding: 15px; padding-bottom: 0px;">
                       <?php $form = $this->beginWidget(\'bootstrap.widgets.TbActiveForm\', array(
                          \'id\'=>\'verticalForm\',
                          \'htmlOptions\'=>array(\'class\'=>\'well\'),
                      )); ?>

                      <?php echo $form->textFieldRow($model, \'textField\', array(\'class\'=>\'span3\')); ?>
                      <?php echo $form->passwordFieldRow($model, \'password\', array(\'class\'=>\'span3\')); ?>
                      <?php echo $form->checkboxRow($model, \'checkbox\'); ?>
                      <?php $this->widget(\'bootstrap.widgets.TbButton\', array(\'buttonType\'=>\'submit\', \'label\'=>\'Login\')); ?>

                      <?php $this->endWidget(); ?>
                    </div>
               </li>
           </ul>'  ),)); ?>
<?php $this->endWidget(); ?>

2 Answers 2

0

Try like this. It is working for me

        <?php
        $this->beginWidget('bootstrap.widgets.TbNavbar', array(
            'type' => 'inverse',
            'brand' => 'Title',
            'fixed' => 'bottom',
            'collapse' => true,
            'items' => array(
                array(
                    'class' => 'bootstrap.widgets.TbMenu',
                    'type' => 'inverse',
                    'items' => array(
                        array('label' => 'Home', 'url' => '#', 'active' => true),
                        array('label' => 'Link', 'url' => '#'),
                        array('label' => 'DropDown', 'items' => array(
                                array('label' => 'Item1', 'content' => 'Item1 Content'),
                                array('label' => 'Item2', 'content' => 'Item2 Content')
                        )),
                        array('label' => 'Dropdown', 'url' => '#', 'items' => array(
                                array('label' => 'Action', 'url' => '#'),
                                array('label' => 'Another action', 'url' => '#'),
                                array('label' => 'Something else here', 'url' => '#'),
                                '---',
                                array('label' => 'NAV HEADER'),
                                array('label' => 'Separated link', 'url' => '#'),
                                array('label' => 'One more separated link', 'url' => '#'),
                        )),
                    ),
                ),
                '<ul class="nav pull-right">
            <li><a href="/users/sign_up">Sign Up</a></li>
            <li class="divider-vertical"></li>
            <li class="dropdown">
                <a class="dropdown-toggle" href="#" data-toggle="dropdown">Sign In <strong class="caret"></strong></a>
                <div class="dropdown-menu" style="padding: 15px; padding-bottom: 0px;">' . html($this,$model) . '</div>
            </li>
        </ul>'),
                )
        );
        ?>
        <?php $this->endWidget(); ?>

function definition

    <?php
    function html($obj,$model)
    {
        $html='';
        $form = $obj->beginWidget('bootstrap.widgets.TbActiveForm', array(
            'id' => 'verticalForm',
            'htmlOptions' => array('class' => 'well')
                ));
        $html.=$form->textFieldRow($model, 'textField', array('class' => 'span3'));
        $html.=$form->passwordFieldRow($model, 'password', array('class' => 'span3'));
        $html.=$form->checkboxRow($model, 'checkbox');
        $html.=CHtml::submitButton('Login',array('class'=>'btn btn-info'));    
        $obj->endWidget();

        return $html;
    }
    ?>

EDIT:: As per bellow comment

You can stop the default propagation of Bootstrap Drop-down when you are working inside drop down content.

        <script type="text/javascript">
            $(document).ready(function()
            {        
                $('.dropdown-menu').click(function(e)
                {            
                    e.stopPropagation();            
                }); 
            });
        </script>
3
  • Thanks! It's now on the dropdown, but when I click the button, doesn't do something :c Additional to that I have some code to stop ptopagation on the thextfields and the "login button", because when you clicked on something at the dropdown it hiddes with no reason. Can that be an issue?
    – Arely Coca
    Jul 24, 2013 at 19:16
  • @AareelyCoca, Please check the Edit to solve the problem you are facing with dropdown.
    – Hearaman
    Jul 25, 2013 at 6:29
  • Ok, I have all the code you put me here and when I click the button it keeps doing nothing :c Would be something else I'm missing?
    – Arely Coca
    Jul 25, 2013 at 22:51
0

Put this code to your main layouts head. This will load javascript, and menu should work with it.

<?php Yii::app()->bootstrap->registerAssetJs('');?>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.