Overlapping in Bootstrap Div Structure

Question

I am following the 12 column rule, the following code is for right panel section having width of 8 column.remaining is 4 column panel on left side. It shows well on more than 1300 pixels resolution, but when shrink then the all controls in right panel overlapped. Any Advice ?

<div class="financeScreenRightBlock">
    <div class="form-group row ">
        <label class="col-md-3 control-label">Retail Price</label>
        <div class="col-md-3 ">
            <wj-input-number id="retailPrice" style="border-color: red" [placeholder]="'Retail Price'" [isRequired]="true" [(value)]="application.finance.assetCost.retailPrice" (lostFocus)="retailPrice_Focus();getAmtFin_CalculatePayment()">
            </wj-input-number>
        </div>
        <div class="col-md-3 control-label">
            <label>Trade In</label>
        </div>
        <div class="col-md-2 text-right">
            <wj-input-number id="retailPrice" [placeholder]="'DepositAmount'" [(value)]="application.finance.assetCost.tradeInDepositAmount" [isReadOnly]="true">
            </wj-input-number>
        </div>
        <div class="col-md-1 text-right">
            <button (click)="tradeInWin()" class="btn" style=" padding: 4px 8px;border-radius: 100px;">...</button>
        </div>
    </div>
    <div class="form-group row">
        <label class="col-md-3 control-label">Delivery Charges</label>
        <div class="col-md-3 ">
            <wj-input-number id="deliveryCharges" [placeholder]="'Delivery Charges'" [(value)]="application.finance.assetCost.deliveryAmount" (lostFocus)="getAmtFin_CalculatePayment()">
            </wj-input-number>
        </div>
        <label class="col-md-3 control-label">Deposit</label>
        <div class="col-md-3">
            <wj-input-number id="deposit" [placeholder]="'Deposit'" [(value)]="application.finance.assetCost.cashDepositAmount" (lostFocus)="totalDepositCalculate()">
            </wj-input-number>
        </div>
    </div>
    <div class="form-group row">
        <div class="col-md-3 control-label">
            <label>Accessories</label>
        </div>
        <div class="col-md-2 text-right">
            <wj-input-number id="accessories" [placeholder]="'Accessories'" [(value)]="application.finance.assetCost.totalAccessoryAmount" [isReadOnly]="true">
            </wj-input-number>
        </div>
        <div class="col-md-1 text-right">
            <button class="btn" (click)="accessoriesWin()" style=" padding: 4px 8px;border-radius: 100px;">...</button>
        </div>

        <div class="col-md-3 control-label">
            <label>Total Deposit</label>
        </div>
        <div class="col-md-3">
            <wj-input-number id="totalDeposit" [placeholder]="'Total Deposit'" [(value)]="application.finance.assetCost.totalDepositAmount" [isReadOnly]="true">
            </wj-input-number>
        </div>

    </div>
    <div class="form-group row">
        <div class="col-md-3 control-label custom-checkbox">
            <input type="checkbox" id="onroad" name="onroad" [(ngModel)]="application.finance.onRoadCostInclusionIndicator" (ngModelChange)="getAmtFin_CalculatePayment()" />
            <label for="onroad">On Roads</label>
        </div>
        <div class="col-md-2 text-right">
            <wj-input-number [placeholder]="'Interest Rate'" [isRequired]="true" [isReadOnly]="true" (lostFocus)="interestRate_Focus()" [value]="((application.finance.onRoadCostInclusionIndicator)?(application.finance.assetCost.registrationAmount*1+application.finance.financeContract.financeTax.stampDutyAmount*1):0)">
            </wj-input-number>

        </div>
        <div class="col-md-1 text-right">
            <button class="btn" (click)="onRoadWin()" style=" padding: 4px 8px;border-radius: 100px;">...</button>
        </div>

        <div class="col-md-3 control-label custom-checkbox">
            <input type="checkbox" id="feebox" name="feebox" [(ngModel)]="application.fee.showIndicator" (ngModelChange)="getFeeCheckbox()" />
            <label for="feebox">Fee</label>
        </div>
        <div class="col-md-2 text-right">
            <wj-input-number id="fee" [placeholder]="'fee'" [(value)]="application.fee.totalFeeAmount" [isReadOnly]="true">
            </wj-input-number>

        </div>
        <div class="col-md-1 text-right">
            <button (click)="feeWin()" class="btn" style=" padding: 4px 8px;border-radius: 100px;">...</button>
        </div>
    </div>

    <div class="form-group row">
        <div class="col-md-3 control-label custom-checkbox">
            <input type="checkbox" id="insuranceCheckbox" name="insuranceCheckbox" [(ngModel)]="application.finance.financeContract.financeInsurance.showIndicator" (ngModelChange)="getAmtFin_CalculatePayment()" />
            <label for="insuranceCheckbox">Insurance</label>
        </div>
        <div class="col-md-2 text-right">
            <wj-input-number [placeholder]="'Insurance'" [isRequired]="true" [isReadOnly]="true" (lostFocus)="interestRate_Focus()" [value]="((application.finance.financeContract.financeInsurance.showIndicator)?application.finance.financeContract.totalFinancePremiumAmount:0)">
            </wj-input-number>

        </div>
        <div class="col-md-1 text-right">
            <button (click)="insuranceWin_close();insuranceWin();" class="btn" style=" padding: 4px 8px;border-radius: 100px;">...
                        </button>
        </div>

        <div class="col-md-3 control-label custom-checkbox">

            <label for="feebox">Amount Financed</label>
        </div>
        <div class="col-md-3 text-right">
            <wj-input-number [placeholder]="'Amount Financed'" [isRequired]="true" [isReadOnly]="true" [(value)]="application.finance.financeContract.financedAmount">
            </wj-input-number>

        </div>

    </div>

</div>

Answer 1

This is happening because you are using col-md-x that is you are using medium sized columns. For complete responsiveness you should use col-md-x for medium sized screens, col-lg-x for large screen sizes and col-sm-x for smaller screens. For eg. if you want your page to be properly displayed in a tab you should use col-md-x and col-lg-x for laptop screens. Also, I think it is better to nest your divs properly. You are saying you have one 4 column panel and one 8 column panel. So, for example your code should look like this.

<div class="row">
    <div class="col-sm-4 col-md-4 col-lg-4">
        <!---Do your stuff here-->
    </div>
    <div class="col-sm-8 col-md-8 col-lg-8">
        <!--you can do further nesting here-->
        <!--example-->
        <div class="col-sm-4 col-md-4 col-lg-4">
            <p>some more code goes here</p>
        </div>
        <div class="col-sm-7 col-sm-offset-1 col-md-7 col-md-offset-1 col-lg-7 col-lg-offset-1">
            <p>above div shows how to give blank columns if you want your page to have some blank spaces between columns. use col-sm/md/lg-offset-x for this.</p>
        </div>
    </div>
</div>

I understand you are using angular-ui bootstrap and the above example is for twitter-bootstrap. Keeping that in mind, I thought a nesting div example will be helpful to you. Cheers!

Answer 2

You can add more css classes to your divs in order to achieve the desired look/behaviour. You can use chrome developer tools to see how your page looks on smaller devices. I usually creating a skeleton for my page for mobile devices first and then moving on to setup the layout for tablets etc.

example col-xs-2 col-md-4 col-lg-6 can be on the same class definition. hope that helps.