I'm creating a list of radio buttons which when checked should change the color of corresponding label but it seems not to work at all using css selectors.
what am i missing here?
template-
<ion-list class="addressList">
<ion-radio-group">
<ion-item *ngFor="let address of address">
<label for="ok" >
{{address.address}}
</label>
<ion-radio id="ok" class="radio-custom" mode='ios' slot="end" value="{{address.address}}"></ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>
app.scss -
:checked + label {
color: var(--ion-color-primary) !important;
}
I think the best way to figure out styling is to use chrome dev tools, click on the item in question and see what classes such element obtains during "checked" state:
Then you could build your styling rules around it, but please note that if the element is inside of a "shadow root" you need to use css variables to apply styles (since those elements' style would be incapsulated inside shadow dom)
<ion-list class="addressList">
<ion-radio-group>
<ion-item *ngFor="let address of [0,1,2,3,4,5,6,7]">
<ion-label>address #{{ address }}</ion-label>
<ion-radio mode='ios' slot="end" value="{{address}}"></ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>
and css:
.item-radio-checked {
color: red;
}
You can play with many CSS vars Ionic team created from here: https://ionicframework.com/docs/api/item#css-custom-properties
These are applied at ion-item scope.
Related
Is there a way to dynamically toggle pagination in ag-grid?
The API doesn't seem to explicitly support it.
What's the best workaround?
As far as I know there is not nativly something available. But the best workaround would be to set the pagination attribute in the gridOptions and then have the entire table re-render. In Angular this would looks something like this: https://plnkr.co/edit/aRPG3X6sTeuKcqj1?open=app%2Fapp.component.ts
For the template:
<button (click)="togglePagination()">Toggle Pagination</button>
<ng-container #container >
</ng-container>
<ng-template #table>
<ag-grid-angular
style="width: 100%; height: 100%;"
class="ag-theme-alpine"
[columnDefs]="columnDefs"
[autoGroupColumnDef]="autoGroupColumnDef"
[defaultColDef]="defaultColDef"
[suppressRowClickSelection]="true"
[groupSelectsChildren]="true"
[rowSelection]="rowSelection"
[rowGroupPanelShow]="rowGroupPanelShow"
[pivotPanelShow]="pivotPanelShow"
[enableRangeSelection]="true"
[rowData]="rowData"
[gridOptions]="gridOptions"
(gridReady)="onGridReady($event)"
></ag-grid-angular>
</ng-template>
and the toggle function is doing the redraw
public gridOptions: GridOptions = {
pagination: true,
}
public togglePagination() {
this.gridOptions = {pagination: !this.gridOptions.pagination};
this.outletRef.clear();
this.outletRef.createEmbeddedView(this.contentRef);
}
You didn't specify if you use a framework or the native JS. But the redraw approach works in every framework and also natively just with a different syntax
I'm building a website for a client and I am trying to keep text within a Bootstrap card. Everything else is working fine. The card is not resizing to encompass the text - but this problem only occurs on screen sizes of iPad and below. How do I fix this?
I have scoured the internet for answers, and I have tried adjusting word-wrap, padding, margin size. Is there something else that I can try?
<section class="container w-80">
<div class="card col-4 bg-info mb-4 p-0">
<img class="card-img img-fluid" src="assets/images/audience-black-and-white-blur-2014774.jpg" alt="Card image cap" style="opacity: 0.2">
<div class="card-img-overlay m-1">
<blockquote class="blockquote card-text text-white">
<p class="card-text">“May the Lord send you help from the sanctuary and give you support from Zion! May He remember all your offerings and regard with favor your burnt sacrifices!”</p>
<p class="card-text float-right text-white">Psalm 20:2-3</p>
</blockquote>
</div>
</div>
<div class="col-8 pb-4">
<h5 class="text-black-50">Our work of starting a conservative, biblically-sound, Reformed church-planting movement in the Bahamas is dependent on the financial support of partners like you.</h5>
</div>
</section>
thebigbadcaribwolf's Bootstrap Card Problem
This is caused by your col-4 in card
This col-4 means that your enforcing a strict col-4 in every screen size
The better way is explicitly telling what col to use in every screen
col-lg-4 // for large devices
col-md-6 // for ipad and medium size devices
col-sm-8 // for smaller phone devices
Take a look at this fiddle
https://jsfiddle.net/8shjr6gn/
Edit, if you are using the SASS boostrap, I recommend to also enable the responsive text feature of Bootsrap 4.3
Just set the
$enable-responsive-font-sizes = true
and text will adjust accordingly to the screen size
Edit however if you use CDN and not the SASS, you can write something similar to this, to make the font size responsive
#media (min-width: 576px) {
.card-text{
font-size:1rem;
}
}
#media (max-width: 575.98px) {
.card-text{
font-size:.8rem;
}
}
#media (min-width: 768px) {
.card-text{
font-size: 1rem;
}
}
#media (min-width: 992px) {
.card-text{
font-size: 1.8rem;
}
}
#media (min-width: 1200px) {
.card-text{
font-size: 2rem;
}
}
Thank you so much for taking the time to answer! With your feedback, I figured out that this issue can be solved by specifying classes col col-md-X
Here's the final product on iPad & iPhone 5S: thebigbadcaribwolf's Bootstrap Card Solution!
And here's a Pen.
I am attempting to setup a noUiSlider (version 13.1.5) from within a Polymer 3 custom element. The slider displays and technically works but the right handle is displaying where the left handle should be and the left handle is displaying outside of the container set out for the slider.
I've taken code from a Polymer 1 element that works 100% correctly but the handles aren't working in the Polymer 3 element.
The html code is as follows and has not changed between the two Polymer versions (other than the code now being in the template function for Polymer 3):
<div style="height: 50%; width: 100%">
<div id="scoreRangeSelector" style="display: flex; flex-direciton: column">
<div id="scoreRangeSelectorText">
<p>Range Selection</p>
</div>
<div id="scoreRangeSelectorSlider"></div>
<div id="scoreRangeInterval">
<p>Score Interval</p>
<input id="scoreRangeIntervalInput" on-change="_scoreRangeIntervalChanged" type="number" value="5" />
</div>
</div>
</div>
The Polymer code that sets up the slider is as follows and has not changed between the two Polymer versions (other than the retrieval of the element into the variable slider):
var slider = this.$.scoreRangeSelectorSlider;
noUiSlider.create(slider,
{
connect: true,
range:
{
'min': 0,
'max': 100
},
start: [0, 100],
step: 1,
tooltips: [true, true]
});
slider.noUiSlider.on("end", this._sliderMoved);
In the Polymer 1 element, the slider displayed correctly with it's handles, as follows:
https://www.pastiebin.com/5cd95545273b1
In the Polymer3 element, the slider displays but the right handle is displaying where the left handle should be and the left handle is displaying outside of the container, displaying under another container:
https://www.pastiebin.com/5cd9563ac618f
The handle that can be seen in the image is the handle that should be on the right hand side of the slider. The element being shown as "div.noUi-origin" is the left handle that should be on the left hand side of the slider.
The noUiSlider code seems to be adding transformations onto the handles that are pushing them off where they should be but I am unsure of what I am supposed to do to fix this.
set "direction: ltr" to "scoreRangeSelectorSlider" parent
I'm new to Angular development.
I have started developing a web site using Angular 6 Material (material.angular.io) and kicked this off with navigation schematic that delivers a responsive toolbar and side nav component for navigation. The default HTML layout looks something like this:
<mat-sidenav-container class="sidenav-container">
<mat-sidenav #drawer class="sidenav"
...
<mat-toolbar color="primary">
...
</mat-toolbar>
<mat-nav-list>
<a mat-list-item routerLink='/menu1'>menu 1</a>
...
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content >
<mat-toolbar color="primary" >
<mat-toolbar color="primary" class="mat-toolbar" >
<mat-toolbar-row >
...
</mat-toolbar-row>
</mat-toolbar>
</mat-toolbar>
<!-- Application components go here-->
<router-outlet></router-outlet>
</mat-sidenav-content>
</mat-sidenav-container>
mat-sidenav-container contains the 'drawer' mat-sidenav to the left of mat-sidenav-content
I want to programmaticaly shrink the width of mat-sidenav, subsequently shifting mat-sidenav-content to the left.
I can do the first part, by using [ngClass] on mat-sidenav and changing this on demand -
However, I'm not having the same success with the content section on the right of the drawer, by just merely changing its CSS Class to have the correct width..
Looking at the source code, I see mat-sidenav-content not only has CSS Classes but also has style attribute as "margin-left:200px"
(which overrides any CSS class styling I set)
I want to programmaticaly change this margin-left value.
How do I do that ?
Thanks -
html:
<mat-sidenav #drawer [(ngStyle)]="{'width': myWidth}">
typescript:
export class HeroesComponent implements OnInit {
myWidth: 25px;
}
I have been working with material design and tried all options as instructed at [https://material.angularjs.org/latest/#/api/material.components.tabs/directive/mdTab][1]
I have no clue as to how to change the slide transitions to fade or anything else. Please help
<md-tabs md-selected="selectedIndex">
<img ng-src="img/angular.png" class="centered">
<md-tab ng-repeat="tab in tabs | orderBy:predicate:reversed" md-on-select="onTabSelected(tab)" md-on-deselect="announceDeselected(tab)" ng-disabled="tab.disabled">
<md-tab-label>
{{tab.title}}
<img src="img/removeTab.png" ng-click="removeTab(tab)" class="delete">
</md-tab-label>
<md-tab-body>
{{tab.content}}
</md-tab-body>
</md-tab>
</md-tabs>
You can set the animation with css using these classes:
[role="tabpanel"],
md-tabs {
transition: none; /* or whatever transition you want
}