By zambalared on

page.html.twig is creating eternal header wrappers, instead of full Page Wrapper;

and I am unable to accomplish a Full Page Wrapper.....

I have checked my DIV's, but Drupal is Adding some extra DIV in most illogical place each time... I am refurbishing a Bartik duplicate's page.html.twig

It is also proved - because I can accomplish a Primary Menu - to Footer full menu wrap; but not to include Header, Secondary Menu...

OK, full code is something like:

<div id="paging35">  
   <div> <div>
    <div id="secondary-head" class="secondary-head">
        {{ page.secondary_menu2 }}
    </div>

    <div id="what1" class="what1">
        {{ page.header2 }}
    </div>
         </div></div>
<div id="paging45">
    <div id="primary-head" class="primary-head">
        {{ page.primary_menu }}
    </div>

    <div id="above-content" class="above-content">
    {% if page.highlighted %}
    <div class="highlighted">
        <aside class="layout-container section clearfix" role="complementary">
          {{ page.highlighted }}
        </aside>
    </div>
    {% endif %}
    {% if page.featured_top %}
    <div class="featured-top">
        <aside class="featured-top__inner section layout-container" role="complementary">
          {{ page.featured_top }}
        </aside>
        </div>
    {% endif %}
    </div>
    
    <div id="main-wrapper" >
            {# Content #}
      {%
        set content_classes = [
          page.sidebar_first and page.sidebar_second ? 'main-wrap-both',
          page.sidebar_first and page.sidebar_second is empty ? 'main-wrap-side1',
          page.sidebar_second and page.sidebar_first is empty ? 'main-wrap-side2',
          page.sidebar_first is empty and page.sidebar_second is empty ? 'main-wrap-none'
        ]
      %}
         <div {{ content_attributes.addClass(content_classes) }}>
        {{ page.breadcrumb }}
          <section id="sec1" {{ content_attributes.addClass(content_classes) }}>
            {{ page.content }}
          </section>
          <section id="sec2" {{ content_attributes.addClass(content_classes) }}>
            {{ page.content2 }}
          </section>
          <section id="sec3" {{ content_attributes.addClass(content_classes) }}>
            {{ page.content3 }}
          </section>
          <section id="sec4" {{ content_attributes.addClass(content_classes) }}>
            {{ page.content4 }}
          </section>
          <section id="sec5" {{ content_attributes.addClass(content_classes) }}>
            {{ page.content5 }}
          </section>
        {% if page.sidebar_first %}
           <div id="sidebar-first" {{ content_attributes.addClass(content_classes) }}>
            <aside class="section" role="complementary">
              {{ page.sidebar_first }}
            </aside>
          </div>
        {% endif %}
        {% if page.sidebar_second %}
          <div id="sidebar-second" {{ content_attributes.addClass(content_classes) }}>
            <aside class="section" role="complementary">
              {{ page.sidebar_second }}
            </aside>
          </div>
        {% endif %}
      </div>
    
    {% if page.featured_bottom_first %}
      <div class="featured-bottom">
        <aside class="layout-container clearfix" role="complementary">
          {{ page.featured_bottom_first }}
        </aside>
      </div>
    {% endif %}
    {% if page.featured_bottom_second %}
      <div class="featured-bottom2">
        <aside class="layout-container clearfix" role="complementary">
          {{ page.featured_bottom_second }}
        </aside>
      </div>
    {% endif %}
    {% if page.featured_bottom_third %}
      <div class="featured-bottom3">
        <aside class="layout-container clearfix" role="complementary">
          {{ page.featured_bottom_third }}
        </aside>
      </div>
    {% endif %}
    </div>
    <footer id="site-footer" class="site-footer">
        <div class="footer-top-1">
        {% if page.footer_first %}
            {{ page.footer_first }}
        {% endif %}
           </div>
        <div class="footer-top-2">
        {% if page.footer_second %}
            {{ page.footer_second }}
        {% endif %}
           </div>
        <div class="footer-top-3">
        {% if page.footer_third %}
            {{ page.footer_third }}
        {% endif %}
           </div>
        <div class="footer-top-4">
        {% if page.footer_fourth %}
            {{ page.footer_fourth }}
        {% endif %}
           </div>
        <div class="footer-top-5">
        {% if page.footer_fifth %}
          <div class="site-footer__bottom">
            {{ page.footer_fifth }}
          </div>
        {% endif %}
       </div>
    </footer>
  </div>

- in this example "Paging45" Class - can wrap the page down to the footer;

But "Paging35" - can not wrap full page, it only wraps Header, and automatically sets /DIV closing tags after Header, when I inspect in Firebug;

I was trying many times to put additional divs and /div closing tags in header section, but it always creates anew children of Header, not closing some hodden divs so I could make full page wrap

⋅ Categories: Drupal 8.x

Comments

zambalared’s picture

zambalared commented

Update:

While Empty - it sometimes show that it can wrap all page; but when some blocks are placed - it wraps it in Header, leaving all the rest regions outside the full page assumed wrapper, which wraps again only Full Head sections, instead of all page...

zambalared’s picture

zambalared commented

New Example:

<div id="Page">

        {{ page.secondary_menu2 }}

        {{ page.header2 }}

        {{ page.primary_menu }}

        {{ page.primary_menu2 }}

        {{ page.primary_menu3 }}

          {{ page.highlighted }}


          {{ page.featured_top }}
   

        {{ page.breadcrumb }}

            {{ page.content }}

            {{ page.content2 }}

            {{ page.content3 }}

            {{ page.content4 }}

            {{ page.content5 }}

              {{ page.sidebar_first }}

              {{ page.sidebar_second }}

          {{ page.featured_bottom_first }}

          {{ page.featured_bottom_second }}

          {{ page.featured_bottom_third }}

            {{ page.footer_first }}

            {{ page.footer_second }}

            {{ page.footer_third }}

            {{ page.footer_fourth }}

            {{ page.footer_fifth }}
            </div>

1 Single DIV Wrapper = Page;

I would expect - 1 big DIV =Page = and all those regions as Children, NO?!

NO! - When I inspect - it shows:

<div Page> {page.secondary_menu2} </div>

<div>Region</div>

<div>Region 2</div>

etc.... HOW Can I make Full Page Wrapper?!

jaypan’s picture

jaypan
Location Victoria, BC
commented

I can't understand:

1) What your specific goal is

2) What is happening preventing you from achieving it

Your posts are providing way too much information, without concisely defining what the problem is, so it's hard to sort through it all.

Contact me to contract me for D7 -> D10/11 migrations.

zambalared’s picture

zambalared commented

I had this and other 2 long and very specific posts..... I can't understand what you can't understand.....

My goal is a page.html.twig structure like:

<div id="page-wrapper">

<div id="header"></div>

<div id="menu"></div>

<div id="content"></div>

<div id="footer"></div>

</div>

= this is impossible to do in page.html.twig .....

Why - because Drupal adds unexpected </div> in the middle of my structure.....

When I write the above code in page.html.twig - and go and inspect in Firebug my new structure -

- I find in Firebug a structure:

<div id="page-wrapper">

<div id="header"></div>

</div>

<div id="menu"></div>

<div id="content"></div>

<div id="footer"></div>

= I never can accomplish my goal of haveing a full page wrapper Div

= because Drupal is doing some crazy thing and closing Div in middle of my code...

Again.... when I see this, I go to page.html.twig - and try again to add a New Wrapper:

<div id="NEW-page-wrapper">

<div id="page-wrapper">

<div id="header"></div>

<div id="menu"></div>

<div id="content"></div>

<div id="footer"></div>

</div></div>

= then - I go to Firebug and see:

<div id="NEW-page-wrapper">

<div id="page-wrapper">

<div id="header"></div>

</div></div>

<div id="menu"></div>

<div id="content"></div>

<div id="footer"></div>

= Then, again.... and so - 8 hours in row and no result whatever....

zambalared’s picture

zambalared commented

Thos is crazy, that there can be no no wrapper set in page.html.twig

For now, I injected a new class in Body tag as a Page wrapper;

but there could be an option to create a full page wrapper in Twig template