# Category: css

## Getting Error While Adding Font to an Angular 5 Project

I am new to Angular 5.I tried to add an new font for my project.I created a ‘assets’ folder in root directory and created ‘fonts’ and ‘images’ folder under assets folder.I referred an image from images folder in my project by the same way i tried to refer an font.Images are getting referred but fonts are not working for me.I am getting an error like ‘NodeInvocationException: Prerendering failed because of error: Error: Cannot find module […]

## AngularJS – Override CSS

I’ve inherited an AngularJS project which uses the 3rd party grid, Ag-grid. There is an ag-grid-style.css file that has the following: .ag-pinned-left-header.hasCategoryCol .ag-header-cell, .ag-pinned-left-cols-viewport.hasCategoryCol .ag-row .ag-cell { width: calc(100% / 7) !important; } This works great for the grid already in use, the grid is nicely divided into 7 columns. My problem is I have created new code, also using ag-grid, but I need the new grid divided into 6 columns, not 7. I end […]

## Google column chart bars width

I’ve got angular2 and google charts. My component code is: playstoreRatingChart(data) { let dateTitle: any = ‘Date’; let ratingTitle: any = ‘Rating’; let dataTable = [[dateTitle, ratingTitle, { “role”: ‘annotation’ }, { role: ‘style’ }]]; data.playstore_rating.forEach(function (obj) { let newDate = new Date(obj.year, obj.month-1, obj.day) let rating = obj.rating; let rowRating = Number(rating.toFixed(2)); let test = parseFloat(rating.toFixed(2)); let row = [newDate, test, test, ‘width:22; stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 12; fill-color: #BC5679; fill-opacity: 0.2’]; dataTable.push(row) […]

## HTML label center aligned getting cropped on both sides

I’m seeing a bug that is intermittently reproducible only on iPhone Safari (not on any other mobile or desktop browser not even macbook safari). The code looks like: <div style=”overflow: auto; height: calc(100% – 55px); background-color: cyan;”> <ul …><li..></li> <!– some ul containing li omitted for brevity–> <label class=”certainClassname” style=”font-size: small; font-style: italic; width: 100%; text-align: center; background-color: yellow”> {{“msg” | translate}} </label> </div> In other style sheet I have: .certainClassname { cursor: pointer; word-break: […]

## ngIf in Angular 4 is not hiding the clicked <p> tag of a Row but hide all <p> of all Rows [duplicate]

This question already has an answer here: How to show/hide element in *ngFor array, without touching this Array? 1 answer The above picture is current view of my application add,delete are working perfectly.. The second picture is the final view of my app which i made in Jquery which is working absolutely fine. Now I am making same app with angular 4, in which i am facing some problem. The last Picture In angular 4 […]

## Cardflip with Angular

I’m starting to learn AngularJS and am having trouble achieving the card flip. When I try it with normal JQuery and using the toggleclass function on the div with the card class, it works. When I try to use the code below, however it doesn’t. My initial card also shows the backface initially and doesn’t rotate when I click rotate. Here’s my code. Thanks in advance. HTML/Angular <!DOCTYPE html> <html> <head> <meta charset=”ISO-8859-1″> <title>Insert title […]

## ‘Highmaps/Highcharts’ change width, height and positioning on page refresh

I am using ‘highmaps’ in my project on angularjs. The map plots just fine the first time page is rendered (as per the width, height and positioning on the page as I want). But when I route to another page and then back again from the links on the sidebar, the size and positioning are completely different and the alighnment is all messed up. The wanted alignment is The unwanted alignment is Following is my […]

## using /deep/ in angular 4 componet.css causes other components to use the same style. How to solve it?

Note: I use css with angular4 not scss. to be more specific, my number.component.css has, /deep/ .mat-drawer-content{ height:100vh; } other component.css has doesn’t has .mat-drawer-content class but it is common to all the views. It generated by angular-material2. Problem is when i route to number.component and check all the other components also get height:100vh; so it causes my views to break. For now only solution I have is to remove the style parts with /deep/ […]

## CSS transition causing issue with function

I have a panel in my AngularJS App, with a dynamic title, depending on which item from the list a user clicked. If the user clicks the list item labelled Green, green would display in the title, like so: <p>{{$ctrl.colourPhaseTitle.title}} Phase</p> // DYNAMIC TITLE <li class=”bg-phase-green pill-tabs” ng-init=”$ctrl.colourKey(0);” ng-click=”activeTab = 0; $ctrl.colourKey(0);” ng-hide=”activeTab == 0″>Green</li> <li class=”bg-phase-amber pill-tabs” ng-click=”activeTab = 1;$ctrl.colourKey(1)” ng-hide=”activeTab == 1″>Amber</li> //activeTab with the ng-click along with ng-hide/ng-show is what hides/show […]

## How to normalize style of bs-datepicker nested in table

I have a bs-datepicker from angular strap as a td element in a table but the datepicker is inheriting the style of the table (which I would like to keep as is). It is throwing off the look of the datepicker. This is a photo of the broken datepicker I have tried adding :not(.datepicker) in the css for all elements but that did not work. Simplified HTML: <table class=”jobs-table” > <th>datepicker</th> <tr> <td> <i class=”ion-calendar […]