When setting no position, he page.vars.php page sets an extra class 'container' on the navbar element. This isn't correct, as the container class should be in that element, like it is defined in the template. Because of this, we have a container inside a container. This should be fixed, as using container-fluid in the page.tpl.php for the navbar now doesn't work because of it.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

markhalliwell’s picture

Title: unnecessary extra container class in navbar. » Duplicate container class in navbar when position not set
Version: 7.x-3.0 » 7.x-3.x-dev
Priority: Critical » Normal
burnsjeremy’s picture

I think that this is along the same lines of the issue that I'm looking to see if anyone had seen. If not let me know and I can move it to a new issue.

Except, I don't think that this actually has anything to do with the position not being set (Looking at the logic the .container-fluid class is going to be set if the settings page has .container-fluid checked no matter what the position is set to unless I'm missing another piece.). So that really isn't the real issue though. It would still put a container class on the navbar at some point or another and then a container class in the next div as well no matter if the position is set or not.

If you take a look at the page template http://cgit.drupalcode.org/bootstrap/tree/templates/system/page.tpl.php#n76 you see that the navbar header element already has a container being set right below that.

Bootstrap Issue:
So if you take a look at the container docs http://getbootstrap.com/css/#overview-container you will see that it states that containers are not nestable due to padding and margin settings. When you put a container inside of a container it seems to shift the content over to a sort of offset and things like a logo and content can't be aligned correctly without a little CSS hacking, I know it is probably driving someone crazy somewhere right now trying to figure out why its not lining up correctly. I also double checked the rule and ran a page through BootLint and it comes up with this error as well (bootlint: E004 Containers (`.container` and `.container-fluid`) are not nestable).

Proposal:
Since there is a div with container class there already we can just remove the logic that adds container classes to navbar classes, I don't see a point in mixing those up anyway. I am submitting a patch for this, if there are any problems or if I need to do it another way, just let me know.

burnsjeremy’s picture

Status: Active » Needs review
markhalliwell’s picture

Status: Needs review » Closed (duplicate)
Related issues: +#2452703: Containers (`.container` and `.container-fluid`) are not nestable
markhalliwell’s picture

Title: Duplicate container class in navbar when position not set » .container-fluid fix not in overrides.less for navbar
Component: Code » CSS Overrides
Status: Closed (duplicate) » Active

Re-opening to address #2452703-3: Containers (`.container` and `.container-fluid`) are not nestable.

Only modify the .less file (not .css) and please do not include the compiled version in the patch either.

burnsjeremy’s picture

This should take care of the workaround piece, just removed the margin/padding from nested container-fluid present in navbar as container had been done.

burnsjeremy’s picture

Status: Active » Needs review
markhalliwell’s picture

Status: Needs review » Needs work

I would much prefer that it remains with the existing rule set: http://cgit.drupalcode.org/bootstrap/tree/starterkits/less/less/override...

Just modify the existing code so it selects both .container and .container-fluid elements.

markhalliwell’s picture

I would imagine maybe something like the following?

// Default navbar.
.navbar {
  &.container {
    @media @tablet {
      max-width: ((@container-sm - @grid-gutter-width));
    }
    @media @normal {
      max-width: ((@container-md - @grid-gutter-width));
    }
    @media @wide {
      max-width: ((@container-lg - @grid-gutter-width));
    }
  }
  &.container,
  &.container-fluid {
    margin-top: 20px;
    > .container,
    > .container-fluid {
      margin: 0;
      padding: 0;
      width: auto;
    }
  }
}
burnsjeremy’s picture

Status: Needs work » Needs review
FileSize
1.34 KB

Yeah I was going to do that, was trying to keep it light. Here is one that keeps it together, keeps it in the same block.

markhalliwell’s picture

Status: Needs review » Needs work
+++ b/starterkits/less/less/overrides.less
@@ -108,18 +108,21 @@ body {
+    margin-top: 20px;

This should be outside the nested container (in the first one, like my example).

burnsjeremy’s picture

Not sure if this is what you were talking about but the original example you put compiles to having a .containter > .container and .container > .container-fluid and so on when I compiled it (modified of course but I don't think that sort of nesting is possible in less, maybe sass but I definitely couldn't see one that would work, please let me know if there is one). Anyway this should take care of all the styles needed although I'm not sure that the margin-top is needed for container-fluid b/c it should stretch across the screen and if it has a background color it shouldn't have a margin but the .container solution should. However I put them on both since your example had them on both.

burnsjeremy’s picture

Status: Needs work » Needs review

  • markcarver committed 9057c05 on 7.x-3.x authored by burnsjeremy
    Issue #2349387 by burnsjeremy, DieterAtWork: .container-fluid fix not in...

  • markcarver committed b3dc797 on 8.x-3.x authored by burnsjeremy
    Issue #2349387 by burnsjeremy, DieterAtWork: .container-fluid fix not in...
markhalliwell’s picture

Status: Needs review » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.