I'm trying to achieve the setup illustrated below with Bootstrap 3, but I can't quite find a way to do it, especially to keep it responsive. I looked at panels and tables, etc. but then tend to not have really worked out great so far.
I figured it out in the end. Just took a bit of messing around with rows within the panels.
<div class="panel-group" id="accordion" role="tablist">
<div class="panel panel-default container-fluid">
<div class="row panel-heading ">
<div class="col-sm-1 pull-left"></div>
<div class="col-sm-4 col-xs-12">Asset ID</div>
<div class="col-sm-2 col-xs-12">Status</div>
<div class="col-sm-2 col-xs-12">Asset Nodes</div>
<div class="col-sm-3 col-xs-12">Manage</div>
</div>
</div>
<div class="panel panel-default container-fluid">
<div class="panel-heading row" role="tab" id="headingOne">
<div class="col-xs-1">
<div data-toggle="collapse" class="handpointer glyphicon glyphicon-chevron-right"></div>
</div>
<div class="col-sm-4 col-xs-12">
xxx
</div>
<div class="col-sm-2 col-xs-12">Normal</div>
<div class="col-sm-2 col-xs-12">?</div>
<div class="col-sm-3 col-xs-12"><a class="btn btn-xs btn-default" href="#" role="button">button</a></div>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
dsfsdfd
</div>
</div>
</div>
</div>
http://www.bootply.com/NLxmcWu4SJ
Related
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!
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>
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>
I'm using bootstrap's collapsible functionality to have a list of stores with expandable information.
The problem is, when I open one of the collapsibles on the left hand column, it pushes some items into the next column. If I open a collapsible on the right hand column, everything slides properly, but it also adds a space on the left hand column. Please see the following plunker. Resize the screen until there are two rows of collapsibles and then click on one in each row to see the two behaviours:
http://plnkr.co/edit/2SLCQQJetyvM34mrCsHj?p=preview
This is the code I am using:
<div class="panel panel-default store-wrapper">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="{{removeSpaces(x.name, true)}}">
{{x.name}}
</a>
</h4>
</div>
<div id="{{removeSpaces(x.name, false)}}" class="panel-collapse collapse">
<div class="panel-body">
<div class="store-info col-xs-12 col-sm-12 col-md-6 col-lg-6" ng-repeat="item in x.stores">
<div class="col-xs-6 city">{{item.city}}:</div>
<div class="col-xs-6 phone">
<a ng-href="tel:{{item.number}}">{{item.number}}</a>
</div>
</div>
</div>
</div>
</div>
My desired result is to have the collapsible only slide the column that it lives in, and that items do not move onto the next row. Is this possible with Bootstrap's grid system?
Actually there's one simple solution to this if you want it.
Just put <div style="clear:both"></div> after every two col-xs-12 divs. And it will stop pushing the elements after it to the right.
You can see the example here.
Note: Remember, put clear div after every N collapsible div (it should be the same as the column number)
Try to use two separated columns for your panels. Something like this:
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="panel panel-default store-wrapper">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="#xname-1">
xname-1
</a>
</h4>
</div>
<div id="xname-1" class="panel-collapse collapse">
<div class="panel-body">
<div class="store-info col-xs-12 col-md-6" ng-repeat="item in x.stores">
<div class="col-xs-6 city">{{item.city}}:</div>
<div class="col-xs-6 phone">
<a ng-href="tel:{{item.number}}">{{item.number}}</a>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default store-wrapper">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="#xname-2">
xname-2
</a>
</h4>
</div>
<div id="xname-2" class="panel-collapse collapse">
<div class="panel-body">
<div class="store-info col-xs-12 col-md-6" ng-repeat="item in x.stores">
<div class="col-xs-6 city">{{item.city}}:</div>
<div class="col-xs-6 phone">
<a ng-href="tel:{{item.number}}">{{item.number}}</a>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default store-wrapper">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="#xname-3">
xname-3
</a>
</h4>
</div>
<div id="xname-3" class="panel-collapse collapse">
<div class="panel-body">
<div class="store-info col-xs-12 col-md-6" ng-repeat="item in x.stores">
<div class="col-xs-6 city">{{item.city}}:</div>
<div class="col-xs-6 phone">
<a ng-href="tel:{{item.number}}">{{item.number}}</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="panel panel-default store-wrapper">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="#xname-4">
xname-4
</a>
</h4>
</div>
<div id="xname-4" class="panel-collapse collapse">
<div class="panel-body">
<div class="store-info col-xs-12 col-md-6" ng-repeat="item in x.stores">
<div class="col-xs-6 city">{{item.city}}:</div>
<div class="col-xs-6 phone">
<a ng-href="tel:{{item.number}}">{{item.number}}</a>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default store-wrapper">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="#xname-5">
xname-5
</a>
</h4>
</div>
<div id="xname-5" class="panel-collapse collapse">
<div class="panel-body">
<div class="store-info col-xs-12 col-md-6" ng-repeat="item in x.stores">
<div class="col-xs-6 city">{{item.city}}:</div>
<div class="col-xs-6 phone">
<a ng-href="tel:{{item.number}}">{{item.number}}</a>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default store-wrapper">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="#xname-6">
xname-6
</a>
</h4>
</div>
<div id="xname-6" class="panel-collapse collapse">
<div class="panel-body">
<div class="store-info col-xs-12 col-md-6" ng-repeat="item in x.stores">
<div class="col-xs-6 city">{{item.city}}:</div>
<div class="col-xs-6 phone">
<a ng-href="tel:{{item.number}}">{{item.number}}</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
UPD. I've improved my Plinker. Now there are no superfluous repetitions in it. But I must warn you that I do not know Angular well.
http://plnkr.co/edit/Hj0NF9Vb5ydNIrXLOwPT?p=preview
<body ng-controller="MainCtrl">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6" ng-repeat="column in [0,1]">
<div class="panel-group col-xs-12 stores-container" ng-repeat="x in storeList" ng-if="$index >= ( $parent.$index * storeList.length / 2 ) && $index < ( ( $parent.$index + 1 ) * storeList.length / 2 )">
<div class="panel panel-default store-wrapper">
<div class="panel-heading" data-toggle="collapse" data-target="{{removeSpaces(x.name, true)}}">
<h4 class="panel-title">
<a>
{{x.name}}
</a>
</h4>
</div>
<div id="{{removeSpaces(x.name, false)}}" class="panel-collapse collapse">
<div class="panel-body">
<div class="store-info col-xs-12" ng-repeat="item in x.stores">
<div class="col-xs-6 city">{{item.city}}:</div>
<div class="col-xs-6 phone">
<a ng-href="tel:{{item.number}}">{{item.number}}</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
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!