0

I am struggling with two tables overlapping when I resize the page. I have bootstrap loaded in and it is not being as responsive as I would like it to be. Any suggestions? Picture 1 is the browser page resized and picture 2 is the browser window maximized. My hunch is that it is the #first display:inline-block; but I can't get them to be side by side if I remove this. I have tried the classic large container div with two col-md-6 divs inside but they do not stack side by side nicely.

<apex:page id="viewAllCaseCommentsActivities" controller="viewAllCaseCommentsActivitiesController" tabStyle="Case" showHeader="false" sideBar="false">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<apex:stylesheet value="{!$Resource.bootstrapbootstrap2}"/>
<apex:stylesheet value="{!$Resource.bootstrapbootstrapmin}"/>
<apex:stylesheet value="{!$Resource.bootstrapbootstraptheme}"/>
<apex:stylesheet value="{!$Resource.bootstrapbootstrapthememin}"/>

<style>
thead{background-color:#f2f3f3;border-bottom: 2px solid #ccc;}

#casenumber{background-color:#e5f3f8;border-bottom: 2px solid #cbe8f1;}

#first {
display:inline-block;
width:45%;
height:100%;
padding-top: 0%;
}
#second {
display:inline-block;
width:45%;
height:100%;
padding-top: 0%;
}
#third {
height:100%;
margin-right:8%;
padding-top: 0%;
}

h6 {
margin: 5px;
font-weight: normal;
position: relative;
text-shadow: 0 -1px rgba(0,0,0,0.6);
font-size: 18px;
line-height: 40px;
background: #355681;
background: rgba(53,86,129, 0.8);
border: 1px solid #fff;
padding: 5px 15px;
color: white;
border-radius: 0 10px 0 10px;
box-shadow: inset 0 0 5px rgba(53,86,129, 0.5);
font-family: 'Muli', sans-serif;
}

</style>
<div class="pbHeader">
    <table border="0" cellpadding="0" cellspacing="0">
        <tbody >
        <tr class="demo-2">
            <h6 id="activityHistory">View Activity History: {!strAccountName}</h6>
        </tr>
        </tbody>
    </table>
</div>
<div class="col-lg-1" id="topRow">
    <div class="bootstrap col-me-6" id="first">
        <table class="table table-bordered table-hover" id="caseDiv1">
            <tbody>
            <div class="taskAndCommentHeader">TASK HISTORY </div>
            <thead>
            <tr>
                <th>Subject</th>
                <th>Comments</th>
                <th>Owner</th>
                <th>Case/Merchant Number</th>
                <th>Date Activity Logged</th>
            </tr>
            </thead>
            <apex:repeat value="{!keys}" var="key">
                <th colspan="5" id="casenumber">{!key}</th>
                <apex:repeat value="{!dateHeader[key]}" var="td">
                    <tr>
                        <td>{!td.taskData.Subject}</td>
                        <td>{!td.taskData.Comments__c}</td>
                        <td>{!td.taskData.Owner.Name}</td>
                        <td>{!td.caseNumber.CaseNumber} -{!td.caseNumber.Merchant_Number__c}</td>
                        <td>
                            <apex:outputText value="{0,time, hh:mm a}">
                                <apex:param value="{!td.taskData.Date_Activity_Logged__c -7/24}" />
                            </apex:outputText>
                        </td>
                    </tr>
                </apex:repeat>
            </apex:repeat>

            </tbody>
        </table>
    </div>


    <div class="bootstrap col-md-6" id="second">
        <table class="table table-bordered table-hover" id="caseDiv2">
            <tbody>
            <div class="taskAndCommentHeader">CASE COMMENT HISTORY </div>
            <thead>
            <tr>
                <th scope="row">Comment</th>
                <th scope="row">Created By </th>
                <th scope="row">Case/Merchant Number</th>
                <th scope="row">Created Time</th>
            </tr>
            </thead>
            <apex:repeat value="{!keysComment}" var="key">
                <th colspan="5" id="casenumber">{!key}</th>
                <apex:repeat value="{!dateHeaderComments[key]}" var="td">
                    <tr>
                        <!--<td>{!td.commentData.Subject}</td>-->
                        <td>{!td.commentData.CommentBody}</td>
                        <td>{!td.commentData.CreatedBy.Name}</td>
                        <td>{!td.caseNumber.CaseNumber} - {!td.caseNumber.Merchant_Number__c}</td>
                        <td>
                            <apex:outputText value="{0,time, hh:mm a}">
                                <apex:param value="{!td.commentData.CreatedDate -7/24}" />
                            </apex:outputText>
                        </td>
                    </tr>
                </apex:repeat>
            </apex:repeat>

            </tbody>
        </table>
    </div>
</div>

Overlapping

Not Overlapping

UPDATE:

My page isn't understanding the grid system at all. When I put in the most simple side by side tables I still get no response. I have removed the standard style sheet to avoid clashing and the static resources are all loaded into SF. This doesn't even work:

<div class="bootstrap container-fluid">
    <div class="bootstrap row">
        <div class="bootstrap col-lg-6">
            Container Left
        </div>
        <div class="bootstrap col-lg-6">
            Container Right
        </div>
    </div>
</div>
1
  • 1
    it would be good to include the library versions you are using as well
    – glls
    Aug 7, 2017 at 23:25

2 Answers 2

1

I found a solution. I moved my two tables inside of one div and took the outer divs away from them. I then added in my own CSS for the bootstrap styling. I had to overwrite the bootstrap and the SF standard styling so I did inline styling for the tables. See below:

<apex:page id="testTableDynamic" controller="viewAllCaseCommentsActivitiesController" tabStyle="Case" showHeader="false" sideBar="false">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <apex:stylesheet value="{!$Resource.bootstrapbootstrap2}"/>
    <apex:stylesheet value="{!$Resource.bootstrapbootstrapmin}"/>
    <apex:stylesheet value="{!$Resource.bootstrapbootstraptheme}"/>
    <apex:stylesheet value="{!$Resource.bootstrapbootstrapthememin}"/>
    <style>

    thead{background-color:#f2f3f3;border-bottom: 2px solid #ccc;}

    #casenumber{background-color:#e5f3f8;border-bottom: 2px solid #cbe8f1;}

    #third {
        margin-right:8%;
        padding-top: 0%;
    }

    .taskAndCommentHeader{
        font-weight: bold;
    }

    .bPageBlock .pbHeader {
        border-bottom: 1px solid #eaeaea;
    }

    #activityHistory{
        margin: 5px;
        padding:5px;
        font-weight:bold;
    }

    body {
        margin: 10px;
        padding: 10px;
    }

    h6 {
        margin: 5px;
        font-weight: normal;
        position: relative;
        text-shadow: 0 -1px rgba(0,0,0,0.6);
        font-size: 18px;
        line-height: 40px;
        background: #355681;
        background: rgba(53,86,129, 0.8);
        border: 1px solid #fff;
        padding: 5px 15px;
        color: white;
        border-radius: 0 10px 0 10px;
        box-shadow: inset 0 0 5px rgba(53,86,129, 0.5);
        font-family: 'Muli', sans-serif;
    }

    .bootstrap .col-md-6 {
        width: 50%;
    }
    @media (min-width: 992px) {
        .bootstrap .col-md-6, .bootstrap .container-fluid .col-lg-1  {
            float: left;
        }
    }
    .bootstrap .col-md-6, .bootstrap .container-fluid .col-lg-1 {
        width: 50%;
    }
</style>

    <div class="pbHeader">
        <table border="0" cellpadding="0" cellspacing="0">
            <tbody >
            <tr class="demo-2">
                <h6 id="activityHistory">View Activity History: {!strAccountName}</h6>
            </tr>
            </tbody>
        </table>
    </div>

    <div class="bootstrap container-fluid col-lg-1">
        <table class="bootstrap col-md-6 table table-bordered table-hover" id="first" style="width: 45%; margin-right: 4px;">
            <tbody>
            <thead>
            <th>TASK HISTORY</th>
            <tr>
                <th>Subject</th>
            </tr>
            </thead>
            <apex:repeat value="{!keys}" var="key">
                <th colspan="5" id="casenumber">{!key}</th>
                <apex:repeat value="{!dateHeader[key]}" var="td">
                    <tr>
                        <td>{!td.taskData.Subject}</td>
                    </tr>
                </apex:repeat>
            </apex:repeat>

            </tbody>
        </table>

        <table class="bootstrap col-md-6 table table-bordered table-hover" id="second" style="width: 45%; margin-left: 4px;">
            <tbody>
            <thead>
            <th>CASE COMMENT HISTORY</th>
            <tr>
                <th scope="row">Comment</th>
            </tr>
            </thead>
            <apex:repeat value="{!keysComment}" var="key">
                <th colspan="5" id="casenumber">{!key}</th>
                <apex:repeat value="{!dateHeaderComments[key]}" var="td">
                    <tr>
                        <td>{!td.commentData.CommentBody}</td>
                    </tr>
                </apex:repeat>
            </apex:repeat>

            </tbody>
        </table>
    </div>

    <div class="bootstrap container-fluid col-lg-1" id="third">
        <table class="table table-bordered table-hover" id="caseDiv3">
            <tbody>
            <thead>
            <th>ACCOUNTING INSTRUCTIONS HISTORY </th>
            <tr>
                <th scope="row">Type</th>
            </tr>
            </thead>
            <apex:repeat value="{!orderedAccountingInstructions}" var="caseNum">
                <th colspan="8" id="casenumber">{!caseNum.CaseNumber} - {!caseNum.Merchant_Number__c}</th>
                <apex:repeat value="{!caseNum.Accounting_Instructions__r}" var="num">
                    <tr>
                        <td>{!num.Type__c}</td>
                    </tr>
                </apex:repeat>
            </apex:repeat>
            </tbody>
        </table>
    </div>
</apex:page>
1
  • Nice You found answer.
    – NITHESH K
    Aug 9, 2017 at 5:04
0

Check the First table class name for col-md-6 you have spelled wrongly me instead of md. If you want have a good responsive page then its better to include with col-(xs, sm, md, lg)-*

<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" id="first"> </div>

<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" id="second"> </div>

Also its a good practice to keep all your col-*-* inside container-fluid

<div class="container-fluid">
      <div class="row"> 
        <!-- Your table code-->
      </div>
</div>
3
  • Thanks Nitheshk. I broke it down to the most simple side by side tables and they aren't even working- see example above. I removed the SF standard stylesheet but the problem still persists. It's like the page is choosing to not understand the grid system but understands other bootstrap commands. My static resource is loaded into SF and called in the apex:page header...
    – Olivia
    Aug 8, 2017 at 14:28
  • I am going into the bootstrap file and taking a look at the classes. Stay tuned!
    – Olivia
    Aug 8, 2017 at 15:07
  • try to enable the <apex:page docType="html-5.0" /> and check . I have used bootstrap with VisualPage i am not faced any kind of issue like this. May be your css properties conflict with bootstrap.
    – NITHESH K
    Aug 9, 2017 at 5:03

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .