yii\bootstrap\NavBar add property from full-width maket #1474

Closed
mass3ff3ct opened this Issue Dec 11, 2013 · 15 comments

Comments

Projects
None yet
8 participants
@mass3ff3ct

I'm so sorry for my bad english))

Problem:

In last version 'bootstrap' was added class ".container-fluid" for 'full-width' maket, but in class 'yii\bootstrap\NavBar' was no customization 'div' inside 'nav'.

echo Html::beginTag('nav', $this->options);
echo Html::beginTag('div', ['class' => 'container']);  // string 70, problem

i'm propose to do:

echo Html::beginTag('div',$this->innerOptions);
@qiansen1386

This comment has been minimized.

Show comment
Hide comment
@qiansen1386

qiansen1386 Dec 11, 2013

Contributor

Sorry, i am a bit lost.
which version of bootstrap are we using right now.

2013/12/11 mass3ff3ct notifications@github.com

I'm so sorry for my bad english))

Problem:

In last version 'bootstrap' was added class ".container-fluid" for
'full-width' maket, but in class 'yii\bootstrap\NavBar' was no
customization 'div' inside 'nav'.

echo Html::beginTag('nav', $this->options);
echo Html::beginTag('div', ['class' => 'container']); // string 70, problem

i'm propose to do:

echo Html::beginTag('div',$this->innerOptions);


Reply to this email directly or view it on GitHubhttps://github.com/yiisoft/yii2/issues/1474
.

Contributor

qiansen1386 commented Dec 11, 2013

Sorry, i am a bit lost.
which version of bootstrap are we using right now.

2013/12/11 mass3ff3ct notifications@github.com

I'm so sorry for my bad english))

Problem:

In last version 'bootstrap' was added class ".container-fluid" for
'full-width' maket, but in class 'yii\bootstrap\NavBar' was no
customization 'div' inside 'nav'.

echo Html::beginTag('nav', $this->options);
echo Html::beginTag('div', ['class' => 'container']); // string 70, problem

i'm propose to do:

echo Html::beginTag('div',$this->innerOptions);


Reply to this email directly or view it on GitHubhttps://github.com/yiisoft/yii2/issues/1474
.

@mass3ff3ct

This comment has been minimized.

Show comment
Hide comment
@mass3ff3ct

mass3ff3ct Dec 11, 2013

Bootstrap 3.0.3

Bootstrap 3.0.3

@qiansen1386

This comment has been minimized.

Show comment
Hide comment
@qiansen1386

qiansen1386 Dec 11, 2013

Contributor

So that you want to change line 70 form ['class' => 'container'] to ['class' => 'container-fluid']
Have you tried out what will happened if you change it manually by yourself?

Contributor

qiansen1386 commented Dec 11, 2013

So that you want to change line 70 form ['class' => 'container'] to ['class' => 'container-fluid']
Have you tried out what will happened if you change it manually by yourself?

@mass3ff3ct

This comment has been minimized.

Show comment
Hide comment
@mass3ff3ct

mass3ff3ct Dec 11, 2013

Yes, but to be able to select or/and add other options as needed

Yes, but to be able to select or/and add other options as needed

@cebe

This comment has been minimized.

Show comment
Hide comment
@cebe

cebe Dec 11, 2013

Member

Looking at the bootstrap docs I am wondering why there is a container tag at all...

Member

cebe commented Dec 11, 2013

Looking at the bootstrap docs I am wondering why there is a container tag at all...

@mass3ff3ct

This comment has been minimized.

Show comment
Hide comment
@mass3ff3ct

mass3ff3ct Dec 11, 2013

Maybe then .сontainer removed? Save only wrapper "nav")

Maybe then .сontainer removed? Save only wrapper "nav")

@kartik-v

This comment has been minimized.

Show comment
Hide comment
@kartik-v

kartik-v Dec 11, 2013

Contributor

Bootstrap 3.0 does not have anymore container-fluid. Read the migration from 2.0 to 3.0 docs on what has changed.

Now, for styling the Bootstrap 3 navbar:

  • for a padded nav within the navbar -- wrap it inside a container class
  • for a 100% width do not wrap it inside a container class

Example:

<div class="navbar navbar-inverse">
    <div class="container">   <!-- remove this for 100% width -->
        <div class="navbar-header"> ... </div>
        <div class="navbar-collapse"> ... </div>
    </div>                    <!-- remove this for 100% width -->
</div>
Contributor

kartik-v commented Dec 11, 2013

Bootstrap 3.0 does not have anymore container-fluid. Read the migration from 2.0 to 3.0 docs on what has changed.

Now, for styling the Bootstrap 3 navbar:

  • for a padded nav within the navbar -- wrap it inside a container class
  • for a 100% width do not wrap it inside a container class

Example:

<div class="navbar navbar-inverse">
    <div class="container">   <!-- remove this for 100% width -->
        <div class="navbar-header"> ... </div>
        <div class="navbar-collapse"> ... </div>
    </div>                    <!-- remove this for 100% width -->
</div>
@mass3ff3ct

This comment has been minimized.

Show comment
Hide comment
@mass3ff3ct

mass3ff3ct Dec 11, 2013

commit in bootstrap repository: Add .container-fluid variation for full-width containers and layouts
pruf link

commit in bootstrap repository: Add .container-fluid variation for full-width containers and layouts
pruf link

@qiansen1386

This comment has been minimized.

Show comment
Hide comment
@qiansen1386

qiansen1386 Dec 12, 2013

Contributor

According to my experiment, I didn't put any container arround

element, and it is working perfectly, If i wrap it with container-fluid, there is completely no difference at all. And my Bootstrap version is 3.0.1, a very old version. Did they mention why did they Add container-fluid for nav?

PS: i only tried out the static on top type. not other type.

Contributor

qiansen1386 commented Dec 12, 2013

According to my experiment, I didn't put any container arround

element, and it is working perfectly, If i wrap it with container-fluid, there is completely no difference at all. And my Bootstrap version is 3.0.1, a very old version. Did they mention why did they Add container-fluid for nav?

PS: i only tried out the static on top type. not other type.

@mass3ff3ct

This comment has been minimized.

Show comment
Hide comment
@mass3ff3ct

mass3ff3ct Dec 12, 2013

I propose to make the property "$fluid". If it is "true", do not add element inside nav. "false" - add a div with the class ".container"
As cited in the example, the user kartik-v

I propose to make the property "$fluid". If it is "true", do not add element inside nav. "false" - add a div with the class ".container"
As cited in the example, the user kartik-v

@cebe cebe closed this in b7e5ed3 Dec 17, 2013

cebe added a commit that referenced this issue Dec 17, 2013

@ghost ghost assigned cebe Dec 17, 2013

@frijj2k frijj2k referenced this issue in kartik-v/yii2-nav-x Jul 8, 2014

Closed

Cannot specify container-fluid #3

@frijj2k

This comment has been minimized.

Show comment
Hide comment
@frijj2k

frijj2k Jul 9, 2014

Adding the option:

'renderInnerContainer' => false,

To the NavBar removes the inner container and allows it to fill 100% width. Tested and working.

frijj2k commented Jul 9, 2014

Adding the option:

'renderInnerContainer' => false,

To the NavBar removes the inner container and allows it to fill 100% width. Tested and working.

@brunofunnie

This comment has been minimized.

Show comment
Hide comment
@brunofunnie

brunofunnie Sep 26, 2015

I think it should be used with "container-fluid", see:

(see button at right with full screen)
https://jsfiddle.net/k5hc5rua/ - Without "container-fluid"
https://jsfiddle.net/t51hjvnb/- With "container-fluid"

So "'renderInnerContainer' => false," just removes a DIV that is needed for correct alignment.

I think it should be used with "container-fluid", see:

(see button at right with full screen)
https://jsfiddle.net/k5hc5rua/ - Without "container-fluid"
https://jsfiddle.net/t51hjvnb/- With "container-fluid"

So "'renderInnerContainer' => false," just removes a DIV that is needed for correct alignment.

@brunofunnie

This comment has been minimized.

Show comment
Hide comment
@brunofunnie

brunofunnie Sep 26, 2015

Well, looking at the code, there's an attribute called (innerContainerOptions), so if you do:

'innerContainerOptions' => ['class'=>'container-fluid'],

It should fix it.

Well, looking at the code, there's an attribute called (innerContainerOptions), so if you do:

'innerContainerOptions' => ['class'=>'container-fluid'],

It should fix it.

@minhluan288

This comment has been minimized.

Show comment
Hide comment
@minhluan288

minhluan288 Mar 19, 2016

thank @brunofunny

thank @brunofunny

@shawe

This comment has been minimized.

Show comment
Hide comment
@shawe

shawe Dec 12, 2016

thanks @brunofunny I was looking for the same ;)

shawe commented Dec 12, 2016

thanks @brunofunny I was looking for the same ;)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment