I'm using amp-carousel "version 0.2" which allows to use autoplay and loop attributes for amp-carousel of type ="carousel"
it appears that the last and first only stacked over each other but all the carousel items are working fine
Related
Problem:
I have an ion-select and in the controller when the user does something, I populate the ion-select with 1 value and make that value the selected value. The ion-select does not show that the value has been selected, but the [(ngModel)] has the correct value. When I open the ion-select it shows the value in the list and it is selected, when selecting the value in the list again it goes over the ion-select label.
How can I populate the ion-select with a value and make the populated value the selected value so that it shows on the ion-select as a selected item?
Screenshots:
The Make has value of CHEVROLET but it does not show as selected by ion-select:
When tapping on ion-select, it shows the CHEVROLET as selected and CHEVROLET goes over the Make label:
HTML:
<ion-item>
<ion-label position="floating">
<span class="required">* </span>Make
</ion-label>
<ion-select [interfaceOptions]="global.compactAlertOptions" id="make" [(ngModel)]="global.valuation.vehicle.make" name="make" #makeRef="ngModel" required>
<ion-select-option *ngFor="let make of makes">{{make}}</ion-select-option>
</ion-select>
</ion-item>
<ion-label *ngIf="makeRef.touched && makeRef.invalid && makeRef.errors.required" class="error">Make is required</ion-label>
Controller:
Modal Controller (the Make gets set in a popup modal):
this.global.valuation.vehicle.make = this.vehicleDetails.VehicleMake;
Populate the ion-select options in parent controller:
this.makes = [this.global.valuation.vehicle.make];
This generally happens when the value in ngModel is set before <ion-select-option> options are loaded on the DOM.
You will have to explicitly delay setting the value to ngModel until the <ion-select> and options are loaded on the DOM.
You can achieve it by adding a setTimeout in your component file and assign the ngModel value in the callback of setTimeout.
It seems to me that this has to do with some custom css that you are using on the template. Since when you use floating for a select is exactly the same as when you use stacked, Since the select is going to expand on the ion-item anyway. This floating works best with ion-input.
In your case, if the option was not selected, the select should be empty and the label above it. but it is on the item furthermore on the baseline of the select. When you select the option it will show in the baseline on the select left aligned.
like this:
If you remove the floating you will see what I mean.
it should show like this:
It will be easier to understand the issue if you just provide the CSS bits that are messing with the alignment of the elements.
My guess is that you have some styles that only reduce the ion-item and don't deal with alignment and positioning of the inner elements.
I am using the wheelnav.js library. Some of the items in the wheel have text which needs to be wrapped onto a new line due to the length being too long.
I have tried using the <br /> html tag but it is rendered as text.
You have to use \n.
myWheelnav.createWheel(["Short text","This is a\nlong text"]);
Im trying to add a ripple effect to a card using angular material. The ripple effect works the way it supposed except that it expands the hight of the card when the effect is active.
How can I stop the card from expanding?
<mat-card mat-ripple>
<mat-card-content>This is content</mat-card-content>
</mat-card>
Stackblitz that demonstrates the behaviour
Add a class (i.e. last-child) to the last child of your mat-card (in your case mat-card-content) and define the following style:
.mat-card .last-child {
margin-bottom: 0;
}
The problem is that matRipple adds an zero-height element to the mat-card while Angular Material only removes the margin-bottom from the last child.
If you add the footer element (with or without content) you won't need additional CSS and this will lock the height when activating the ripple effect.
<mat-card mat-ripple>
<mat-card-content>This is content</mat-card-content>
<mat-card-footer></mat-card-footer>
</mat-card>
should be as easy as adding matRipple to the mat-card
<mat-card class="action-card" matRipple>
<mat-card-title>
{{content}}
</mat-card-title>
<mat-card-content>
desc
</mat-card-content>
</mat-card>
make sure you inject the MatRippleModule into your module.ts though, that threw me off for a while
Use a div -Tag inside of mat-card -Tag. This Fix my issue.
[here i have 2 scenarios, 1) first is image one. there i have 4 cards in a each row(that will change based on screen size 4->2->1). it is in respective classes like col-lg-3 col-md-6 col-sm-6 col-xs-12, i have only one html markup to render the card, many cards are displaying dynamically based on back end data.
2) on clicking button in a each card, their respective extra details will come up in bottom to that in complete row.
here problem is since it is in column class, that extra details occupying only that much space(like parent div), i want that in single row. 1)http://i.stack.imgur.com/d8xEC.jpg 2) http://i.stack.imgur.com/N8ewg.jpg]1
because it's too long, i created a fiddle: https://jsfiddle.net/gxyud676/1/
I'm not too happy with that solution, as it is not responsive.
my first thought was to just use the bootstrap collapsable features to use the cards as collapsible triggers, and place the preview markup outside the rows.
but this approach would open the preview on a xs screen always below the 4th element:
CARD 1
CARD 2 <-- clicking
CARD 3
CARD 4
PREVIEW for 2
CARD 5
CARD 6
...
my fiddle solution was then to detect the screen size (hence the number of used cols) and to move the preview markup to the correct position.
another way could be to duplicate the preview markup on the correct positions (for card 1 there is the preview with class "col-xs-12 visible-xs" just after the card, and the same object with "col-sm-6 col-md-6 visible-sm visible-md" after an evenly positioned card and with "visible-lg" after the current row)
it's more complicated than I initially thought :-/
I have created a TitlePane and wish to load data dynamically from a get method into the Title property. As of the current this all works. However, now when the data is loaded (4 separate types), its all getting mushed together. I wish to divide this received data evenly (25%) across the title.
For example:
<div id="tp2" data-dojo-type="dijit/TitlePane" data-dojo-props="title: 'I'm a TitlePane
Too'">
Click arrow to close me.
</div>
In this example the title is set to "I'm a TitlePane Too".
I wish to change the title so that each of the four words is evenly distributed across the title section of the pane. However there are no extra properties for doing this sort of thing.
Use the "set" method to set the new title.
E.g:-
<div id="tp2" data-dojo-type="dijit/TitlePane" data-dojo-props="title: 'I'm a TitlePane
Too'">
Click arrow to close me.
</div>
//For this above example, title is replaced as follows in JS
dijit.byId('tp2').set('title','New title');
Update: If this title pane is created dynamically without an ID, then get the widget object using the css query.
dijit.getEnclosingWidget(dojo.query(".dijitTitlePane")[0]).set('title','New title');
dojo.query(".dijitTitlePane") => will give array of all titlepane domNodes. From this chose the one you need. I chose at "0"th index i.e. 1st title pane node in the page.
Then I get the widget object of that domNode and then set the title.