Yii Framework Forum: Bootstrap grid col doesnt work - Yii Framework Forum

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Bootstrap grid col doesnt work What am I doing wrong?

#1 User is offline   mozaika 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 16
  • Joined: 30-October 17

  Posted 05 December 2017 - 11:53 AM

Hello,
I'm trying to present a general view that contains three columns (2 GridViews of different models and a main container to edit single selected object.

For some reason the 3 are rendered one under the other but I want them to be side by side horizontaly.

This is my code:


<div class="container-fluid">
    <div class="row">

            <!-- courses -->
            <div class="col-md-3 col-lg-3">
                    <p>
                        <?= Html::a('+', ['create'], ['class' => 'btn btn-success']) ?>
                    </p>
                <?php Pjax::begin(); ?>    <?= GridView::widget([
                        'dataProvider' => $courseDataProvider,
                        'filterModel' => $courseSearchModel,
                        'columns' => [
                            ['class' => 'yii\grid\SerialColumn'],
                            'img',
                            'name',
                            'description',
                        ],
                    ]); ?>
                <?php Pjax::end(); ?>
            </div>
            
            <!-- students -->
            <div class="col-md-3 col-lg-3">
                    <p>
                        <?= Html::a('+', ['create'], ['class' => 'btn btn-success']) ?>
                    </p>
                <?php Pjax::begin(); ?>    <?= GridView::widget([
                        'dataProvider' => $studentDataProvider,
                        'filterModel' => $studentSearchModel,
                        'columns' => [
                            ['class' => 'yii\grid\SerialColumn'],
                            'img_name',
                            'name',
                            'phone',
                            
                        ],
                    ]); ?>
                <?php Pjax::end(); ?>
            </div>
            <!-- students -->
            <div class="col-md-6 col-lg-6">
                    main contianer
            </div>
        </div>
</div>


What am I doing wrong here?
0

#2 User is offline   newbiedo 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 74
  • Joined: 28-June 12

Posted 05 December 2017 - 12:23 PM

I have something similar with 2 gridviews side by side. You would think that adding up the columns to 12 would work, but I had to use <div class="col-sm-5"> on both for a comfortable fit with a little space in between. You could try a wider layout by making a copy of your main layout and removing the line that says <div class="wrap"> and its end tag, then add padding to the left & right with style tags.
0

#3 User is offline   xPeng 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 48
  • Joined: 04-August 15

Posted 05 December 2017 - 02:50 PM

View Postmozaika, on 05 December 2017 - 11:53 AM, said:

What am I doing wrong here?

You neet the class .container .

bootstrap grid:container -> row -> col:

<div class="container">
    <div class="row">
        <div class="col-*-*"></div>
        ...
        <div class="col-*-*"></div>
    </div>
</div><!-- /.container -->

0

#4 User is offline   mozaika 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 16
  • Joined: 30-October 17

Posted 05 December 2017 - 03:18 PM

View PostxPeng, on 05 December 2017 - 02:50 PM, said:

You neet the class .container .

bootstrap grid:container -> row -> col:

<div class="container">
    <div class="row">
        <div class="col-*-*"></div>
        ...
        <div class="col-*-*"></div>
    </div>
</div><!-- /.container -->



I have it in my code
<div class="container-fluid">

by mistake didn't copy it here
still doesnt work
0

#5 User is offline   mozaika 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 16
  • Joined: 30-October 17

Posted 05 December 2017 - 03:21 PM

View Postnewbiedo, on 05 December 2017 - 12:23 PM, said:

I have something similar with 2 gridviews side by side. You would think that adding up the columns to 12 would work, but I had to use <div class="col-sm-5"> on both for a comfortable fit with a little space in between. You could try a wider layout by making a copy of your main layout and removing the line that says <div class="wrap"> and its end tag, then add padding to the left & right with style tags.



Thanks for the reply
I don't understand what you mean
can you please add a code example?
0

#6 User is offline   mozaika 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 16
  • Joined: 30-October 17

Posted 05 December 2017 - 03:35 PM

View Postnewbiedo, on 05 December 2017 - 12:23 PM, said:

I have something similar with 2 gridviews side by side. You would think that adding up the columns to 12 would work, but I had to use <div class="col-sm-5"> on both for a comfortable fit with a little space in between. You could try a wider layout by making a copy of your main layout and removing the line that says <div class="wrap"> and its end tag, then add padding to the left & right with style tags.


Ok thanks!
I got it
now i just need to find a way to minimize the grids cause it doesnt fit in..
0

#7 User is offline   newbiedo 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 74
  • Joined: 28-June 12

Posted 05 December 2017 - 07:53 PM

View Postmozaika, on 05 December 2017 - 03:35 PM, said:

Ok thanks!
I got it
now i just need to find a way to minimize the grids cause it doesnt fit in..


Glad to hear you have it working. What I did to get two gridviews side by side:
<div class="row">
 <div class="col-sm-5">
  <?= //gridview widget code 1 ?>
 </div>
 <div class="col-sm-2">
  <hr>
 </div>
 <div class="col-sm-5">
  <?= //gridview widget code 2 ?>
 </div>
</div>


It did not work right using 2 columns of 6 in the same way you had trouble with 3 columns of 4. Making mine 2 columns of 5 plus a spacer of 2 worked better.
0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users