I have use the ngbDatepicker in the form as below
<ngb-panel>
<ng-template ngbPanelTitle>
<div class="row">
<ui-switch (change)="onChange($event,2)" [checked]="professionalLearningEvent.sportsPractive" size="small"></ui-switch>
<label class="accordianTitle" (click)="onAccordianTitleClick(2)">Will your sports practice be
affected ?</label>
</div>
</ng-template>
<ng-template ngbPanelContent>
<div class="container">
<div class="input-group">
<input class="form-control" [formControl]="control" ngbDatepicker [dayTemplate]="getDayTemplate()" #d="ngbDatepicker" [ngClass]="{ 'is-invalid': isFieldInvalid(control) }">
<div class="input-group-append">
<button class="btn btn-sm btn-outline-secondary" (click)="d.toggle()" type="button">
<span class="fa fa-calendar"></span>
</button>
</div>
</div>
</div>
</ng-template>
</ngb-panel>
The datepicker UI is not overflow. Try to find some solution but not able to.
add container='body' to input element.
Example:
<input type="text" autocomplete="off" name="dp" ngbDatepicker container="body">
Github Link
The issue was the overflow from the accordian card
Here is the solution just add the below css to override the bootstrap css
.accordion .card {
overflow: visible !important;
}
I want to make full with the button on right side.
I added btn-block on button element but it's dont working i don't know why.
Jsfiddle Here
<div class="fieldset">
<div class="field qty">
<label class="label" for="qty"><span>Qlty</span></label>
<div class="control control-qty-cart">
<span class="quantity-controls quantity-minus"></span>
<input type="number" name="qty" id="qty" maxlength="12" value="1" title="Aantal" class="qty-default input-text qty" data-validate="{"required-number":true,"validate-item-quantity":{"minAllowed":1}}">
</div>
</div>
<div class="actions">
<button type="submit" title="In Winkelwagen" class="action primary tocart btn-block" id="product-addtocart-button">
<span>In Winkelwagen</span>
</button>
</div>
</div>
Not sure where you took that bootstrap code from. I tried with this links and it worked. Also better to add it as an external library rather than to put the code there directly.
For bootstrap 3 (css): https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
For bootstrap 3 (js): https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
For bootstrap 4 get the cdn from this link: https://getbootstrap.com
Trying to implement an Add Button to the left of my header in MDL.
An Example can be seen on the getmdl.io site here https://getmdl.io/templates/text-only/index.html
I have the following header defined.
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">Task Manager</span>
<div class="mdl-layout-spacer"></div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
<label class="mdl-button mdl-js-button mdl-button--icon" for="search-expandable">
<i class="material-icons">search</i>
</label>
<div class="mdl-textfield__expandable-holder">
<input class="mdl-textfield__input" type="text" id="search-expandable" />
<label class="mdl-textfield__label" for="search-expandable">Search text</label>
</div>
</div>
</div>
<div class="mdl-layout-spacer"></div>
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored mdl-shadow--4dp mdl-color--accent mdl-button--mini-fab mdl-badge--overlap" id="add">
<i class="material-icons" role="presentation">add</i>
<span class="visuallyhidden">Add</span>
</button>
</header>
There is no need for tabs in this project - but cannot seem to get it to drop part below the header as in the example linked.
Add the following CSS to the stylesheet linked to the page
.mdl-layout__header
{
position: relative;
overflow:visible;
}
.add-button{
position: absolute;
right: 10px;
bottom: -25px;
}
Then add the following class to the button
add-button
I've added both feedback and a button addon to an input field in my form. My HTML is the following:
<div class="form-group has-feedback">
<label class="col-sm-4 control-label" for="authorization_id">AutorisationsID</label>
<div class="col-sm-4">
<div class="input-group">
<input name="authorization_id" class="form-control" type="text">
<span class="glyphicon form-control-feedback"></span>
<span class="input-group-btn">
<a href="#" id="authid-info-btn" tabindex="0" class="btn btn-info" role="button" data-position="auto right" data-container="body" data-toggle="popover" data-trigger="click" data-content="And here's some amazing content. It's very engaging. Right?">
<span class="glyphicon glyphicon-question-sign">
</a>
</span>
</div>
</div>
<div class="col-sm-4 control-label control-label-left-align"></div>
</div>
Here's what it looks like:
And here's what I want it to look like
The feedback is positioned wrong when the button addon is present. Am I missing something or does Bootstrap not support this design?
I slapped your content into a fiddle here: http://jsfiddle.net/DTcHh/2459/
But I don't know how to get the X to come up. Is there any way you can emulate that in the fiddle?
It will be something like
.redX {
position: relative;
left: -10px;
}
Or possibly a small adjustment to margin or padding. It could be a lot of things but likely a simple-ish fix in css. A live example would be best, really.
I want the login and register button in right,and Search button in Center, I searched alot but didn't get any solution.
And also how can I align text area in a proper position.
Here is my html code:
<body ng-app="starter">
<ion-pane style = "background-color:#4992E2;">
<ion-header-bar class="bar bar-subheader" style = " margin-top: -35px; background-color:#F9F9F9;">
<h1 class="title" style = "color:black;">NetHealth Appointment Booking</h1>
</ion-header-bar>
<ion-content >
<div class = "row center">
<div class="col">
<button class="button button-small button-light" >
Login!
</button>
<button class="button button-small button-light">
Register Here!
</button>
</div>
</div>
<div class="item-input-inset">
<h4>Date</h4>
<label class="item-input-wrapper">
<input type="text" placeholder="Text Area">
</label>
</div>
<div class="item-input-inset">
<h4>Suburb</h4>
<label class="item-input-wrapper">
<input type="text" placeholder="Text Area">
</label>
</div>
<div class="item-input-inset">
<h4>Clinic</h4>
<label class="item-input-wrapper">
<input type="text" placeholder="Text Area">
</label>
</div>
<button class=" center button button-small button-light">
Search
</button>
</ion-content>
</ion-pane>
</body>
I know in the bootstrap, but I am new to ionic, please tell me how can I do this.
You should put the button inside a div, and in the div you should be able to use the classes: text-left, text-center and text-right.
for example:
<div class="row">
<div class="col text-center">
<button class="button button-small button-light">Search</button>
</div>
</div>
And about the "textarea" position:
<div class="list">
<label class="item item-input">
<span class="input-label">Date</span>
<input type="text" placeholder="Text Area">
</label>
Demo using your code:
http://codepen.io/douglask/pen/zxXvYY
Css is going to work in same manner i assume.
You can center the content with something like this :
.center{
text-align:center;
}
Update
To adjust the width in proper manner, modify your DOM as below :
<div class="item-input-inset">
<label class="item-input-wrapper"> Date
<input type="text" placeholder="Text Area" />
</label>
</div>
<div class="item-input-inset">
<label class="item-input-wrapper"> Suburb
<input type="text" placeholder="Text Area" />
</label>
</div>
CSS
label {
display:inline-block;
border:1px solid red;
width:100%;
font-weight:bold;
}
input{
float:right; /* shift to right for alignment*/
width:80% /* set a width, you can use max-width to limit this as well*/
}
Demo
final update
If you don't plan to modify existing HTML (one in your question originally), below css would make me your best friend!! :)
html, body, .con {
height:100%;
margin:0;
padding:0;
}
.item-input-inset {
display:inline-block;
width:100%;
font-weight:bold;
}
.item-input-inset > h4 {
float:left;
margin-top:0;/* important alignment */
width:15%;
}
.item-input-wrapper {
display:block;
float:right;
width:85%;
}
input {
width:100%;
}
Demo
To use center alignment in ionic app code itself, you can use the following code:
<ion-row center>
<ion-col text-center>
<button ion-button>Search</button>
</ion-col>
</ion-row>
To use right alignment in ionic app code itself, you can use the following code:
<ion-row right>
<ion-col text-right>
<button ion-button>Search</button>
</ion-col>
</ion-row>
Ultimately, we are trying to get to this.
<div style="display: flex; justify-content: center;">
<button ion-button>Login</button>
</div>
And if we want to align a checkbox to the right, we can use item-end.
<ion-checkbox checked="true" item-end></ion-checkbox>
Another Ionic way. Using this ion-buttons tag, and the right keyword puts all the buttons in this group to the right. I made some custom toggle buttons that i wanted on one line, but the group to be right justified.
<ion-buttons right>
<button ....>1</button>
<button ....>2</button>
<button ....>3</button>
</ion-buttons>
I Found the esiest soltuion just wrap the button with div and put text-center align-items-center in it like this :
<div text-center align-items-center>
<buttonion-button block class="button-design " text-center>Sign In </button>
</div>
center tag aligns the buttons within it as expected:
<ion-footer>
<ion-toolbar>
<center>
<button royal>
Contacts
<ion-icon name="contact"></ion-icon>
</button>
<button secondary>
Receive
<ion-icon name="arrow-round-back"></ion-icon>
</button>
<button danger>
Wallet
<ion-icon name="home"></ion-icon>
</button>
<button secondary>
Send
<ion-icon name="send"></ion-icon>
</button>
<button danger>
Transactions
<ion-icon name="archive"></ion-icon>
</button>
<button danger>
About
<ion-icon name="information-circle"></ion-icon>
</button>
</center>
</ion-toolbar>
</ion-footer>