The requirement from UX team is to add calendar icon to ion-datetime in ionic 5. Please help me to add calendar icon and it has to align to the right side.
<ion-item>
<ion-label position="floating">MM/DD/YYYY</ion-label>
<ion-datetime displayFormat="MM/DD/YYYY" min="1994-03-14" max="2012-12-09"></ion-datetime>
</ion-item>
You can do this:
<section>
<ion-datetime placeholder="Select a date" displayFormat="MM/DD/YYYY" min="1994-03-14" max="2012-12-09" value="2002-09-23T15:03:46.789"></ion-datetime>
<ion-icon name="calendar"></ion-icon>
</section>
section {
border: 1px solid gray;
display: flex;
align-items: center ;
justify-content: space-between;
padding: 0 1rem;
max-width: 300px;
width: 100%;
}
ion-datetime {
width: 100%;
}
https://stackblitz.com/edit/ionic-bfvxgh
what you can do this way...
<ion-item>
<ion-row>
<ion-col>
<ion-label position="floating">MM/DD/YYYY</ion-label>
<ion-datetime displayFormat="MM/DD/YYYY" min="1994-03-14" max="2012-12-09"></ion-datetime>
</ion-col>
<ion-col>
<ion-icon style="padding-top: 10pt; padding-left: 10pt;" name="calendar-outline"></ion-icon>
</ion-col>
</ion-row>
</ion-item>
and in the scss ...
ion-icon {
width: 30px;
height: 30px;
}
Related
I am trying to build multi level mega menu with Angular Material - mat-menu. Now the problem here with me is I wanted to have mega menu like in bootstrap like this but I ended up building this in Angular material. I have changed CSS for changing the width like this:
.cdk-overlay-connected-position-bounding-box {
position: absolute;
z-index: 1000;
display: flex;
flex-direction: column;
min-width: 1px;
min-height: 1px;
}
.cdk-overlay-pane {
position: absolute;
pointer-events: auto;
box-sizing: border-box;
z-index: 1000;
display: flex;
max-width: 100%;
max-height: 100%;
}
How can I design mega menu in Angular Material like the image given below?
I am using Angular 7.3.1 (latest version).
Yes it is true that Material Design does not use this pattern. MatMenu is for Material Design menus which are overlay or 'popup' type. The mega menu is nothing more than a toolbar with a roll down panel as suggested by G.Tranter. But the mega menu can be achieved by writing custom css. I dont know is this a correct way to do or not. I have mat-menu like this is .html file
<button mat-button [matMenuTriggerFor]="menu" class="my-full-width-menu">Menu</button>
<mat-menu #menu="matMenu">
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
<button mat-menu-item>Item 3</button>
<button mat-menu-item>Item 4</button>
</mat-menu>
And added the following css for full-width of submenu in style.css
.mat-menu-panel {
min-width: 90vw !important;
max-width: 95vw !important;
margin-left: -8px;
margin-top: 24px;
}
Now the concern is of responsive design. For that purpose I need to write #media Query in the component css file like this
#media (min-width: 576px) {
button.mat-menu-item {
width: 100%;
float: left;
}
}
/* Medium devices (tablets, 768px and up)*/
#media (min-width: 768px) {
button.mat-menu-item {
width: 50%;
float: left;
}
}
/* Large devices (desktops, 992px and up)*/
#media (min-width: 992px) {
button.mat-menu-item {
width: 33.333%;
float: left;
}
}
/* very large devices (large desktops, 1200px and up)*/
#media (min-width: 1200px) {
button.mat-menu-item {
width: 25%;
float: left;
}
}
/* Extra large devices (large desktops, 1550px and up)*/
#media (min-width: 1550px) {
button.mat-menu-item {
width: 25%;
float: left;
}
}
Here is the StackBlitz demo of mega menu in mat-menu. This works for my requirement.
I had the same Question and finally I had to handle it by my self and I dont know its the correct way or not ; but its worked
<button mat-raised-button [matMenuTriggerFor]="profileManagementMenu" class="option-button">
{{'ProfileManagement'|translate}}
</button>
<mat-menu #profileManagementMenu="matMenu" class="mega-menu" xPosition="before">
<div fxLayout="row" fxLayoutAlign="start" class="p-1">
<div fxLayout="column" fxLayoutAlign="start" class="p-1 config">
<button mat-menu-item>
{{'Col11'|translate}}
</button>
<button mat-menu-item>
{{'Col12'|translate}}
</button>
</div>
<span class="border" style="opacity: .3"></span>
<div fxLayout="column" fxLayoutAlign="start" class="p-1 config">
<h7 fxLayoutAlign="center">header2</h7>
<button mat-menu-item>
{{'Col21'|translate}}
</button>
<button mat-menu-item>
{{'Col22'|translate}}
</button>
<button mat-menu-item>
{{'Col23'|translate}}
</button>
<button mat-menu-item>
{{'Col24'|translate}}
</button>
<button mat-menu-item>
{{'Col25'|translate}}
</button>
<button mat-menu-item>
{{'Col26'|translate}}
</button>
</div>
</div>
</mat-menu>
and its the scss:
.mega-menu .mat-menu-content {
min-width: 112px;
overflow: auto;
-webkit-overflow-scrolling: touch;
max-height: calc(100vh - 48px);
outline: 0;
background: none;
color: white !important;
:hover {
background: none;
color: white;
}
}
.mat-menu-item:hover {
background: #338ACF !important;
color: white;
}
.mat-menu-content {
min-width: 112px;
overflow: auto;
-webkit-overflow-scrolling: touch;
max-height: calc(100vh - 48px);
outline: 0;
opacity: .95;
background: #2688d6b8;
color: white !important;
}
I'm having some problem with display: flex in both Safari and iOS Safari.
Safari has alignment issues and iOS Safari has both alignment and size issues. Is this expected or a valid bug in Safari?
Edit: Also, height in percentage on the child SVG inside the Button does not work either. This works in all other browsers.
I mane another more advanced example with SVG elements, and I added an anchor to compare to the button. More advanced example here
My simple example
HTML:
<div class="flex">
<div class="col col-1">
<button class="sub-col">
<span class="span"></span>
</button>
<div class="sub-col">2</div>
<div class="sub-col">3</div>
</div>
<div class="col col-2"></div>
<div class="col col-3"></div>
</div>
CSS:
.flex {
display: flex;
flex-direction: column;
height: 80vh;
background: #666666;
position: fixed;
width: 100%;
}
.col {
display: inherit;
flex: 1 1 auto;
background: #ccffcc;
}
.col-1 {
flex: 0 0 10vh;
background: #ffcccc;
}
.col-3 {
flex: 0 0 10vh;
background: #ccccff;
}
.sub-col {
display: inherit;
flex: 0 0 25%;
justify-content: center;
align-items: center;
}
.span {
width: 10px;
height: 10px;
background: #ffaaaa;
}
Screenshots:
This is what it should look like, and does in Chrome, FF and Edge (Haven't tested IE)
This is what it looks like in Safari
And this is iOS Safari
You can't set display flex to button and fieldset elements. chk below link. Wrap your element with div or span tags
https://github.com/philipwalton/flexbugs#9-some-html-elements-cant-be-flex-containers
The button element, and a couple other elements for that matter, cannot be flex containers in some browsers. Safari is one of them.
You can try a simple solution though, if you like. The idea is, you wrap your .span inside .span-wrapper. Then you let .span-wrapper be your flex container.
Like that:
HTML:
<div class="flex">
<div class="col col-1">
<button class="sub-col">
<span class="span-wrapper">
<span class="span"></span>
</span>
</button>
<div class="sub-col">2</div>
<div class="sub-col">3</div>
</div>
<div class="col col-2"></div>
<div class="col col-3"></div>
</div>
CSS:
.flex {
display: flex;
flex-direction: column;
height: 80vh;
background: #666666;
position: fixed;
width: 100%;
}
.col {
display: inherit;
flex: 1 1 auto;
background: #ccffcc;
}
.col-1 {
flex: 0 0 10vh;
background: #ffcccc;
}
.col-3 {
flex: 0 0 10vh;
background: #ccccff;
}
.sub-col {
display: inherit;
flex: 0 0 25%;
justify-content: center;
align-items: center;
}
.span {
width: 10px;
height: 10px;
background: #ffaaaa;
}
.span-wrapper {
display: flex;
flex-basis: 100%;
justify-content: center;
align-items: center;
}
So when I am looking at my app on android phones and in the browser, the header (and sub header) looks like the following
When I am running on iOS emulator, or deploying to iOS phone, it looks like the following:
The markup looks like the following
<ion-header-bar class="bar item-input-inset search">
<div class="buttons buttons-left header-item">
<span class="left-buttons">
<button class="button button-icon button-clear ion-navicon" ng-click="showMenu()">
</button>
</span>
</div>
<label class="item-input-wrapper search">
<input placeholder="Search..." ng-model="model.searchTerm" ng-change="updateSearchTerm(model.searchTerm,model.quickSearchType)" type="text">
</label>
<button class="button button-clear" ng-click="clearSearch()">
<i class="icon" ng-class="{'ion-close':model.searchTerm.length > 0}"></i>
</button>
</ion-header-bar>
<ion-header-bar class="bar bar-sub-header item-input-inset action-sub-header">
<button ng-style="model.quickSearchType == 'featured' && {'font-weight': 'bold'}"
style="color:#fff;"
class="button button-clear col col-33"
ng-click="quickSearch('featured',model.searchTerm)">
FEATURED
</button>
<button class="button button-clear col col-33"
ng-style="model.quickSearchType == 'nearby' && {'font-weight': 'bold'}"
style="color:#fff;"
ng-click="quickSearch('nearby',model.searchTerm)">
NEARBY
</button>
<button class="button button-clear col col-33"
style="color:#fff;"
ng-style="model.quickSearchType == 'recent' && {'font-weight': 'bold'}"
ng-click="quickSearch('recent',model.searchTerm)">
RECENT
</button>
</ion-header-bar>
The CSS I have is the following:
.action-sub-header {
background-color: #007fff;
}
.item-input-inset {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
position: relative;
overflow: hidden;
padding: 10.66667px;
}
.bar-header {
top: 0;
border-top-width: 0;
border-bottom-width: 1px;
}
.bar {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position: absolute;
right: 0;
left: 0;
z-index: 9;
box-sizing: border-box;
padding: 5px;
width: 100%;
height: 44px;
border-width: 0;
border-style: solid;
border-top: 1px solid transparent;
border-bottom: 1px solid #ddd;
background-color: white;
/* border-width: 1px will actually create 2 device pixels on retina; */
background-size: 0;
}
The ion-header-bar has a specific css on ios to add space on top of it for the iOS statusbar. You have to override it in your case.
To test the ios specific css in your browser, edit the classes on the body tag. Replace platform-browser by platform-ios and platform-macintel or platform-windows by paltform-cordova.
When you have do that, you'll be able to see the specific style applied by the ionic css:
.platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader) > * {
margin-top: 20px;
}
You just need to override it.
You need to add ionic.Platform.fullScreen(); to your $ionicPlatform.ready function.
I am trying to have two divs (red boxes) side by side, and within each red box should be a bordered link.
One link is on two lines whereas the second link is on one line.
The links should lie at the center (horizontally and vertically) of each box, and the two boxes should also be perfectly aligned.
My code is the following. I had to set the links as "display: table-cell;" to keep the two boxes aligned. If you have another solution, i'm listening ^^.
* {
margin: 0;
padding: 0;
}
#marketing-button, #prints-button {
background-color: red;
text-align: center;
width: 10em;
height: 10em;
display: inline-block;
}
#marketing-link, #prints-link {
color: white;
vertical-align: middle;
display: table-cell;
float: none;
font-size: 1em;
border: yellow solid 2px;
text-align: center;
margin-left: auto;
margin-right: auto;
padding: .2em;
}
<body>
<div id="container">
<div id="marketing-button">
<a id="marketing-link" href="#">Digital <br />marketing</a>
</div>
<div id="prints-button">
<a id="prints-link" href="#">Prints</a>
</div>
</div>
</body>
Thanks guys!
Ok, i found the solution.
Each link should be set to display as inline-block and should be contained within a div displayed as a table-cell.
This allows to center the link vertically.
The table-cells should themselves be contained within divs displayed as inline-blocks. This allows the red boxes to be aligned and to have a space between them.
Here is the final code:
* {
margin: 0;
padding: 0;
}
.container {
display: inline-block;
}
#marketing-button, #prints-button {
background-color: red;
text-align: center;
width: 10em;
height: 10em;
display: table-cell;
vertical-align: middle;
margin-right: 20px;
}
#marketing-link, #prints-link {
color: white;
display: inline-block;
float: none;
font-size: 1em;
border: yellow solid 2px;
text-align: center;
padding: .2em;
}
<body>
<div class="container">
<div id="marketing-button">
<a id="marketing-link" href="#">Digital <br />marketing</a>
</div>
</div>
<div class="container">
<div id="prints-button">
<a id="prints-link" href="#">Prints</a>
</div>
</div>
</body>
I made a simple flippable element using common techniques and found some strange behavior in Mobile Safari on iOS 7 (older version also may be affected, unfortunately I can't test them at the moment older versions also seem to be affected), please see the images below or visit a demo directly on your iOS device.
Editable markup and stylesheet
Full screen view to visit on your iOS device
<div class="flippable">
<input id="flippable-trigger" type="checkbox">
<label for="flippable-trigger" class="flippable-faces">
<div class="flippable-face-front">
Front
</div>
<div class="flippable-face-back">
Back
</div>
</label>
</div>
body {
font: 1em/0 Arial;
background-color: silver;
}
.flippable {
position: relative;
float: left;
width: 10rem;
height: 10rem;
-webkit-perspective: 800;
}
.flippable input[type="checkbox"] {
display: none;
}
.flippable-faces,
.flippable-face-front,
.flippable-face-back {
position: absolute;
width: 100%;
height: 100%;
}
.flippable-faces {
-webkit-transform-style: preserve-3d;
-webkit-transition: 600ms;
}
.flippable-face-front,
.flippable-face-back {
position: absolute;
width: 100%;
height: 100%;
line-height: 10rem;
text-align: center;
-webkit-box-shadow: 0 0 1rem gray;
-webkit-backface-visibility: hidden;
}
.flippable-face-front {
color: black;
background-color: white;
}
.flippable-face-back {
color: white;
background-color: black;
-webkit-transform: rotateY(180deg);
}
.flippable input[type="checkbox"]:checked ~ .flippable-faces {
-webkit-transform: rotateY(180deg);
}
It appears that repositioning your divs fixes the issue. I don't have an answer as to why that was happening though. Sorry. Working Example | Example for iPhone
<div class="flippable">
<input id="flippable-trigger" type="checkbox" >
<label for="flippable-trigger" class="flippable-faces">
<div class="flippable-face-back">
Back
</div>
<div class="flippable-face-front">
Front
</div>
</label>
</input>
</div>