Can anyone share the sample code with ngbTooltip & ngbtypeadhead controls with [(ngmodel)] in Angular 4 & Typescript?
Here is my issue:
Tooltip on the label is working fine when only input does not have [(ngModel)]. As soon as I used [(ngModel)] in input text control, tooltip is showing only for the first label and other labels does not. In the below code, if I remove ngModel, all labels tooltips are shown as expected.
`<div class="col-lg-12 col-md-12 col-sm-12 ">
<div class="col-lg-12 col-md-12 col-sm-12 container accordion" id="accordion">
<div id="collapseDealSummary" class="col-lg-12 col-md-12 col-sm-12 card-block collapse show row">
<div class="col-lg-12 col-md-12 col-sm-12 card-body row">
<div class="col-lg-6 col-md-12 col-sm-12">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 form-group pull-left mx-0 px-1" placement="top" triggers="hover" ngbTooltip="Tooltip on for label 1">
<label>label 1<span>*</span></label>
<input type="text" class="form-control" id="txtid" name="txtid" [(ngModel)]="Label1Value" />
</div>
<div class="col-lg-6 col-md-6 col-sm-6 form-group pull-left mx-0 px-1" placement="top" triggers="hover" ngbTooltip="Tooltip on for label 2">
<label>label 2<span>*</span></label>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 form-group pull-left mx-0 px-1">
<label placement="top" triggers="hover" ngbTooltip="Tooltip on for label 3">label 3<span>*</span></label>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 form-group pull-left mx-0 px-1">
<label placement="top" triggers="hover" ngbTooltip="Tooltip on for label 4">label 4<span>*</span></label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>`
Any idea why tooltip or any ng-bootstrap controls are not working correctly along with [(ngModel)]? Thanks
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!
This question already has answers here:
Bootstrap 4.0 Grid System Layout not working
(1 answer)
bootstrap 3 to bootstrap 4 cols no longer horizontally aligned [duplicate]
(3 answers)
Closed 4 years ago.
I have two columns, col-4 and col-8 inside col-12 and row. But the two columns are not in the same row. I am not able to understand why this is happening even when I am not writing any CSS just the bootstrap grid.
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<div class="container-fluid">
<div class="row" id="first_row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<img src="img/nahid.jpg" class="img-fluid" alt="Responsive image" id="avater_main">
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">Home</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">About</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">Portfolio</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">Contact</div>
</div>
</div>
</div>
The additional parent container of 12 grid is not needed.
The div which is required to remove
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
Also, attached working demo with snippet
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row" id="first_row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<img src="img/nahid.jpg" class="img-fluid" alt="Responsive image" id="avater_main">
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">Home</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">About</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">Portfolio</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">Contact</div>
</div>
</div>
</div>
Every column needs a row parent in Bootstrap.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row" id="first_row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<!-- Row added here. -->
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<img src="//placehold.it/64x64" class="img-fluid" alt="Responsive image" id="avater_main">
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
<!-- And a row here. -->
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">Home</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">About</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">Portfolio</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">Contact</div>
</div>
</div>
</div>
</div>
</div>
</div>
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-->
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 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!