Most ons-list provided by OnsenUI are normally vertical. I wonder if it is possible to make it into horizontal. Something like a possibility to scroll from left to right.
I have figured out the solution as follows:
HTML:
<ons-list class="wrapper-album">
<ons-list-item modifier="tappable" class="internal" ng-repeat="item in items" ng-click="onItemClick(item);">
<img ng-src="{{item.thumb}}"></img>
</ons-list-item>
</ons-list>
CSS:
.wrapper-album {
width: 100%;
white-space: nowrap;
overflow-y: hidden;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
}
.internal {
display: inline;
}
Related
This question has come up several times during the evolution of Angular Material, but I'm not able to make any of the suggestions work for v1.0.5. The entire page (or flex container) scrolls, moving the tabs out of view.
How can I achieve scrollable, full-height content elements?
<div flex>
<md-tabs md-dynamic-height md-border-bottom>
<md-tab label="one">
<md-content class="md-padding">
Demo fiddle
Bonus Karma for incorporating custom scrollbars.
I've worked it out. By removing the dynamic-height directive, then using absolute positioning, it's working:
.tabs-wrapper {
position: relative;
}
.full-size {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
<div ng-app="sandbox">
<div flex class="tabs-wrapper">
<md-tabs class="full-size" md-border-bottom>
Fiddle demo
Absolute positioning is required to get the child of a flex element to expand.
Note: The height is incorrect in the fiddle demo. This problem doesn't occur in my project.
Wrap the tab content inside a div and assign it a max height.
<md-tab label="two">
<md-content class="md-padding">
<div class="tab-content">
<h1 class="md-display-2">Tab Two</h1>
<div>
<md-content>
<md-tab>
and css part
div.tab-content{
max-height:350px;
}
Js-fiddle link
Try this:
md-tabs-wrapper {
position : fixed;
width: 100%;
z-index: 1;
box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
}
md-tabs-content-wrapper {
margin-top: 48px;
}
I am looking for Tabs displayed top to bottom with tab navigation on the left. Is there anyway this can be achieved in Angular Material library?
This codepen by Rahul Sagore uses vanilla Material, not specifically for Angular, but it's exactly what you want. I was looking for the same thing as you; it's a shame Material doesn't offer this, but I can see how it would go against their principles and make Material too extensive.
It comprises of custom css (perhaps overriding, I'm not sure) and use of particular Material classnames. Below I've pasted the contents into a snippet.
I had an issue with the mdl-cell--n-col classes so I changed the content one from 10-col to 6-col so it wouldn't wrap the content beneath the tabs in the restrictive space of this post. You'll probably have to tinker with that yourself, or scrap that and use Material styles the way you know how. Similarly, I cannot see what the .hollow-circle spans are doing, so perhaps they aren't needed.
/*Vertical Tabs*/
.vertical-mdl-tabs {
margin-top: 30px;
}
.vertical-mdl-tabs .mdl-tabs__tab-bar {
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
padding-bottom: 35px;
height: inherit;
border-bottom: none;
border-right: 1px solid rgba(10, 11, 49, 0.20);
}
.vertical-mdl-tabs .mdl-tabs__tab {
width: 100%;
height: 35px;
line-height: 35px;
box-sizing: border-box;
letter-spacing: 2px;
}
.vertical-mdl-tabs.mdl-tabs.is-upgraded a.mdl-tabs__tab.is-active {
border-right: 2px solid #ED462F;
}
.vertical-mdl-tabs.mdl-tabs.is-upgraded .mdl-tabs__tab.is-active:after {
content: inherit;
height: 0;
}
.vertical-mdl-tabs.mdl-tabs.is-upgraded .mdl-tabs__panel.is-active, .mdl-tabs__panel {
padding: 0 30px;
}
.vertical-mdl-tabs.mdl-tabs .mdl-tabs__tab {
text-align: left;
}
<script src="https://storage.googleapis.com/code.getmdl.io/1.1.0/material.min.js"></script>
<link href="https://storage.googleapis.com/code.getmdl.io/1.1.0/material.indigo-pink.min.css" rel="stylesheet"/>
<div class="mdl-tabs vertical-mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
<div class="mdl-grid mdl-grid--no-spacing">
<div class="mdl-cell mdl-cell--2-col">
<div class="mdl-tabs__tab-bar">
<a href="#tab1-panel" class="mdl-tabs__tab is-active">
<span class="hollow-circle"></span>
Tab 1
</a>
<a href="#tab2-panel" class="mdl-tabs__tab">
<span class="hollow-circle"></span>
Tab 2
</a>
<a href="#tab3-panel" class="mdl-tabs__tab">
<span class="hollow-circle"></span>
Tab 3
</a>
</div>
</div>
<div class="mdl-cell mdl-cell--6-col">
<div class="mdl-tabs__panel is-active" id="tab1-panel">
Content 1
</div>
<div class="mdl-tabs__panel" id="tab2-panel">
Content 2
</div>
<div class="mdl-tabs__panel" id="tab3-panel">
Content 3
</div>
</div>
</div>
</div>
you can have verticval tabs by adding vertical attribute to the mat-tab-group and adding following css to your page.
mat-tab-group[vertical] .mat-tab-labels {
display: flex;
flex-direction: column!important;
}
mat-tab-group[vertical] {
display: flex;
flex-direction: row!important;
}
here's the mat-tab-group element with vertical attribute
<mat-tab-group flex="1" vertical>
<mat-tab label="Tab 1"> Loading ... </mat-tab>
<mat-tab label="Tab 2" > Loading ... </mat-tab>
</mat-tab-group>
I recently updated a Cordova mobile app to use OnsenUI v1.3.8 (in order to fix a problem with broken back buttons when viewing the app on iOS 8.4). The problem I'm now seeing is that the back buttons throughout the app, send you all the way back home. Even levels down in the app, pressing the back button takes you to the previous page, then seems to fire another event to go back again.
I have the following syntax in my index.html (home) page:
<body onload="onLoad()">
<ons-navigator title="Navigator" var="myNavigator" page="main.html">
</ons-navigator>
</body>
In the rest of my app, I'm using the following syntax:
<ons-toolbar>
<div class="left animated fadeIn">
<ons-back-button><div class="animated fadeIn">Back</div></ons-back-button>
</div>
<div class="center animated fadeIn">{{ title }}</div>
</ons-toolbar>
Main.html is simply...
<div ui-view></div>
Any idea on how to resolve this?
[EDIT]
Below is the HTML behind the button/s:
<ons-back-button class="ng-scope">
<span class="toolbar-button--quiet " ng-click="" style="height: 44px; line-height: 0; padding: 0; position: relative;">
<i class="ion-ios-arrow-back ons-back-button__icon" style="vertical-align: top; background-color: transparent; height: 44px; line-height: 44px; font-size: 36px; margin-left: 8px; margin-right: 2px; width: 16px; display: inline-block; padding-top: 1px;"></i><span style="vertical-align: top; display: inline-block; line-height: 44px; height: 44px;" class="back-button__label"><div class="animated fadeIn ng-scope">Back</div></span>
</span>
</ons-back-button>
Are there any clear button included with md-input of type Search? I know that I can just add an clear button outside or the search input component, but I would rather like to get it as part of the input field.
I solve it using a negative margin-right
.search {
md-content.md-default-theme {
overflow: visible;
}
.search-cancel {
color: white !important;
fill: white;
border: none;
width: 16px;
height: 16px;
margin: 8px 0 0 -36px;
overflow: visible;
cursor: pointer;
border-radius: 50%;
transition: background 0.15s linear;
background: rgba(0, 0, 0, 0.3);
&:hover {
background: rgba(255, 0, 0, 0.8) !important;
}
}
}
<div layout="row" class="search">
<md-content flex="90" layout-padding>
<md-input-container md-no-float>
<md-icon md-svg-icon="search" class="name"></md-icon>
<input ng-model="search" type="search" title="Search" placeholder="Search">
</md-input-container>
</md-content>
<md-content flex layout-padding>
<md-icon ng-show="search" md-svg-icon="md-close" class="search-cancel"
ng-click="search=''"></md-icon>
</md-content>
</div>
The containing md-content also needs overflow-visible so that the icon is not clipped.
This is not possible with existing version of angular material (v0.9.0) but is targeted to v0.10.0. See more information here: https://github.com/angular/material/issues/2802#issuecomment-101764802
However, there is a Angular directive that might be used as a workaround. https://github.com/dcohenb/angular-clear-input
I have an Angular1.0.7 web application. I´m adding a Twitter Bootstrap 2 tooltip to an span tag, but the tooltip is displayed very narrow. This is not happening with many other tooltips I have in the application.
<span style="line-height: 45px" ng-show="controlSkipperType || createBoatPoliciesForm.skipperType.$error.validateSkipperType" class="text-error" ng-switch="skipperTypeError">
<span ng-switch-when="OPTIONAL_ERROR" style="position: relative; top: -15px; margin-left: 10px" class="pull-left">{{'SKIPPER_TYPE_OPTIONAL_ERROR' | translate}}.</span>
<span ng-switch="skipperTypeError" style="position: relative; top: -15px; margin-left: 10px">
<i ng-switch-when="OPTIONAL_ERROR" class="fa-icon-question-sign" tooltip="Text to show in the tooltip"></i>
See the picture:
Something like this:
div > div .popover-content {
min-width: 620px !important;
}