Overlapping in Bootstrap Div Structure - css

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>

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.

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!

Related

How to order two Textarea and Buttons

I got this form:
<div class="container">
<div class="row">
<div class="col-md-5">
<div class="mx-2">
<small class="text-muted">Tablas contenidas en el archivo.</small>
</div>
<textarea rows="10"></textarea>
</div>
<div class="col-md-2">
<div class="col-md-4 my-1 mx-auto">
<button>btn</button>
</div>
<div class="col-md-4 my-1 mx-auto">
<button>btn</button>
</div>
<div class="col-md-4 my-1 mx-auto">
<button>btn</button>
</div>
<div class="col-md-4 my-1 mx-auto">
<button>btn</button>
</div>
</div>
<div class="col-md-5">
<div class="mx-2">
<small class="text-muted">Tablas seleccionadas.</small>
</div>
<textarea rows="10"></textarea>
</div>
</div>
</div>
JSFIDDLE: https://jsfiddle.net/qh8a5Lro/
I want to order Buttons in the middle of the two textarea's but the text on the textarea's is avoiding this. How I can fix it? And I wanna make it responsive.
Any ideas?
https://i.stack.imgur.com/4gBwM.png
https://i.stack.imgur.com/q3amm.png
Thanks for ur help!

Bootstrap 4 row not expanding to 100% width

I'm attempting to make a row that will contain 3 columns. One for the pagination count, one to filter a table, and another to hold a button.
Everything looks great in small, medium and large viewports, but when I maximize my window, there is a huge gap on the right above my table. See image below (bottom) for reference.
I'm not sure where I'm going wrong. I've tried every variation of flex-fill, w-100, etc. that I can think of to get it to expand to 100% width on xl viewports, but I can't figure it out.
Here's the relevant code for that section that sits above the table:
<div class="col">
<div class="container no-padding">
<div class="row mt-1">
<div class="col d-none d-md-block no-padding">
<p>Showing {{ $assets->firstItem() }}-{{ $assets->lastItem() }} of {{ $assets->total() }} total</p>
</div>
<div class="col-auto flex-fill flex-md-grow-0 no-padding mb-3">
<div class="container">
<div class="row">
<div class="col m-0 p-0 mr-2">
<form class="form-inline">
<div class="input-group">
<input style="font-size:80%;" class="form-control" type="text" name="filter" value="" placeholder="Filter results">
</div>
</form>
</div>
<div class="no-padding">
<a class="btn btn-dark btn-sm mr-1" href="{{ action('AddAssetController#index') }}" role="button"><i style="font-size:80%;" class="fas fa-plus"></i> New Asset</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Edit:
Here's the code from my template. Code above is part of #section('content') which gets output to and parsed by #yield('content') below.
<div class="row">
<div class="col-12 no-padding">
#include('layout.includes.header')
</div>
</div>
<div class="row h-100">
<div class="col-12">
<!-- Begin nav/content row -->
<div class="row h-100">
<div id="sidebar-wrapper" class="visible">
#include('layout.includes.nav')
</div>
<!-- Begin main column -->
<div class="col content" style="overflow-x:auto;">
<div class="row no-padding">
<div class="col d-none d-sm-block">
<h4>#yield('content-heading')</h4>
</div>
<div class="col flex-grow-1">
#include('layout.includes.searchform')
</div>
</div>
<div class="row no-padding inner-box shadow p-3 mb-5 bg-white rounded">
#yield('content') <!--this is where the original code appears-->
</div>
</div>
<!-- END main column-->
</div>
<!-- END nav/content row-->
</div>
</div>
not sure if this is what you want achieve but, i tried my best to make it look like what you desire, let me know if is really this: https://jsfiddle.net/leandrorr/t4rbfdv3/6/
html:
<div class="result-count p-4 border">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-lg-6">
Showing 1-20 of 32 total
</div>
<div class="col-lg-6">
<form action="" class="form-inline float-right">
<input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">
<button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>
</div>
</div>
</div>
</div>

Input type file breaks container causing horizontal scroll (bootstrap 4 beta)

I'm trying to create two 6 column divs. The second div has a form that should be 4 columns and centered. Everything works fine until I add the file input to the form. This causes it to break out of the container and adds a horizontal scroll bar at the bottom. I read that changing css for input{overflow:hidden;} would fix this but it did not. I've commented out the input file line so that it can be found easier. Can someone tell me how to keep the file input from breaking outside the box.
<div class="container careers-container">
<div class="row">
<div class="col-12 col-sm-6 mx-auto mt-4">
<h1 class='carbon cyan text-center'>Careers</h1>
<div class="divider background-cyan"></div>
<p class='salmon mt-4 font-24'>The Bridge is a premier pool hall providing an exceptional experience to it's clientele. We have the best tables, a great selection of drinks, good food options and lots of entertainment in a classy atmosphere. We are currently looking for people with service industry experience to serve at our Edmond location.</p>
<div class="container">
<div class="row">
<div class="col-12">
<h2 class='zaffre h5'>Currently Hiring</h2>
</div>
</div>
<div class="row no-gutters">
<div class="col-12 col-sm-4 d-none d-sm-block">
<img src="images/dart-board.jpg" class='img-fluid mb-3'></img>
</div>
<div class="col-12 col-sm-8">
<ul class='list-unstyled zaffre ml-3'>
<li>Bar Manager</li>
<li>Full time bartenders</li>
<li>Part time bartenders</li>
<li>Full or part time cooks</li>
<li>Part time cocktail waitress</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-12 mb-3">
<span class='zaffre h6 font-24'>Please submit your resume here and we will contact you</span>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-4 mx-auto">
<div class="background-cyan pt-3 pb-3 pl-1 pr-1">
<form>
<div class="form-group row">
<label for="inputName" class="col-sm-2 col-form-label sr-only">Name</label>
<div class="col-12">
<input type="text" class="form-control" id="inputName" placeholder="Full Name">
</div>
</div>
<div class="form-group row">
<label for="tel-input" class="col-sm-2 col-form-label sr-only">Telephone</label>
<div class="col-12">
<input class="form-control" type="tel" value="Phone Number" id="tel-input">
</div>
</div>
<div class="form-group row">
<label for="inputEmail" class="col-sm-2 col-form-label sr-only">EMAIL</label>
<div class="col-12">
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="form-group">
<label class='text-white' for="InputFile">Upload Resume</label>
<!-- <input type="file" class="form-control-file" id="InputFile"/> -->
</div>
<div class="text-center">
<button type="submit" id='submit-btn' class="btn btn-sm btn-secondary mt-5 info-button">Submit Form</button>
</div>
</form>
</div>
</div>
</div>
</div><!--End of container-->

How do I prevent group Items from collapsing when my screen is smaller or on mobile view, here I mean when it is really small

I'm trying to prevent my group of three icons from collapsing to a vertical state, currently they are align horizontally, the problem is when i adjust the screen to a smaller one, the icons will readjust as well when my screen reaches a certain size
<div class="">
<div class="list-item">
<section class="row">
<vehicleHeading [vehicleItem]="vehicleItem" class="col-md-10 col-sm-9 col-xs-8 nopadding"></vehicleHeading>
<div class="icon-group col-md-2 col-sm-3 col-xs-4">
<span class="pull-right">
<i [id]="mapId" (click)="showVehicleOnMap()" class="material-pin pointer nopaddingLeft"></i>
<span [id]="collapseId" (click)="showVehicleDetails()"><i class="material-list pointer"></i></span>
<collapsibleImage [id]="detailsId" (collapseEvent)="onToggleClick($event)"></collapsibleImage>
</span>
</div>
</section>
</div>
<div [collapse]="isCollapsed" class="panel-body topBorder">
<div class="row">
<div class="col-sm-6 col-md-7 col-lg-7">
<div class="form form-horizontal hidden">
<div class="form-group">
<div class="col-sm-2 col-md-2 col-lg-2"></div>
<div class="col-sm-5 col-md-5 col-lg-5"></div>
<div class="col-sm-5 col-md-5 col-lg-5">
<div class="pull-right">
<i class="viewMore">Details</i>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-5 col-lg-5 nopadding">
<div class="pull-right thumbnail">
<vehicleMap id="vehicleMapId" #mapDetails [VehicleDetails]="vehicleItem"></vehicleMap>
</div>
</div>
</div>
</div>
</div>

Removing space under a bootstrap well

Hi I am using twitter bootstrap on an web application for the first time and I would like to create on a page up to 6-8 well that occupy 6 columns on a large screen.I have managed to do just that I only have one problem.
If for example the height of the well on the right is higher then the well on the left , alot of space get's left unfilled.Here is what I mean:
In order to solve this problem I thought it was as simple of setting the margin-top and margin-bottom of the well container to 0 but it did not work.This is my html structure:
<section class="col-sm-6">
<div class="well overflow">
<div class="col-xs-8 reset-padding-left">
<h5><strong>About Me</strong></h5>
</div>
<div class="col-xs-4 text-right reset-padding-right">
<a class="btn btn-primary btn-edit"><i class="fa fa-pencil"></i> Edit</a>
</div>
<div class="col-xs-12 content-divider"></div>
<div class="col-xs-12 reset-padding-left">
<div class="col-xs-3 reset-padding-left">
<span>Birthday</span>
</div>
<div class="col-xs-9 reset-padding-right">
<p>15 November 1989</p>
</div>
</div>
<div class="col-xs-12 reset-padding-left">
<div class="col-xs-3 reset-padding-left">
<span>Gender</span>
</div>
<div class="col-xs-9 reset-padding-right">
<p>Male</p>
</div>
</div>
<div class="col-xs-12 reset-padding-left">
<div class="col-xs-3 reset-padding-left">
<span>Birth Place</span>
</div>
<div class="col-xs-9 reset-padding-right">
<p>Bacau, Romania</p>
</div>
</div>
</div>
</section>
<section class="col-sm-6">
<div class="well overflow">
<div class="col-xs-8 reset-padding-left">
<h5><strong>About Me</strong></h5>
</div>
<div class="col-xs-4 text-right reset-padding-right">
<a class="btn btn-primary btn-edit"><i class="fa fa-save"></i> Save</a>
</div>
<div class="col-xs-12 content-divider"></div>
<div class="col-xs-12 reset-padding-left reset-padding-right">
<div class="col-xs-3 reset-padding-left">
<span>Birthday</span>
</div>
<div class="col-xs-9 col-md-3 reset-padding-right add-margin-bottom">
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option selected="selected">4</option>
<option>5</option>
</select>
</div>
<div class="col-xs-9 col-md-3 col-xs-offset-3 col-sm-offset-3 col-md-offset-0 col-lg-offset-0 reset-padding-right add-margin-bottom">
<select class="form-control">
<option>Dec</option>
<option selected="selected">Nov</option>
<option>Jan</option>
<option>Feb</option>
<option>Mart</option>
</select>
</div>
<div class="col-xs-9 col-md-3 col-xs-offset-3 col-sm-offset-3 col-md-offset-0 col-lg-offset-0 reset-padding-right add-margin-bottom">
<select class="form-control">
<option>1987</option>
<option>1987</option>
<option>1987</option>
<option selected="selected">1986</option>
<option>1985</option>
</select>
</div>
</div>
<div class="col-xs-12 reset-padding-left reset-padding-right add-margin-bottom">
<div class="col-xs-3 reset-padding-left">
<span>Gender</span>
</div>
<div class="col-xs-9 reset-padding-right">
<select class="form-control">
<option>Male</option>
<option>Female</option>
</select>
</div>
</div>
<div class="col-xs-12 reset-padding-left reset-padding-right add-margin-bottom">
<div class="col-xs-3 reset-padding-left">
<span>Birth City</span>
</div>
<div class="col-xs-9 reset-padding-right">
<input type="text" class="form-control" />
</div>
</div>
<div class="col-xs-12 reset-padding-left reset-padding-right">
<div class="col-xs-3 reset-padding-left">
<span>Birth Country</span>
</div>
<div class="col-xs-9 reset-padding-right">
<input type="text" class="form-control" />
</div>
</div>
</div>
</section>
I only added the structure for the first two wells if I need to add more I'l add the reset.Is there any way to make the third well come imediatly under the first?
if you set to each even column .col-sm-6 float:right instead of float:left it seems to be working
.col-sm-6:nth-child(even) {
float:right;
}
Try to look at "inspect element" to know where the space is coming from. It's probably some padding or margin.
You could add an own class to the element with the padding/margin and give that class an other or a negative margin.

Resources