<div class="panel panel-line panel-danger">
<div class="panel-heading">
<h3 class="panel-title">Meb Katmanları</h3>
<div class="panel-actions">
<mat-slide-toggle color="warn" [(ngModel)]="allMebLayers" (change)="mebToggle()"></mat-slide-toggle>
</div>
</div>
<div *ngIf="allMebLayers" class="panel-body" style="max-height: 70vh; overflow-y: auto">
<mat-selection-list *ngFor="let l of legends" style="overflow-y: hidden; overflow-x: hidden;">
<mat-checkbox>
<td class="p-5">{{l.layerName}}</td>
<td class="p-5"><img [src]="l.legend.imageData"></td>
</mat-checkbox>
</mat-selection-list>
</div>
</div>
I want to just style the image inside the checkbox. Any simple way without adding new class name ?
To style the image inside the checkbox WITHOUT a new class name, try this selector in your css document:
mat-checkbox img {
/* desired CSS properties */
}
To accomplish the styling, you could also use:
.p-5 img { ... }
If you want to only target that image for that class and not all of the mat-checkbox img elements that could also be on the same page.
Related
I created a angular dropdown component "app-ec-dropdown" using https://www.npmjs.com/package/#ng-select/ng-select
<div class="inline required">
*
</div>
<div class="input-container inline">
<ng-select
class="custom"
[items]="items"
bindLabel="Name"
bindValue="Id"
(focus)="focus()"
(close)="close()"
(clear)="clear()"
(blur)="blur()"
placeholder="Select"
[(ngModel)]="selectedId"
[required]="required"
>
</ng-select>
<div *ngIf="!validatationPassed()">
<div class="row alert alert-danger alert-div">
<span>
Required field
</span>
</div>
</div>
</div>
CSS for above component
.input-container {
width: 95%;
}
.inline {
display: inline;
}
.required {
vertical-align: top;
color: red;
width: 2%;
}
Now i am using above component in parent component
<div class="col-sm-4">
<app-ec-dropdown
name="RegionId"
[items]="regions"
(onChange)="onRegionChange($event)"
[selectedId]="state.RegionId"
[required]="regionDropDownValidator.required"
[ecDropDownValidator]="regionDropDownValidator"
[(ngModel)]="regionDropDownValidator.selectedId"
ngDefaultControl
> </app-ec-dropdown>
</div>
for Region Dropdown, I want red asterisk, to be placed as in "State Name" textbox and then dropdown and validation message in the adjacent div.
Screen grab:
After playing around with your code, I thought about the way that I would do it.
I noticed that the actual label isn't included in your example above, so I assume that it's being included within a column to the left of the <div class="col-sm-4"> element where you're consuming the <app-ec-dropdown> component which I assume that you have defined with the first code block.
My advice which will be the easiest and most correct (in my opinion), would be to add the label as an #Input property in your code for the <app-ec-dropdown> component.
Then you can place it closer to the asterisk character.
So add this to your EcDropdownComponent TypeScript:
#Input()
public label: string = '';
Then add the input attribute where you consume your component:
<app-ec-dropdown
name="RegionId"
[items]="regions"
label="State Name"
(onChange)="onRegionChange($event)"
[selectedId]="state.RegionId"
[required]="regionDropDownValidator.required"
[ecDropDownValidator]="regionDropDownValidator"
[(ngModel)]="regionDropDownValidator.selectedId"
ngDefaultControl>
</app-ec-dropdown>
Then you can use the CSS grid to define the layout within your component:
<div class="row">
<!-- Label -->
<div class="col-sm-4">
<div class="label">
{{label}}
<span class="inline required"> * </span>
</div>
</div>
<!-- Select Input -->
<div class="col-md-8">
<div class="input-container inline">
<ng-select
class="custom"
[items]="items"
bindLabel="Name"
bindValue="Id"
(focus)="focus.emit()"
(close)="close.emit()"
(clear)="clear.emit()"
(blur)="blur.emit()"
placeholder="Select"
[(ngModel)]="selectedId"
[required]="required">
</ng-select>
<div *ngIf="!validatationPassed()">
<div class="row alert alert-danger alert-div">
<span>
Required field
</span>
</div>
</div>
</div>
</div>
</div>
The nice thing about this approach is that you have a completely self-contained component which doesn't need to worry about anything outside of it's scope.
If you're concerned about variable widths using Bootstrap and the grid system.
You can also pass the grid column style in as an #Input property to the component so that you're providing more control to the consuming component.
I have implemented ng2-image-viewer library to my image view and it's dynamically loading many HTML components. I wish to change the CSS of some of the dynamically loaded elements.
Here is what i have by default.
The HTML component of above before rendering is as follows,
<div class="image-viewer-container">
<app-image-viewer
[images]="[artURL]"
[loadOnInit]="true"
[idContainer]="'idOnHTML'"
[showOptions]="false"
>
</app-image-viewer>
</div>
The HTML component of above after rendering is as follows,
<div _ngcontent-pyx-c10="" class="image-viewer-container">
<app-image-viewer _ngcontent-pyx-c10="" _nghost-pyx-c11="" ng-reflect-id-container="idOnHTML" ng-reflect-images="http://localhost/artworks/art/" ng-reflect-load-on-init="true" ng-reflect-show-options="false">
<div _ngcontent-pyx-c11="" class="image-gallery-2" id="idOnHTML">
<div _ngcontent-pyx-c11="" class="image-container iv-container">
<div class="iv-wrap">
<div class="iv-loader" style="display: none;"></div>
<div class="iv-snap-view" style="opacity: 0; pointer-events: none;">
<div class="iv-snap-image-wrap"><img class="iv-snap-image" src="http://localhost/artworks/art/a/aagaard/rosegard.jpg" style="width: 137.062px; height: 149px;">
<div class="iv-snap-handle" style="top: 0px; left: -130.863px; width: 398.787px; height: 149px;"></div>
</div>
<div class="iv-zoom-slider">
<div class="iv-zoom-handle" style="left: 0px;"></div>
</div>
</div>
<div class="iv-image-view">
<div class="iv-image-wrap"><img class="iv-image iv-large-image" src="http://localhost/artworks/art/a/aagaard/rosegard.jpg" style="visibility: visible; width: 597px; height: 649px; left: 570px; top: 0px; max-width: none; max-height: none;"></div>
</div>
</div>
</div>
<div _ngcontent-pyx-c11="" class="inline-icon" style="background-color: rgb(1, 118, 189);">
<div _ngcontent-pyx-c11="">
<!--bindings={
"ng-reflect-ng-if": "true"
}-->
<a _ngcontent-pyx-c11="" class="image-viewer-tooltip ng-star-inserted">
<!--bindings={
"ng-reflect-ng-if": "true"
}--><span _ngcontent-pyx-c11="" class="tooltiptext filterTooltip ng-star-inserted"><span _ngcontent-pyx-c11="">Show only PDF:</span><i _ngcontent-pyx-c11="" class="material-icons">close</i></span><i _ngcontent-pyx-c11="" class="material-icons footer-icon" style="color: white;">picture_as_pdf</i></a>
</div>
<!--bindings={
"ng-reflect-ng-if": "false"
}-->
</div><i _ngcontent-pyx-c11="" class="material-icons prev">keyboard_arrow_left</i><i _ngcontent-pyx-c11="" class="material-icons next">keyboard_arrow_right</i>
<div _ngcontent-pyx-c11="" class="footer-info" style="background-color: rgb(1, 118, 189);"><span _ngcontent-pyx-c11="" id="current">1</span>/<span _ngcontent-pyx-c11="" class="total">1</span></div>
</div>
</app-image-viewer>
</div>
All i'm trying to do is apply following to the rendered HTML by simply defining them in SCSS but it's not seem to be working.
.iv-snap-view{
visibility: visible !important;
opacity: 1;
}
.image-gallery-2{
visibility: hidden;
}
As the component's style is encapsulated (You can read more about this here), you have two options:
Create a global stylesheet and add the styles needed there, or just copy the global styles into src/styles.css
Use ::ng-deep. You can find more info here
Applying the ::ng-deep pseudo-class to any CSS rule completely disables view-encapsulation for that rule. Any style with ::ng-deep applied becomes a global style. In order to scope the specified style to the current component and all its descendants, be sure to include the :host selector before ::ng-deep. If the ::ng-deep combinator is used without the :host pseudo-class selector, the style can bleed into other components.
Note: Even though the ::ng-deep is deprecated, it is not specified when it will be removed as there is no alternative for now.
I am having trouble trying to have a responsive grid of 3 boxes with some aligned content inside using the library Bulma. I would like to make it work still maintaining the level inside a box if possible.
Any help would be appreciated.
This is the result I expect:
But when decreasing the width, it breaks:
This is the code I am using:
<div className="columns sub">
{this.props.options.map(option => (
<div className="column is-one-third" key={option.id}>
<div
name={option.id}
className={
`box ` +
(this.props.optionToBeChosen === option.id
? "box-is-active"
: "")
}
onClick={() => this.props.onClick(option.id)}
>
<div className="level is-mobile">
<div className="level-item level-left">
<div>
<p className="box-text-title">{option.title}</p>
<p className="box-text-small">{option.description}</p>
<p className="box-text-small">{option.description2}</p>
</div>
</div>
<div className="level-item level-right has-text-right">
<div>
<p className="box-text-demo">{option.cta}</p>
</div>
</div>
</div>
</div>
</div>
))}
</div>
The Bulma levels are explicitly told not to shrink
.level-left, .level-right {
flex-basis: auto;
flex-grow: 0;
flex-shrink: 0;
}
You'll have to override that to get the levels to not break out of the .box elements.
Rather than overriding ALL level items, I suggest you add a custom class to those levels that you want to be able to shrink.
Something like
<div class="level is-mobile level-is-shrinkable">
Level items here...
</div>
<style>
.level-is-shrinkable .level-left,
.level-is-shrinkable .level-right {
flex-shrink: 1;
}
</style>
In my case, I had to add a third styling condition for centered level-item elements:
.level-is-shrinkable .level-left,
.level-is-shrinkable .level-item,
.level-is-shrinkable .level-right {
flex-shrink: 1;
}
Many thanks to just-a-web-designer for his|her answer.
I want to change the middle view of the current view when the links are clicked. one link is to view the iphone and the other one is to view the tablet. Default view should be iphone. Other than that anything in the view should not be changed with the click. I don't want to toggle between the views. Just load the view with the click on the link.
Below is the html code which I tried.
<div class="mobile-area">
<p>Mobile App</p>
<a class="mobile-icon current-device" href ng-click="iphoneView= !iphoneView"></a>
<a href ng-click="tabletView = !tabletView" class="tablet-icon"></a>
</div>
<div class="mobile-preview" ng-class="{'iphone': iphoneView}">
<div class="mobile-wrapper">
<div class="mobile-simulator">
<me-iphone tmp-url="{{appTemplateUrl}}"></me-iphone>
</div>
</div>
</div>
<div class="mobile-preview" ng-class="{'tablet': tabletView}">
<div class="mobile-wrapper">
<div class="mobile-simulator">
<me-tablet tmp-url="{{appTemplateUrl}}"></me-tablet>
</div>
</div>
</div>
Below is the css code.
.iphone {
position: relative;
background: url(../../../../images/iphone-bg.png) no-repeat;
width: 100%;
height: 100%;
padding-top: 58%;
border-radius: 1em;
float: none;
}
.tablet {
position: relative;
background: url(../../../../images/tablet.jpg) no-repeat;
width: 200%;
height: 100%;
padding-top: 58%;
border-radius: 1em;
float: none;
}
I tried different methods but nothing is working for me. Please tell me a way to load the views without toggling to the same html page.
Try this:
ng-class="tabletView ? 'tablet' : 'iphone'"
Default will be iphone. You don't need second iphoneView variable at all (if you have just these 2 views).
Try this?
<div class="mobile-area">
<p>Mobile App</p>
<a class="mobile-icon current-device" href ng-click="iphoneView=true;tabletView=false"></a>
<a href ng-click="tabletView=true;iphoneView=false" class="tablet-icon"></a>
</div>
<div class="mobile-preview" ng-class="{'iphone': iphoneView, 'tablet': tabletView}">
<div class="mobile-wrapper">
<div class="mobile-simulator">
<me-iphone ng-show="iphoneView" tmp-url="{{appTemplateUrl}}"></me-iphone>
<me-tablet ng-show="tabletView" tmp-url="{{appTemplateUrl}}"></me-tablet>
</div>
</div>
</div>
EDIT: according to karaxuna's answer, you can use just one variable
<div class="mobile-area">
<p>Mobile App</p>
<a class="mobile-icon current-device" href ng-click="tabletView=false"></a>
<a href ng-click="tabletView=true" class="tablet-icon"></a>
</div>
<div class="mobile-preview" ng-class="tabletView ? 'tablet' : 'iphone'">
<div class="mobile-wrapper">
<div class="mobile-simulator">
<me-iphone ng-show="!tabletView" tmp-url="{{appTemplateUrl}}"></me-iphone>
<me-tablet ng-show="tabletView" tmp-url="{{appTemplateUrl}}"></me-tablet>
</div>
</div>
</div>
I want to change the background color of last nested element. I am using following css but it is not working
.cd-timeline > .year-wrapper > .cd-timeline-block:last-of-type{
background-color:red;
}
i also tried
#cd-timeline .year-wrapper .cd-timeline-block:last-of-type{
background-color:red;
}
What am i doing wrong can we use last-of-type element with class
Fiddle http://fiddle.jshell.net/shfh0x63/2/
<div class="timeline-wrapper">
<div class="cd-container" id="cd-timeline">
<div class="year-wrapper">
<div class="cd-timeline-block">1</div>
<div class="cd-timeline-block">2</div>
<div class="cd-timeline-block">3</div>
</div>
<div class="year-wrapper">
<div class="cd-timeline-block">4</div>
<div class="cd-timeline-block">5</div>
</div>
<div class="year-wrapper">
<div class="cd-timeline-block">6</div>
<div class="cd-timeline-block">7</div>
<div class="cd-timeline-block">8</div>
<div class="cd-timeline-block">change background color of this only</div>
</div>
</div>
</div>
You have use undefined selector (.cd-timeline instead of #cd-timeline - in HTML you have ID, not class). Then you need to add last-of-type to .year-wrapper too
#cd-timeline > .year-wrapper:last-of-type > .cd-timeline-block:last-of-type{ background-color:red;}
^ ^^^^^^^^^^^^^
http://fiddle.jshell.net/shfh0x63/3/
This is the easiest way of doing it using :last-child
(Demo)
.year-wrapper:last-child .cd-timeline-block:last-child {
background-color: red;
}