1

I am using and referencing to flexboxgrid css. How can I have equal height columns? My side bar id=dtside has a background color and I want it to have equal height as id=dtmain. Before flexboxgrid, i was using display:table and display: table-cell which works well but we switched to flexbox. I attempted to combine both the the result was not what I wanted. I've also found some online solutions indicating I just need to add display:flex to the parent div and tried adding it in both class=box and class=row but didn't quite work. 

<div class="box box-container" id="dtmaincontents">
            <div class="row top-xs">
                <div class="col-xs-12 col-md-8" id="dtmain">
                    <div class="col-main" data-name="Main Page Content">
                        <!--CS: Start Page Field: Page Content Snippet-->
                        <!--SPM:<%@Register Tagprefix="PageFieldRichHtmlField" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
                        <!--MS:<PageFieldRichHtmlField:RichHtmlField FieldName="f55c4d88-1f2e-4ad9-aaa8-819af4ee7ee8" runat="server">-->
                            <!--PS: Start of READ-ONLY PREVIEW (do not modify)--><!--PE: End of READ-ONLY PREVIEW-->
                        <!--ME:</PageFieldRichHtmlField:RichHtmlField>-->
                        <!--CE: End Page Field: Page Content Snippet-->
                    </div>
                </div>
                <div class="col-xs-12 col-md-4" id="dtside">
                    <div class="col-side" data-name="Side Page Content">
                        <!--CS: Start Page Field: Side Content Snippet-->
                        <!--SPM:<%@Register Tagprefix="PageFieldRichHtmlField" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
                        <!--MS:<PageFieldRichHtmlField:RichHtmlField FieldName="995e9a86-eb77-4305-9cbe-6ea7c7e21c43" runat="server">-->
                            <!--PS: Start of READ-ONLY PREVIEW (do not modify)--><!--PE: End of READ-ONLY PREVIEW-->
                        <!--ME:</PageFieldRichHtmlField:RichHtmlField>-->
                        <!--CE: End Page Field: Side Content Snippet-->
                    </div>
                </div>
            </div>
        </div>

I tried adding display: flex in #dtmaincontents which works but if dtmain contents are not using the full width, the side bar is shifted to the left.

enter image description here

Tamras Merin
  • 159
  • 1
  • 8
  • 1
    It looks like you are also using bootstrap? If so... why not just use jquery matchHeight. It's super easy and you only put a data tag on your columns and it does all the work for you. https://github.com/liabru/jquery-match-height You would put something like, data-mh="same" on each column. – John David Dec 21 '18 at 19:08

0 Answers0