I've been getting a weird problem while trying to use IgniteUI on Angular. Whatever I try the component just wont render right for some reason. This is the component class:
import { Component, ViewChild, OnInit } from '#angular/core';
import {Router} from "#angular/router";
import {ApiService} from "../api.service";
import { IgxCalendarComponent, DateRangeType } from 'igniteui-angular';
#Component({
selector: 'app-calendarform',
templateUrl: './calendarform.component.html',
styleUrls: ['./calendarform.component.css']
})
export class CalendarformComponent implements OnInit {
#ViewChild('calendar', { static: true }) public calendar: IgxCalendarComponent;
public today = new Date(Date.now());
ngOnInit() {
this.calendar.disabledDates = [{
type: DateRangeType.Between,
dateRange: [
new Date(1, 1, 1),
new Date(this.today.getFullYear(), this.today.getMonth(), this.today.getDay())
]
}];
}
constructor(private router: Router, private service: ApiService) {
}
public onSelection(dates: Date | Date[]) {
console.log(JSON.stringify(dates));
}
}
This is the html:
<div class="calendar-section">
<article class="calendar-wrapper">
<igx-calendar #calendar selection="single" (selected)="onSelection($event)" [showWeekNumbers]="true"></igx-calendar>
</article>
</div>
And this the css:
.calendar-wrapper {
max-width: 400px;
min-width: 200px;
margin: 8px;
}
.igx-calendar {
box-shadow: 0 1px 3px 0 rgba(0,0,0,.26), 0 1px 1px 0 rgba(0,0,0,.12), 0 2px 1px -1px rgba(0,0,0,.08);
}
I've tryed everything I could think of, I added the igniteui-angulr.css import in angular.js but nothing changed. The calendar stye just wont get rendered for some reason.
Also another weird thing is that whatever date I click, the one before it gets selected.
This is a comparison of what it looks like and what it should look like
Related
I'm trying to call this auto detect function from my component.ts file to my .scss file and I don't know how to or if it is even possible.
example.component.scss
.content {
display: flex;
align-items: center;
text-align: center;
height: getScreenHeight; <--- ERROR
width: getScreenWidth; <--- ERROR
}
example.component.ts
import { Component, OnInit, HostListener } from '#angular/core';
#Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.scss']
})
export class exampleComponent implements OnInit {
public getScreenWidth: any;
public getScreenHeight: any;
constructor() { }
ngOnInit(): void {
this.getScreenWidth = window.innerWidth;
this.getScreenHeight = window.innerHeight;
}
#HostListener('window:resize', ['$event'])
onWindowResize() {
this.getScreenWidth = window.innerWidth;
this.getScreenHeight = window.innerHeight;
}
}
For reference I am using this functionality detection
Tried to call in html and in the .scss. Nothing has worked and have not found similar problems/questions
CSS is not that dynamic so approaching it from the SCSS file will give you problems, instead use inline styles for such problems.
<div class="content" [ngStyle]="{ height: getScreenHeight width: getScreenWidth }">
<!--content inside here-->
</div>
Try to change styling on focus of the host element. While the following construction works fine in combination with /deep/, it does not work for the host element itself. What's wrong with the CSS code?
:host {
background-color: white;
border: 1px solid lightgray;
padding: 1px 0;
display: inline-block;
}
:host:focus {
border: 2px solid lightskyblue;
}
Thanks for any help.
You could do it programmatically, with a HostListener, Renderer2 and ElementRef:
import { Component, ElementRef, HostListener, Renderer2 } from '#angular/core';
#Component({
selector: 'button[app-button]',
template: '<ng-content></ng-content>',
styleUrls: ['./button.component.css']
})
export class ButtonComponent {
constructor(
private el: ElementRef,
private renderer: Renderer2
) {}
#HostListener('focus', ['$event.target'])
onFocus() {
this.renderer.setStyle(this.el.nativeElement, 'background-color', 'red');
}
#HostListener('blur', ['$event.target'])
onBlur() {
this.renderer.setStyle(this.el.nativeElement, 'background-color', 'buttonface');
}
}
Or you could just use the :host pseudo selector and wrap the :focus in brackets in your component's stylesheet:
:host(:focus) {
background-color: red;
}
Here's an example: stackblitz.
Instead of using the renderer, you can just use hostlistener and hostbinding.
#HostBinding('class.focus') public focus: boolean = false;
#HostListener('focus', ['$event.target']) public onFocus(): void {
this.focus = true;
}
#HostListener('blur', ['$event.target']) public onBlur(): void {
this.focus = false;
}
I have project in angular, i add bottom sheet from angular material and it work.
i try to make the opened popup be sticky to botton and responsive to him But its not work.
my main components:
import { Component, OnInit } from '#angular/core';
import { MatBottomSheet } from '#angular/material/bottom-sheet';
import { PopupsDialogComponent } from '../../../modules/home/components/popups-dialog/popups-dialog.component';
#Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.sass']
})
export class HeaderComponent implements OnInit {
constructor(private _bottomSheet: MatBottomSheet) { }
ngOnInit() {
}
openBottomSheet(): void {
this._bottomSheet.open(PopupsDialogComponent, {
panelClass: 'custom-popup'
});
}
}
main components html:
This the button that i want the dialog be stiky to him
<header>
<div class="container">
<button mat-fab class="mat-success" (click)=openBottomSheet()>+</button>
</div>
</header>
PopupsDialogComponents:
import { Component } from '#angular/core';
import {MatBottomSheetRef} from '#angular/material/bottom-sheet';
#Component({
selector: 'app-popups-dialog',
templateUrl: './popups-dialog.component.html',
styleUrls: ['./popups-dialog.component.sass']
})
export class PopupsDialogComponent {
constructor(private _bottomSheetRef: MatBottomSheetRef<PopupsDialogComponent>) {}
openLink(event: MouseEvent): void {
this._bottomSheetRef.dismiss();
event.preventDefault();
}
}
style.css:
.custom-popup
position: absolute
top: 95px
right: 26%
min-width: 0% !important
thanks a lot
Some of built-in angular components are rendered lately,
I think you can handle that in CSS like:
:host ::ng-deep .custom-popup {
position: absolute
top: 95px
right: 26%
min-width: 0% !important
}
import Vue from 'vue'
import App from './App'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.config.productionTip = false
Vue.use(BootstrapVue);
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})
<template>
<div id="app">
<webpage></webpage>
</div>
</template>
<script>
import webpage from "./components/webpage"
export default {
name: 'app',
components : {
webpage
}
}
</script>
<style>
</style>
i tried to change the background color of element with with vue bind styling using the command v-bind:style='{backgroundColor : color}
but its not at full height, even though i tried to remove the margin and the padding for the body element on CSS but still not working as u can see on the pic thanks
#wrapper{
width: 650px ;
height: auto;
background-color: rgb(198, 241, 200);
margin: 0 auto;
margin-top: 200px;
border-radius: 10px;
}
html,
body {
margin: 0;
padding: 0;
background-color:rgb(250, 28, 65);
}
bind your element to a style object as follows:
<div :style="myStyle" id="wrapper">
in your data object :
data(){
return{
myStyle:{
backgroundColor:"#16a085"
}
...
}
}
You could check this i made several changes in your css rules without affecting the Vue logic
In my Angular4 app, when I'm scrolling down some list and click a list item to see details which is on another route, needs to scroll up to go to top of the page.
I have found some answers to set the scroll to top using JQuery. But is it possible to set the scroll to top using CSS(SASS may be) only?
try this, without any css. In your app component(bootstrap) subscribe the router and check event is a instance of NavigationEnd and then scoll window to top
import {Component, ElementRef, Inject} from '#angular/core';
import {NavigationEnd, Router} from '#angular/router';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
elementRef: ElementRef;
constructor(#Inject(ElementRef) elementRef: ElementRef,
private router: Router) {
this.elementRef = elementRef;
router.events.subscribe((myEvent) => {
if (myEvent instanceof NavigationEnd) {
window.scrollTo(0, 0);
}
});
}
}
Here is working plunker : https://plnkr.co/edit/IyO1Cp?p=preview
Here is quick example using css based smooth scrolling only. And here is another SO thread with more answers.
Hope this helps.
html {
scroll-behavior: smooth
}
a {
display: block;
background: #fff;
padding: 4px;
}
div {
height: 1000px;
width: 200px;
padding: 4px;
}
#red {
background: red;
}
#blue {
background: blue;
}
#green {
background: green;
}
#yellow {
background: yellow;
}
<a name="top"></a>
Red
Blue
Green
Yellow
<div id="red">Top</div>
<div id="blue">Top</div>
<div id="green">Top</div>
<div id="yellow">Top</div>