Dropdown-x on listview - Githubissues

Skizito commented 10 years ago

Hi I want to use the dropdown on a listview, but the listview returns a string and therefor I can't just echo the widget. If I try to include the widget on the string, it will only display the code and not execute it.

How can I do this?

kartik-v commented 10 years ago

How are you generating the listview and the dropdown inside?

Skizito commented 10 years ago

<?= ListView::widget([ 'dataProvider' => $dataProvider, 'itemOptions' => ['class' => 'item'], 'pager' => ['class' => \kop\y2sp\ScrollPager::className()], 'itemView' => function ($model, $key, $index, $widget) {

    $profile = UserProfile::findOne($model->dot_friend2);

    //some code to generate values i need

$string = "";

$string .= "<div class='col-xs-12 col-sm-12 col-md-6 col-lg-6 '>
<div class='panel panel-primary'>
    <div class='row padall'>
        <div class='col-xs-12 col-sm-12 col-md-3 col-lg-3'>
            <span></span>";
            if ($flag == true) {
        $string .= "<a href='/site/web/user/profile?profile=".$profile->id ."'><img src='".Yii::$app->request->baseUrl. "/img/user/".$profile->id .".png' /></a>";
    } else {
        $string .= "<a href='/site/web/user/profile?profile=".$profile->id ."'><img src='" . Yii::$app->request->baseUrl . "/img/noimage.jpg' alt='Image Missing' /></a>";
    }   

        $string .= "</div>
        <div class='col-xs-12 col-sm-12 col-md-9 col-lg-9'>
            <div class='clearfix'>
                <div class='pull-left'>
                    <span class='fa fa-dollar icon'><a href='/site/web/user/profile?profile=".$profile->id ."'/>".$profile->full_name."</a></span>
                </div></div><br>
            <div>
                ". $common. " ". Yii::t('app','Friends in common')." 
            </div><span class='pull-right'>";

//I want dropdown here

   $string .="</span>
        </div>
    </div>
</div>

";

return $string; }, ]) ?>

This is the dropdown I want:

<?php echo Html::beginTag('div', ['class'=>'dropdown']); echo Html::button('More ', ['type'=>'button', 'class'=>'btn btn-default', 'data-toggle'=>'dropdown']); echo DropdownX::widget([ 'items' => [ ['label' => 'Companies', 'items' => [ ['label' => 'Company1', 'url' => '#'], ['label' => 'Company2', 'url' => '#'], ['label' => 'Company3', 'url' => '#'], '

', ['label' => 'Show All', 'url' => '#'],
]], ['label' => 'Group', 'items' => [ ['label' => 'Group1', 'url' => '#'], ['label' => 'Group2', 'url' => '#'], ['label' => 'Group3', 'url' => '#'], '

', ['label' => 'Show All', 'url' => '#'],
]], ['label' => 'Suggest Friends', 'url' => '#'], '

', ['label' => 'Remove Friendship', 'url' => '#'], ], ]); echo Html::endTag('div');?>

Skizito commented 10 years ago

If I just place the echos in the listview, this is what I get: http://i.imgur.com/x2H4bE0.png

But I want the dropdowns inside each rectangle.

kartik-v commented 10 years ago

You need to check your complete markup - for other CSS causing this... e.g. floats or inline-blocks... do a simple test by placing a button dropdown inside <div class="well">. If that works... build up from there.

Skizito commented 10 years ago

Made it work, thanks. But I have a new problem.

The dropdown-x doesn't adapt to where on the screeen it is (if it's on the far right, it will display it's dropdown items out of screen, same as if it's all the way on the bottom)

kartik-v commented 10 years ago

Its a bootstrap default CSS styling. The menu can be either aligned left or right of the container.

Check the usage section again on the demo site for a DROPDOWN LEFT and DROPDOWN RIGHT example.

Skizito commented 10 years ago

Yes I was already using the drop-down right when I asked the question, I was asking it because of the submenus, they are the ones that go out of bounds for me. If the right drop-down is close to the far right, the submenus get out of screen

kartik-v commented 10 years ago

I understand -- the bootstrap default dropdown CSS needs to be overridden... for such situations... you may update if you find a style that works or improves this...

kartik-v / yii2-dropdown-x

Dropdown-x on listview #3