Menu icon Foundation
How to get row height to increase automatically?

Hello,

I'm a noob and I've got a problem with my 12 col grid. I have a row and in that, i have two divs (logo and search). On large screens the logo is 4 cols, the search is 8, and on small screens they are both 12 so stack.


The problem I have is that on small screens, the content of the search div is too big for the height of the row and so it overlaps the next div. 

How do I get the row to change height automatically to accomodate whatever is in the row, so that it never overlaps the next row in the grid?


I searched for answers, but couldn't find anything - I'm sure it is something really simple. Can anyone please help?


overflowrowgrid

Hello,

I'm a noob and I've got a problem with my 12 col grid. I have a row and in that, i have two divs (logo and search). On large screens the logo is 4 cols, the search is 8, and on small screens they are both 12 so stack.


The problem I have is that on small screens, the content of the search div is too big for the height of the row and so it overlaps the next div. 

How do I get the row to change height automatically to accomodate whatever is in the row, so that it never overlaps the next row in the grid?


I searched for answers, but couldn't find anything - I'm sure it is something really simple. Can anyone please help?


Rafi Benkual 3 months ago

 An example would really help is help you, can you add it to this codepen and share it back?

https://codepen.io/rafibomb/pen/brKNdg

Craig Wright 3 months ago

I tried that, but the page has images and snippets and things like that, so it doesn't display properly and show the problem. 

The code is:

   <body>
        <div class="page-container">
            <div class="title-bar" data-responsive-toggle="offCanvas" data-hide-for="medium">
                <button class="menu-icon" type="button" data-toggle="offCanvas">
                </button>
                <div class="title-bar-title">Menu</div>
            </div>
            <div class="off-canvas position-left" id="offCanvas" data-off-canvas="">
                <MadCap:snippetBlock src="../mobile-menu.flsnp" />
            </div>
            <div class="off-canvas-content" data-off-canvas-content="">
                <div class="row header" data-equalizer="">
                    <div class="small-12 medium-6 columns" data-equalizer-watch="">
                        <div class="logo-container">
                            <img src="../Images/alt-logo.svg" />
                        </div>
                    </div>
                    <div class="small-12 medium-6 columns" data-equalizer-watch="">
                        <div class="search-container">
                            <MadCap:searchBarProxy />
                        </div>
                    </div>
                </div>
                <div class="row doc-title">
                    <div class="small-12 columns">
                        <p>UltraSync ONE User Guide</p>
                    </div>
                </div>
			
				
				
                <div class="row content-container">
                    <div class="hide-for-small-only medium-4 columns">
                        <MadCap:snippetBlock src="../toc-menu.flsnp" />
                    </div>
                    <div class="small-12 medium-8 columns" id="topic-container">
                        <MadCap:bodyProxy />
                    </div>
                </div>

            </div>
        </div>
        <div class="footer">
            <p>footer here</p>
        </div>
        <script src="../js/vendor/jquery.js">
        </script>
        <script src="../js/vendor/what-input.js">
        </script>
        <script src="../js/vendor/foundation.js">
        </script>
        <script src="../js/app.js">
        </script>
    </body>
</html>

And the problem is that when the page is shown on mobiles, the row containing <Madcap:searchbar proxy>wraps below the header correctly. The trouble is, the content of the searchbar proxy is too big and so overlaps the row doc-title. I just want the height of the row header to expand to include whatever is inside the header row. So that the doc-title always comes after and isn't overlapped.