I just noticed the new angular dart components, so I was attemping to use them this way :
<material-expansionpanel-set>
<material-expansionpanel *ngFor="let place of places" name="{{place.name}}" showSaveCancel="false">
<div *deferredContent>{{place.name}}</div>
</material-expansionpanel>
</material-expansionpanel-set>
I was expecting the elements inside the div to be displayed automagically in a differed manner. It seams I don't get how it works : the statement inside the div is never displayed (naturally this is just a test, I'm planning to put an entire component inside the *deferredContent div.
This is the html I get.
<material-expansionpanel-set _ngcontent-toa-2="">
<!--template bindings={}--><material-expansionpanel _ngcontent-toa-2="" showsavecancel="false" _nghost-toa-10="">
<div _ngcontent-toa-10="" class="panel themeable open" role="group" aria-label="myplace" aria-expanded="true">
<!--template bindings={}--><header _ngcontent-toa-10="" buttondecorator="" role="button" class="" aria-label="Close myplace panel" tabindex="0" aria-disabled="false">
<div _ngcontent-toa-10="" class="panel-name">
<p _ngcontent-toa-10="" class="primary-text">myplace</p>
<!--template bindings={}-->
</div>
<div _ngcontent-toa-10="" class="panel-description">
</div>
<!--template bindings={}--><glyph _ngcontent-toa-10="" buttondecorator="" class="expand-button" role="button" _nghost-toa-11="" tabindex="0" aria-disabled="false"><i _ngcontent-toa-11="" aria-hidden="true" class="material-icons">expand_less</i></glyph>
</header>
<main _ngcontent-toa-10="" class="">
<div _ngcontent-toa-10="" class="content-wrapper">
<div _ngcontent-toa-10="" class="content">
<!--template bindings={}-->
</div>
<!--template bindings={}-->
</div>
<!--template bindings={}--><div _ngcontent-toa-10="" class="toolbelt">
</div>
<!--template bindings={}-->
</main>
</div>
</material-expansionpanel>
</material-expansionpanel-set>
If the idea is to implement DeferredContentAware and get notified when the component is visible, I'd be pretty deceived (since we could have done that manually by listening to open and close events)
material-expansionpanel should automatically fire events for *deferredContent.
Some simple questions:
Do you have DeferredContentDirective in your directives: const [ ...]?
What version of AngularDart are you using?
Related
I have tried with both order-xs-1 and order-xs-first, but none is working and i don't know why. I want on mobile the image to be first and the paragraph second.
<div class="container"> <div class="row bg-white g-0"> <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 col-xxl-6 pt-5 ps-5 "> <h2 class="fs-1 fw-light">Make It The Best</h2> <h4 class="fs-3 my-3 fw-bold">Unseen experience. Join Us !</h4> <p>A wonderful serenity has taken.</p> <button type="button" class="button px-4 py-3 me-3 mt-2 fs-5">Learn More</button> </div> <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 col-xxl-6 "> <img src="/images/section3/drink.jpg" class="img-fluid" alt=""> </div> </div> </div>
There are a lot of things wrong with your code. I would go back and have a proper read of the way bootstrap handles breakpoints. If you have specified col-md-6 you don't need all the other col-SZ-6, as breakpoints work from a resolution UP.
As for your exact problem, it is easily fixed by putting the column first in the HTML and then letting bootstrap move it at the iPad breakpoint with order-md-last:
<div class="container">
<div class="row bg-white g-0">
<div class="col-12 col-md-6 order-md-last mb-3">
<img src="/images/section3/drink.jpg" class="img-fluid" alt="">
</div>
<div class="col-12 col-md-6">
<h1 class="h2 fs-1 fw-light">Make It The Best</h2>
<h2 class="h4 fs-3 my-3 fw-bold">Unseen experience. Join Us !</h4>
<p>A wonderful serenity has taken.</p>
<button type="button" class="button px-4 py-3 me-3 mt-2 fs-5">Learn More</button>
</div>
</div>
</div>
You should also not use H tags to style headings, either apply a H class like I have or use CSS to change the size of your headings. Heading tags should also go in order H1->H2 etc...
I have a search results screen showing 10 results (locations in the world) per page. If a result has an image available, the image will show, otherwise it shows the location on an OpenLayers map.
I'm just trying to upgrade this page using Bootstrap carousel to allow users to cycle between the map and the image (if available).
I got carousel working fine using 2 test images. However when I swap in the OL map, although the image/photo shows OK, when you cycle to the next item (the map), the map just shows a white screen / nothing shows.
Code is below. (FYI the map works fine when I pull it out of the carousel code.
Any ideas?
Happy to share the Ol.map code, although as mentioned it runs OK outside of carousel, so I assume it might be some sort of formatting/CSS issue.
<div class="carousel-inner">
<div class="carousel-item active">
<%= image_tag(#phototouse, class:"map img-responsive", style:"display:block;height: 100%;max-height:350px") %>
</div>
<div class="carousel-item">
<div id="<%= location.location_id %>" class="map" style="display:block;height: 100%;max-height:350px"></div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls<%= location.location_id %>" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls<%= location.location_id %>" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Update:
I thought I had got this working by adding in the updateSize event (below) but weirdly the map only shows when I resize the window. If I don't touch the window, the map doesn't show and I get the following java error: 'map1.updateSize is not a function'.
Any ideas?
<div class="container-fluid normaltextblack" style="background-color: #F3F3F3;">
<div class="row" style="height:350px">
<div id="sidel" class="col-0 col-sm-0 col-md-0 col-lg-5 col-xl-5">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="/assets/image1.jpg" alt="First slide" style="height:350px">
</div>
<div class="carousel-item">
<div id="testmap" class="map img-responsive" style="height:350px"></div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev" onclick="resizemap();">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next" onclick="resizemap();">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
<script>
function resizemap() {
setTimeout(function(){
var map1 = document.getElementById("testmap");
map1.updateSize();
}, 1000);
}
</script>
I have an app where I'm using custom svg icons using Materials 'MatIconRegistry'.
The import works fine, but a strange thing is happening when I have multiple icons on a page. For some reason, any icons that following an initial icon end up bing the same as the first, even though they are clearly labeled as another icon.
When I comment out the initial icon, the next instance changes to the one being called by that instance, but then all the following icons then change to that icon.
What could be causing this?
Here is the code:
<mat-sidenav-container>
<mat-sidenav mode="side" opened="true" class="app-sidenav">
<div class="logo-wrapper">
<img
class="menu-logo"
alt="Avocado"
src="./assets/logo.png"
/>
</div>
<div>
<div class="menu-item">
<a
class="menu-button"
routerLink="/"
mat-button
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }"
>
<div>
<mat-icon svgIcon="dashboard"></mat-icon>
</div>
<div class="button-label">
Dashboard
</div>
</a>
</div>
<div class="menu-item">
<a
class="menu-button"
routerLink="/sessions"
mat-button
routerLinkActive="active"
>
<div>
<mat-icon svgIcon="sessions"></mat-icon>
</div>
<div class="button-label">
Sessions
</div>
</a>
</div>
<div class="menu-item">
<a
class="menu-button"
routerLink="/users"
mat-button
routerLinkActive="active"
>
<div>
<mat-icon svgIcon="users"></mat-icon>
</div>
<div class="button-label">
Users
</div>
</a>
</div>
</div>
</mat-sidenav>
<mat-toolbar class="app-toolbar">
<h2 class="page-title">{{pageTitle}}</h2>
</mat-toolbar>
<router-outlet></router-outlet>
</mat-sidenav-container>
I am using Cordova with JQuery mobile, it working fine on android, but when made build for Windows Phone 8, the JQM Toolbar(Header and footer) not getting fix, Toolbar little goes up when I am scrolling up page and when I am scrolling down the toolbar little goes down, like below screenshots
http://159.100.223.157/screens/IMG_0712.JPG
http://159.100.223.157/screens/IMG_0713.JPG
here is the code
<div role="main">
<div id="SearchRides" data-role="page" class="page innerPage">
<div class="ui-header ui-bar-a ui-header-fixed header" data-position="fixed">
<h1 aria-level="1" role="heading" class="ui-title">Search</h1>
</div>
<!--end header-->
<div class="projects ui-content content">
<form method="post" action="#">
<div class="ui-field-contain">
<label for="txtFrom" style="text-align: center">Source</label>
<input type="text" name="txtFrom" id="txtFrom" placeholder="To">
</div>
</form>
</div>
<!--end body-->
<div data-theme="a" class="footer" data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li> </li>
</ul>
</div>
<!--end footer-->
</div>
</div></div>
I have try to include a footer with a navbar inside a dialog page, however, the navbar gets bigger than the dialog window. I did try to just include the navbar without the data-role="footer" but is doing the same. Looks like the navbar inside the dialog doesn't inherent the css properties from the dialog parent. Here is the code.
<div id="addCourse" data-role="page" data-dialog="true" data-close-btn="none">
<div role="dialog">
<div data-role="header" role="banner">
<h1>Add course</h1>
</div>
<div class="ui-content">
<div class="ui-field-contain">
<label for="add-course">New course</label>
<input type="text" name="add-course" id="add-course" placeholder="Enter new course" value="">
</div>
</div>
<div data-role="navbar">
<ul>
<li>Cancel</li>
<li>Save</li>
</ul>
</div>
</div>
anybody with sugestions??
It looks like the borders on the navbar buttons are not considered when setting width. You can fix it with a little CSS
<div id="addCourse" data-role="page" data-dialog="true" data-close-btn="none">
<div data-role="header" role="banner">
<h1>Add course</h1>
</div>
<div role="main" class="ui-content">
<div class="ui-field-contain">
<label for="add-course">New course</label>
<input type="text" name="add-course" id="add-course" placeholder="Enter new course" value="" />
</div>
</div>
<div data-role="navbar">
<ul>
<li>Cancel</li>
<li>Save</li>
</ul>
</div>
</div>
.ui-dialog-contain .ui-navbar {
padding-right: 4px;
border-bottom-left-radius: 0.3125em;
border-bottom-right-radius: 0.3125em;
}
Working DEMO
I did found another way to work around this issue. I just added a overflow:hidden to the data-role="navbar"
<!-- Dialog Add Course Footer -->
<div data-role="navbar" style="overflow:hidden;">
<ul>
<li>Cancel</li>
<li>Save</li>
</ul>
</div>
<!-- End Dialog Add Course Footer -->