Center-align Highcharts in Ionic3 - highcharts

I have created one chart using angular2-highcharts based on the https://stackoverflow.com/questions/48002797/cant-bind-to-options-since-it-isnt-a-known-property-of-chart/48004515#48004515 . I got the result as well.
Could anyone please tell me how to center-align the graph in mobile devices? I have tried text-align:center, padding, margin etc.
Please help me with this issue
Edit- Added chart Options
this.chartOptions={
chart: {
type: 'column'
},
title: {
text: 'Highcharts responsive chart'
},
subtitle: {
text: 'Resize the frame to see the axes change'
},
xAxis: {
categories: ['January', 'February', 'March', 'April', 'May', 'June',
'July', 'August', 'September', 'October', 'November', 'December']
},
yAxis: {
labels: {
x: -15
},
title: {
text: 'Items'
}
},
series: [{
name: 'Sales',
data: [434, 523, 345, 785, 565, 843, 726, 590, 665, 434, 312, 432]
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
xAxis: {
labels: {
formatter: function () {
return this.value.charAt(0);
}
}
},
yAxis: {
labels: {
align: 'left',
x: 0,
y: -2
},
title: {
text: ''
}
}
}
}]
}
}
Edit2. Added chart image after adding responsive parameters
Edit: Added HTML and CSS
HTML
<chart id="container" [options] ="chartOptions" text-center></chart>
CSS
page-keyinfo {
svg{
width:100%
}
/* Colors for data series and points. */
$colors: #7cb5ec #434348 #90ed7d #f7a35c #8085e9 #f15c80 #e4d354 #2b908f #f45b5b #91e8e1;
/* Chart background, point stroke for markers and columns etc, */
$background-color: #ffffff;
/* Neutral colors, grayscale by default. The default colors are defined by mixing the background-color
with neutral, with a weight corresponding to the number in the name. */
$neutral-color-100: #000000; /* Strong text. */
$neutral-color-80: #333333; /* Main text and some strokes. */
$neutral-color-60: #666666; /* Axis labels, axis title, connector fallback. */
$neutral-color-40: #999999; /* Credits text, export menu stroke. */
$neutral-color-20: #cccccc; /* Disabled texts, button strokes, crosshair etc. */
$neutral-color-10: #e6e6e6; /* Grid lines etc. */
$neutral-color-5: #f2f2f2; /* Minor grid lines etc. */
$neutral-color-3: #f7f7f7; /* Tooltip backgroud, button fills, map null points. */
/* Colored, shades of blue by default */
$highlight-color-100: #003399; /* Drilldown clickable labels, color axis max color. */
$highlight-color-80: #335cad; /* Selection marker, menu hover, button hover, chart border, navigator series. */
$highlight-color-60: #6685c2; /* Navigator mask fill. */
$highlight-color-20: #ccd6eb; /* Ticks and axis line. */
$highlight-color-10: #e6ebf5; /* Pressed button, color axis min color. */
.highcharts-container {
position: relative;
overflow: scroll !important;
width: 100% !important;
height: 100% !important;
text-align: center;
line-height: normal;
z-index: 0; /* #1072 */
font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
font-size: 12px;
}
.highcharts-root text {
stroke-width: 0;
}
.highcharts-background {
fill: $background-color;
}
.highcharts-plot-border, .highcharts-plot-background {
fill: none;
}
.highcharts-label-box {
fill: none;
}
.highcharts-button-box {
fill: inherit;
}
/* Titles */
.highcharts-title {
fill: $neutral-color-80;
font-size: 1.5em;
}
.highcharts-subtitle {
fill: $neutral-color-60;
}
/* Axes */
.highcharts-axis-line {
fill: none;
stroke: $highlight-color-20;
}
.highcharts-yaxis .highcharts-axis-line {
stroke-width: 0;
}
.highcharts-axis-title {
fill: $neutral-color-60;
}
.highcharts-axis-labels {
fill: $neutral-color-60;
cursor: default;
font-size: 0.9em;
}
.highcharts-grid-line {
fill: none;
stroke: $neutral-color-10;
}
.highcharts-xaxis-grid .highcharts-grid-line {
stroke-width: 0;
}
.highcharts-tick {
stroke: $highlight-color-20;
}
.highcharts-yaxis .highcharts-tick {
stroke-width: 0;
}
.highcharts-minor-grid-line {
stroke: $neutral-color-5;
}
.highcharts-crosshair-thin {
stroke-width: 1px;
stroke: $neutral-color-20;
}
.highcharts-crosshair-category {
stroke: $highlight-color-20;
stroke-opacity: 0.25;
}
/* Credits */
.highcharts-credits {
display: none !important;
}
/* Tooltip */
.highcharts-tooltip {
cursor: default;
pointer-events: none;
white-space: nowrap;
transition: stroke 150ms;
}
.highcharts-tooltip text {
fill: $neutral-color-80;
}
.highcharts-tooltip .highcharts-header {
font-size: 0.85em;
}
.highcharts-tooltip-box {
stroke-width: 1px;
fill: $neutral-color-3;
fill-opacity: 0.85;
}
.highcharts-selection-marker {
fill: $highlight-color-80;
fill-opacity: 0.25;
}
.highcharts-graph {
fill: none;
stroke-width: 2px;
stroke-linecap: round;
stroke-linejoin: round;
}
.highcharts-state-hover .highcharts-graph {
stroke-width: 3;
}
.highcharts-state-hover path {
transition: stroke-width 50; /* quick in */
}
.highcharts-state-normal path {
transition: stroke-width 250ms; /* slow out */
}
/* Legend hover affects points and series */
g.highcharts-series, .highcharts-point {
transition: opacity 250ms;
}
.highcharts-legend-series-active g.highcharts-series:not(.highcharts-series-hover),
.highcharts-legend-point-active .highcharts-point:not(.highcharts-point-hover) {
opacity: 0.2;
}
/* Series options */
/* Default colors */
#for $i from 1 through length($colors) {
$color: nth($colors, $i);
.highcharts-color-#{$i - 1} {
fill: $color;
stroke: $color;
}
}
.highcharts-area {
fill-opacity: 0.75;
stroke-width: 0;
}
.highcharts-markers {
stroke-width: 1px;
stroke: $background-color;
}
.highcharts-point {
stroke-width: 1px;
}
.highcharts-dense-data .highcharts-point {
stroke-width: 0;
}
.highcharts-data-label {
font-size: 0.9em;
font-weight: bold;
}
.highcharts-data-label-box {
fill: none;
stroke-width: 0;
}
.highcharts-data-label text {
fill: $neutral-color-80;
}
.highcharts-data-label-connector {
fill: none;
}
.highcharts-halo {
fill-opacity: 0.25;
stroke-width: 0;
}
.highcharts-point-select {
fill: $neutral-color-20;
stroke: $neutral-color-100;
}
.highcharts-column-series .highcharts-point {
stroke: $background-color;
transition: fill-opacity 250ms;
}
.highcharts-column-series .highcharts-point-hover {
fill-opacity: 0.75;
transition: fill-opacity 50ms;
}
.highcharts-pie-series .highcharts-point {
stroke-linejoin: round;
stroke: $background-color;
}
.highcharts-pie-series .highcharts-point-hover {
fill-opacity: 0.75;
transition: fill-opacity 50ms;
}
.highcharts-pie-series .highcharts-point-select {
fill: inherit;
stroke: inherit;
}
.highcharts-funnel-series .highcharts-point {
stroke-linejoin: round;
stroke: $background-color;
}
.highcharts-funnel-series .highcharts-point-hover {
fill-opacity: 0.75;
transition: fill-opacity 50ms;
}
.highcharts-funnel-series .highcharts-point-select {
fill: inherit;
stroke: inherit;
}
.highcharts-pyramid-series .highcharts-point {
stroke-linejoin: round;
stroke: $background-color;
}
.highcharts-pyramid-series .highcharts-point-hover {
fill-opacity: 0.75;
transition: fill-opacity 50ms;
}
.highcharts-pyramid-series .highcharts-point-select {
fill: inherit;
stroke: inherit;
}
.highcharts-solidgauge-series .highcharts-point {
stroke-width: 0;
}
.highcharts-treemap-series .highcharts-point {
stroke-width: 1px;
stroke: $neutral-color-10;
transition: stroke 250ms, fill 250ms, fill-opacity 250ms;
}
.highcharts-treemap-series .highcharts-point-hover {
stroke: $neutral-color-40;
transition: stroke 25ms, fill 25ms, fill-opacity 25ms;
}
.highcharts-treemap-series .highcharts-above-level {
display: none;
}
.highcharts-treemap-series .highcharts-internal-node {
fill: none;
}
.highcharts-treemap-series .highcharts-internal-node-interactive {
fill-opacity: 0.15;
cursor: pointer;
}
.highcharts-treemap-series .highcharts-internal-node-interactive:hover {
fill-opacity: 0.75;
}
/* Legend */
.highcharts-legend-box {
fill: none;
stroke-width: 0;
}
.highcharts-legend-item text {
fill: $neutral-color-80;
font-weight: bold;
cursor: pointer;
stroke-width: 0;
}
.highcharts-legend-item:hover text {
fill: $neutral-color-100;
}
.highcharts-legend-item-hidden * {
fill: $neutral-color-20 !important;
stroke: $neutral-color-20 !important;
transition: fill 250ms;
}
.highcharts-legend-nav-active {
fill: $highlight-color-100;
cursor: pointer;
}
.highcharts-legend-nav-inactive {
fill: $neutral-color-20;
}
.highcharts-legend-title-box {
fill: none;
stroke-width: 0;
}
/* Loading */
.highcharts-loading {
position: absolute;
background-color: $background-color;
opacity: 0.5;
text-align: center;
z-index: 10;
transition: opacity 250ms;
}
.highcharts-loading-hidden {
height: 0 !important;
opacity: 0;
overflow: hidden;
transition: opacity 250ms, height 250ms step-end;
}
.highcharts-loading-inner {
font-weight: bold;
position: relative;
top: 45%;
}
/* Plot bands and polar pane backgrounds */
.highcharts-plot-band {
fill: $neutral-color-100;
fill-opacity: 0.05;
}
.highcharts-plot-line {
fill: none;
stroke: $neutral-color-40;
stroke-width: 1px;
}
/* Highcharts More */
.highcharts-boxplot-box {
fill: $background-color;
}
.highcharts-boxplot-median {
stroke-width: 2px;
}
.highcharts-bubble-series .highcharts-point {
fill-opacity: 0.5;
}
.highcharts-errorbar-series .highcharts-point {
stroke: $neutral-color-100;
}
.highcharts-gauge-series .highcharts-data-label-box {
stroke: $neutral-color-20;
stroke-width: 1px;
}
.highcharts-gauge-series .highcharts-dial {
fill: $neutral-color-100;
stroke-width: 0;
}
.highcharts-polygon-series .highcharts-graph {
fill: inherit;
stroke-width: 0;
}
.highcharts-waterfall-series .highcharts-graph {
stroke: $neutral-color-80;
stroke-dasharray: 1, 3;
}
/* Highstock */
.highcharts-navigator-mask {
fill: $highlight-color-60; /* navigator.maskFill option */
fill-opacity: 0.25;
}
.highcharts-navigator-mask-inside {
fill: $highlight-color-60; /* navigator.maskFill option */
fill-opacity: 0.25;
cursor: ew-resize;
}
.highcharts-navigator-outline {
stroke: $neutral-color-20;
fill: none;
}
.highcharts-navigator-handle {
stroke: $neutral-color-20;
fill: $neutral-color-5;
cursor: ew-resize;
}
.highcharts-navigator-series {
fill: $highlight-color-80;
stroke: $highlight-color-80;
}
.highcharts-navigator-series .highcharts-graph {
stroke-width: 1px;
}
.highcharts-navigator-series .highcharts-area {
fill-opacity: 0.05;
}
.highcharts-navigator-xaxis .highcharts-axis-line {
stroke-width: 0;
}
.highcharts-navigator-xaxis .highcharts-grid-line {
stroke-width: 1px;
stroke: $neutral-color-10;
}
.highcharts-navigator-xaxis.highcharts-axis-labels {
fill: $neutral-color-40;
}
.highcharts-navigator-yaxis .highcharts-grid-line {
stroke-width: 0;
}
.highcharts-scrollbar-thumb {
fill: $neutral-color-20;
stroke: $neutral-color-20;
stroke-width: 1px;
}
.highcharts-scrollbar-button {
fill: $neutral-color-10;
stroke: $neutral-color-20;
stroke-width: 1px;
}
.highcharts-scrollbar-arrow {
fill: $neutral-color-60;
}
.highcharts-scrollbar-rifles {
stroke: $neutral-color-60;
stroke-width: 1px;
}
.highcharts-scrollbar-track {
fill: $neutral-color-5;
stroke: $neutral-color-5;
stroke-width: 1px;
}
.highcharts-button {
fill: $neutral-color-3;
stroke: $neutral-color-20;
cursor: default;
stroke-width: 1px;
transition: fill 250ms;
}
.highcharts-button text {
fill: $neutral-color-80;
}
.highcharts-button-hover {
transition: fill 0ms;
fill: $neutral-color-10;
stroke: $neutral-color-80;
}
.highcharts-button-pressed {
font-weight: bold;
fill: $highlight-color-10;
stroke: $highlight-color-80;
}
.highcharts-button-disabled text {
fill: $neutral-color-20;
}
.highcharts-range-selector-buttons .highcharts-button {
stroke-width: 0;
}
.highcharts-range-label rect {
fill: none;
}
.highcharts-range-label text {
fill: $neutral-color-60;
}
.highcharts-range-input rect {
fill: none;
}
.highcharts-range-input text {
fill: $neutral-color-80;
}
input.highcharts-range-selector {
position: absolute;
border: 0;
width: 1px; /* Chrome needs a pixel to see it */
height: 1px;
padding: 0;
text-align: center;
left: -9em; /* #4798 */
}
.highcharts-crosshair-label text {
fill: $background-color;
font-size: 1.1em;
}
.highcharts-crosshair-label .highcharts-label-box {
fill: inherit;
}
.highcharts-candlestick-series .highcharts-point {
stroke: $neutral-color-100;
stroke-width: 1px;
}
.highcharts-candlestick-series .highcharts-point-up {
fill: $background-color;
}
.highcharts-ohlc-series .highcharts-point-hover {
stroke-width: 3px;
}
.highcharts-flags-series .highcharts-point {
stroke: $neutral-color-40;
fill: $background-color;
}
.highcharts-flags-series .highcharts-point-hover {
stroke: $neutral-color-100;
fill: $highlight-color-20;
}
.highcharts-flags-series .highcharts-point text {
fill: $neutral-color-100;
font-size: 0.9em;
font-weight: bold;
}
/* Highmaps */
.highcharts-map-series .highcharts-point {
transition: fill 500ms, fill-opacity 500ms, stroke-width 250ms;
stroke: $neutral-color-20;
}
.highcharts-map-series .highcharts-point-hover {
transition: fill 0ms, fill-opacity 0ms;
fill-opacity: 0.5;
stroke-width: 2px;
}
.highcharts-mapline-series .highcharts-point {
fill: none;
}
.highcharts-heatmap-series .highcharts-point {
stroke-width: 0;
}
.highcharts-map-navigation {
font-size: 1.3em;
font-weight: bold;
text-align: center;
}
.highcharts-coloraxis {
stroke-width: 0;
}
.highcharts-coloraxis-marker {
fill: $neutral-color-40;
}
.highcharts-null-point {
fill: $neutral-color-3;
}
/* 3d charts */
.highcharts-3d-frame {
fill: transparent;
}
.highcharts-column-series .highcharts-point {
stroke: inherit; /* use point color */
}
/* Exporting module */
.highcharts-contextbutton {
fill: $background-color; /* needed to capture hover */
stroke: none;
stroke-linecap: round;
}
.highcharts-contextbutton:hover {
fill: $neutral-color-10;
stroke: $neutral-color-10;
}
.highcharts-button-symbol {
stroke: $neutral-color-60;
stroke-width: 3px;
}
.highcharts-menu {
border: 1px solid $neutral-color-40;
background: $background-color;
padding: 5px 0;
box-shadow: 3px 3px 10px #888;
}
.highcharts-menu-item {
padding: 0.5em 1em;
background: none;
color: $neutral-color-80;
cursor: pointer;
transition: background 250ms, color 250ms;
}
.highcharts-menu-item:hover {
background: $highlight-color-80;
color: $background-color;
}
/* Drilldown module */
.highcharts-drilldown-point {
cursor: pointer;
}
.highcharts-drilldown-data-label text, .highcharts-drilldown-axis-label {
cursor: pointer;
fill: $highlight-color-100;
font-weight: bold;
text-decoration: underline;
}
/* No-data module */
.highcharts-no-data text {
font-weight: bold;
font-size: 12px;
fill: $neutral-color-60;
}
}

Related

How to add custom CSS properties to datepicker days with beforeShowDay?

I know how to add CSS classes to specific days with beforeShowDay, but I have no idea how to add an individual CSS property. I'm trying to color specific days with a hex value, and I don't know what those will be ahead of time so I can't just have classes for all of them.
Consider the following example.
$(function() {
var classSize = {
"04192021": 12,
"04202021": 2,
"04212021": 20,
"04222021": 6,
"04232021": 4,
"04262021": 9
};
$("#datepicker").datepicker({
beforeShowDay: function(date) {
var dateString = $.datepicker.formatDate("mmddyy", date);
var result = [
date.getDay() == 0 || date.getDay() == 6 ? false : true,
"blue-0",
"0 Students Attending"
];
if (classSize[dateString]) {
result[1] = "blue-" + classSize[dateString];
result[2] = classSize[dateString] + " Students Attending";
}
return result;
}
});
});
.ui-datepicker td.blue-0 a {
background-color: #FFFFFF;
}
.ui-datepicker td.blue-1 a {
background: #EFEFFF;
}
.ui-datepicker td.blue-2 a {
background: #DFDFFF;
}
.ui-datepicker td.blue-3 a {
background: #CFCFFF;
}
.ui-datepicker td.blue-4 a {
background: #BFBFFF;
}
.ui-datepicker td.blue-5 a {
background: #AFAFFF;
}
.ui-datepicker td.blue-6 a {
background: #9F9FFF;
}
.ui-datepicker td.blue-7 a {
background: #8F8FFF;
}
.ui-datepicker td.blue-8 a {
background: #7F7FFF;
}
.ui-datepicker td.blue-9 a {
background: #6F6FFF;
}
.ui-datepicker td.blue-10 a {
background: #5F5FFF;
color: #fff;
}
.ui-datepicker td.blue-11 a {
background: #4F4FFF;
color: #fff;
}
.ui-datepicker td.blue-12 a {
background: #3F3FFF;
color: #fff;
}
.ui-datepicker td.blue-13 a {
background: #2F2FFF;
color: #fff;
}
.ui-datepicker td.blue-14 a {
background: #1F1FFF;
color: #fff;
}
.ui-datepicker td.blue-15 a {
background: #0F0FFF;
color: #fff;
}
.ui-datepicker td.blue-16 a {
background: #0E0EFF;
color: #fff;
}
.ui-datepicker td.blue-17 a {
background: #0D0DFF;
color: #fff;
}
.ui-datepicker td.blue-18 a {
background: #0B0BFF;
color: #fff;
}
.ui-datepicker td.blue-19 a {
background: #0A0AFF;
color: #fff;
}
.ui-datepicker td.blue-20 a {
background: #0909FF;
color: #fff;
}
.ui-datepicker td.blue-21 a {
background: #0808FF;
color: #fff;
}
.ui-datepicker td.blue-22 a {
background: #0707FF;
color: #fff;
}
.ui-datepicker td.blue-23 a {
background: #0606FF;
color: #fff;
}
.ui-datepicker td.blue-24 a {
background: #0505FF;
color: #fff;
}
.ui-datepicker td.blue-25 a {
background: #0404FF;
color: #fff;
}
.ui-datepicker td.blue-26 a {
background: #0303FF;
color: #fff;
}
.ui-datepicker td.blue-27 a {
background: #0202FF;
color: #fff;
}
.ui-datepicker td.blue-28 a {
background: #0101FF;
color: #fff;
}
.ui-datepicker td.blue-29 a {
background: #0000FF;
color: #fff;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>Date: <input type="text" id="datepicker"></p>
This is one way to do what you want to accomplish. With SASS you could make more variable styling. You may even be able to use things like CSS var().
There is no easy way to access the element as it's created dynamically. You can use widget() to do this; yet you have to run it often and repeatedly.
You might consider batches, so for example Less than 5, gets #EEF. 5 - 10 gets #DDF, 11 - 15 gets #CCF etc.
$(function() {
var classSize = {
"04192021": 12,
"04202021": 2,
"04212021": 20,
"04222021": 6,
"04232021": 4,
"04262021": 9,
"04272021": 29,
"04282021": 16,
"04292021": 27,
"04302021": 7
};
$("#datepicker").datepicker({
beforeShowDay: function(date) {
var dateString = $.datepicker.formatDate("mmddyy", date);
var result = [
date.getDay() == 0 || date.getDay() == 6 ? false : true,
"blue-0",
"0 Students Attending"
];
if (classSize[dateString]) {
switch (true) {
case classSize[dateString] < 5:
result[1] = "blue-1";
break;
case classSize[dateString] < 10:
result[1] = "blue-2";
break;
case classSize[dateString] < 15:
result[1] = "blue-3";
break;
case classSize[dateString] < 20:
result[1] = "blue-4";
break;
case classSize[dateString] < 25:
result[1] = "blue-5";
break;
case classSize[dateString] < 30:
result[1] = "blue-6";
break;
case classSize[dateString] >= 30:
result[0] = false;
result[1] = "blue-7";
break;
}
result[2] = classSize[dateString] + " Students Attending";
}
return result;
}
});
});
.ui-datepicker td.blue-0 a {
background-color: #FFFFFF;
}
.ui-datepicker td.blue-1 a {
background: #CCF;
}
.ui-datepicker td.blue-2 a {
background: #AAF;
}
.ui-datepicker td.blue-3 a {
background: #88F;
}
.ui-datepicker td.blue-4 a {
background: #66F;
}
.ui-datepicker td.blue-5 a {
background: #44F;
color: #FFF;
}
.ui-datepicker td.blue-6 a {
background: #22F;
color: #FFF;
}
.ui-datepicker td.blue-7 a {
background: #00F;
color: #FFF;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>Date: <input type="text" id="datepicker"></p>

Use custom component as tooltip in Angular

Is it possible to use a custom component as tooltip in Angular 8?
Without styling directly the mat-tooltip I'm wondering if one can use a custom component to show as tooltip when using the directive. Like "when showing tooltip, show my component".
Can it be done?
Yes, You can create your custom tooltip directive.
tooltip.directive.ts
import { Directive, Input, ElementRef, HostListener, Renderer2 } from '#angular/core';
#Directive({
selector: '[tooltip]'
})
export class TooltipDirective {
#Input('tooltip') tooltipTitle: string;
#Input() placement: string;
#Input() delay: string;
tooltip: HTMLElement;
offset = 10;
constructor(private el: ElementRef, private renderer: Renderer2) { }
#HostListener('mouseenter') onMouseEnter() {
if (!this.tooltip) { this.show(); }
}
#HostListener('mouseleave') onMouseLeave() {
if (this.tooltip) { this.hide(); }
}
show() {
this.create();
this.setPosition();
this.renderer.addClass(this.tooltip, 'ng-tooltip-show');
}
hide() {
this.renderer.removeClass(this.tooltip, 'ng-tooltip-show');
window.setTimeout(() => {
this.renderer.removeChild(document.body, this.tooltip);
this.tooltip = null;
}, this.delay);
}
create() {
this.tooltip = this.renderer.createElement('span');
this.renderer.appendChild(
this.tooltip,
this.renderer.createText(this.tooltipTitle) // Here is your text
);
this.renderer.appendChild(document.body, this.tooltip);
this.renderer.addClass(this.tooltip, 'ng-tooltip');
this.renderer.addClass(this.tooltip, `ng-tooltip-${this.placement}`);
this.renderer.setStyle(this.tooltip, '-webkit-transition', `opacity ${this.delay}ms`);
this.renderer.setStyle(this.tooltip, '-moz-transition', `opacity ${this.delay}ms`);
this.renderer.setStyle(this.tooltip, '-o-transition', `opacity ${this.delay}ms`);
this.renderer.setStyle(this.tooltip, 'transition', `opacity ${this.delay}ms`);
}
setPosition() {
const hostPos = this.el.nativeElement.getBoundingClientRect();
const tooltipPos = this.tooltip.getBoundingClientRect();
const scrollPos = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
let top, left;
if (this.placement === 'top') {
top = hostPos.top - tooltipPos.height - this.offset;
left = hostPos.left + (hostPos.width - tooltipPos.width) / 2;
}
if (this.placement === 'bottom') {
top = hostPos.bottom + this.offset;
left = hostPos.left + (hostPos.width - tooltipPos.width) / 2;
}
if (this.placement === 'left') {
top = hostPos.top + (hostPos.height - tooltipPos.height) / 2;
left = hostPos.left - tooltipPos.width - this.offset;
}
if (this.placement === 'right') {
top = hostPos.top + (hostPos.height - tooltipPos.height) / 2;
left = hostPos.right + this.offset;
}
this.renderer.setStyle(this.tooltip, 'top', `${top + scrollPos}px`);
this.renderer.setStyle(this.tooltip, 'left', `${left}px`);
}
}
app.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
template: `
<div class="tooltip-example">
<div tooltip="left description" placement="left" delay="500">tootip on left</div>
<div tooltip="top description" placement="top" delay="500">tootip on top</div>
<div tooltip="bottom description" placement="bottom" delay="500">tootip on bottom</div>
<div tooltip="right description" placement="right" delay="500">tootip on right</div>
</div>
`,
styles: [`
.tooltip-example {
text-align: center;
padding: 0 50px;
}
.tooltip-example [tooltip] {
display: inline-block;
margin: 50px 20px;
width: 180px;
height: 50px;
border: 1px solid gray;
border-radius: 5px;
line-height: 50px;
text-align: center;
}
.ng-tooltip {
position: absolute;
max-width: 150px;
font-size: 14px;
text-align: center;
color: #f8f8f2;
padding: 3px 8px;
background: #282a36;
border-radius: 4px;
z-index: 1000;
opacity: 0;
}
.ng-tooltip:after {
content: "";
position: absolute;
border-style: solid;
}
.ng-tooltip-top:after {
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-color: black transparent transparent transparent;
}
.ng-tooltip-bottom:after {
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-color: transparent transparent black transparent;
}
.ng-tooltip-left:after {
top: 50%;
left: 100%;
margin-top: -5px;
border-width: 5px;
border-color: transparent transparent transparent black;
}
.ng-tooltip-right:after {
top: 50%;
right: 100%;
margin-top: -5px;
border-width: 5px;
border-color: transparent black transparent transparent;
}
.ng-tooltip-show {
opacity: 1;
}
`]
})
export class AppComponent {}
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import { TooltipDirective } from './tooltip.directive';
#NgModule({
declarations: [
AppComponent,
TooltipDirective
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

iPad - SVG colors inverted from desktop

take a look at the two images below:
Desktop:
iPad:
Notice the colors of the outer rings? Why are they inverted on the iPad?
.statistic-container {
display: inline-block;
position: relative;
width: 100%;
overflow: hidden;
max-width: 326px;
margin-bottom: 20px;
}
.statistic-container:before {
content: '';
padding-bottom: 100%;
display: block;
}
.statistic-container svg {
fill: transparent;
display: inline-block;
position: absolute;
top: 0;
right: 0;
transform: rotate(270deg);
}
.statistic-container__outer-circle {
stroke: #385fd1;
stroke-width: 16;
stroke-dasharray: 1607;
stroke-dashoffset: -530;
}
.statistic-container__inner-circle {
stroke: #02158b;
stroke-width: 16;
stroke-dasharray: 1607;
}
<div class="statistic-wrapper">
<div class="statistic-container">
<svg viewBox="0 0 500 500">
<circle cx="250" cy="250" r="242" class="statistic-container__inner-circle"></circle>
<circle cx="250" cy="250" r="242" class="statistic-container__outer-circle"></circle>
</svg>
</div>
</div>
Thank you to Paulie_D for the tip.
It looks like ipad doesn't play well when you use negative values on stroke-dashoffset.
The following fixed my issue:
.statistic-container__outer-circle {
stroke: #385fd1;
stroke-width: 16;
stroke-dasharray: 1607;
}
.statistic-container__inner-circle {
stroke: #02158b;
stroke-width: 16;
stroke-dasharray: 1607;
stroke-dashoffset: 1077;
}
I removed the negative offset from the outer circle and added a positive offset on the inner circle.

Rails App Painfully Slow to Load

I have a couple of free tier rails apps running on heroku which run really well and I have no problems with.
But this one
kearns.herokuapp.com
is so slow to load! The dyno doesn't sleep as i'm pinging it every few minutes.
If anyone had time could they give it a quick visit and see what they think it might be? Would really appreciate it!
CSS
#import "twitter/bootstrap/bootstrap";
// Set the correct sprite paths
#iconSpritePath: image-url("twitter/bootstrap/glyphicons-halflings.png");
#iconWhiteSpritePath: image-url("twitter/bootstrap/glyphicons-halflings-white.png");
// Set the Font Awesome (Font Awesome is default. You can disable by commenting below lines)
#fontAwesomeEotPath: font-url("fontawesome-webfont.eot");
#fontAwesomeEotPath_iefix: font-url("fontawesome-webfont.eot?#iefix");
#fontAwesomeWoffPath: font-url("fontawesome-webfont.woff");
#fontAwesomeTtfPath: font-url("fontawesome-webfont.ttf");
#fontAwesomeSvgPath: font-url("fontawesome-webfont.svg#fontawesomeregular");
// Font Awesome
#import "fontawesome/font-awesome";
// Glyphicons
//#import "twitter/bootstrap/glyphicons.less";
// Your custom LESS stylesheets goes here
//
// Since bootstrap was imported above you have access to its mixins which
// you may use and inherit here
//
// If you'd like to override bootstrap's own variables, you can do so here as well
// See http://twitter.github.com/bootstrap/customize.html#variables for their names and documentation
//
// Example:
// #link-color: #ff0000;
p.navbar-text a:hover {
text-decoration:none;
}
#phone a:hover {
text-decoration:none;
}
#overflow {
overflow:hidden;
}
html, body {
overflow-x:hidden;
}
#welcome_container {
overflow:auto;
padding-bottom:40px;
}
.jumbotron {
position:relative;
top:-320px;
background:transparent;
text-align:center;
color:#fff;
margin-bottom:0;
padding-bottom:0px;
}
.jumbotron h1 {
position:relative;
font-weight:bold;
border-bottom:1px solid #fff;
}
span {
color:#F9DF31;
color:#FAED49;
font-family:Tahoma;
font-style:italic;
}
.jumbotron p {
margin-bottom:35px;
}
.test {
position:relative;
top:-320px;
background:transparent;
text-align:center;
color:#fff;
margin-bottom:0;
padding-bottom:0px;
}
.test h1 {
position:relative;
font-weight:bold;
}
.test p {
margin-bottom:35px;
margin-top:25px;;
}
#about_container {
margin-top:70px;
}
#map_container {
background:#fff;
}
// Images
#home_image {
margin-top:40px;
}
.img-polaroid {
margin-top: 80px;
}
// ------
#block {
height:50px;
}
#middle {
padding-bottom:60px;
padding-top:30px;
}
/*
-----------------------------
Navbar
-----------------------------
*/
.navbar-default {
background:#023249;
border-color:#008AE6;
border-color:#fff;
}
.navbar-default .navbar-nav > li > a {
font-size: 13px;
font-family: "Libre Baskerville", sans-serif;
color:#fff;
}
.navbar-default .navbar-nav > li > a:hover {
color:#CAFF42;
color:#F9DF31;
color:#FAED49;
}
.navbar-default .navbar-brand {
color:#fff;
font-size:2em;
color:#FAED49;
font-family:Tahoma;
font-style:italic;
font-weight:bold;
}
.navbar-default .navbar-brand:hover {
color:#FAED49;
color:#FAED49;
}
.navbar-text {
font-size:13px;
padding-top:3px;
font-style:italic;
font-family:sans-serif;
font-family:helvetica;
color:#fff;
}
p.navbar-text a {
color:#fff;
}
p.navbar-text a:hover {
color:#CAFF42;
background:#023249;
color:#F9DF31;
color:#FAED49;
}
p.navbar-text {
color:#fff;
}
// Home Page
.background-image {
height:525px;
background-image:asset-data-url("good.jpg");
background-repeat:no-repeat;
background-size: 1500px 525px;
text-align:center;
background-color:#fff;
}
#media screen and (min-width: 1550px) {
.background-image {
background-size: 100% 525px;
}
}
#welcome_container {
padding-top:30px;
}
#text_block {
height:300px;
background:#000;
margin-top:150px;
opacity:0.5;
}
#image_row {
background:#064780;
background:#F6FAFB;
background:#49708A;
}
// Contact & Map
#map {
height:400px;
width:100%;
margin:0;
background:gray;
}
// Headings
h3.center-text {
text-align:center;
margin-top:40px;
}
h3.home {
text-align:center;
color:#fff;
}
// Paragraphs
p.welcome-text {
color: #333;
font-size: 19px;
font-family: "Libre Baskerville",
serif; line-height: 40px;
text-align: justify;
padding-top: 10px;
}
p.image-text {
color: #333;
font-size: 18px;
font-family: "Libre Baskerville",
serif; line-height: 30px;
text-align: justify;
padding-top: 20px;
}
p.service-text {
color: #333;
font-size: 17px;
font-family: "Libre Baskerville",
serif; line-height: 40px;
text-align: justify;
}
// Misc
.push {
margin-bottom:50px;
}
#no_line {
text-decoration:none;
}
// Buttons
.btn btn-primary {
color:#fff;
}
// Services Page
#service_row_2 {
margin-top:70px;
background-color:#E6E6E6;
}
#service_first_para {
margin-bottom: 40px;
}
#service_header {
margin-top:50px;
background:#F6FAFB;
background:#064780;
background:#A0C2DE;
background:#49708A;
}
#service_heading {
margin-top:45px;
}
#service_h4 {
text-align:center;
}
/*
-------------------------
Catalog Page
-------------------------
*/
#catalog_header {
margin-top:100px;
background:#001A29;
}
#catalog_heading {
margin-top: 45px;
}
#catalog_first_para {
margin-bottom: 40px;
}
#catalog_h4 {
margin-top:50px;
}
/*
-------------------------
About Page
-------------------------
*/
#about_header {
margin-top:50px;
background:#023249;
margin-bottom:40px;
}
#about_div {
height:500px;
}
#about_div_second {
margin-top:50px;
}
#staff_heading {
text-align:right;
}
/*
-----------------------------
Footer
-----------------------------
*/
#footer {
height:100px;
background:#fff;
}
#footer h3 {
color:#fff;
}
Wow, your application.css file (http://kearns.herokuapp.com/assets/application-c515eba896f4bd53f59a05b117a195e0.css right now) is over 16 MB. It looks like you included actual image file there - it should only have the image's url.
You can add free new relic addon on heroku and examin deeply what's going on, how your app react to requests.

How to add column separator in Grid created by using grid.mvc and bootstrap in MVC5?

I've created grid in MVC5 like
.
But I want a vertical line as a column separator like
I'm using grid.mvc (version: 3.0.0) of nugget package and default bootstrap for VS2013(MVC5).
Here is my Gridmvc.css
/***
* Grid.Mvc stylesheet http://gridmvc.codeplex.com/
* This file contains default styles for Grid.Mvc.
*/
/* Grid */
table.grid-table { margin: 0; }
table.grid-table .grid-wrap { padding: 0; position: relative; }
table.grid-table .grid-empty-text { color: #666; }
/* Grid headers */
table.grid-table .grid-header { position: relative; }
table.grid-table .grid-header .sorted-asc .grid-sort-arrow:after { content: " \2193"; }
table.grid-table .grid-header .sorted-desc .grid-sort-arrow:after { content: " \2191"; }
table.grid-table .grid-header > .grid-header-title { border: #999999 1px solid;height: 21px;background-color: #f0f0f0;text-overflow: ellipsis;overflow: hidden; }
/* Grid body */
/*table.grid-table tr.grid-row-selected td { background: #4888C2 !important; color: white; }*/
table.grid-table tr.grid-row-selected td { margin-bottom: 1px; padding-top: 0px; border: #000000 1px solid; height: 21px; }
/*table.grid-table tr.grid-row-selected a { color: white; }*/
table.grid-table tr.grid-row-selected a { margin-bottom: 1px; color: #000000; padding-top: 1px; border: #c4ddff 1px solid; height: 21px; background-color: #a7cdf0; }
/* Grid filtering */
input.grid-filter-input { padding: 4px; font-size: 13px; }
table.grid-table .grid-filter { position: relative; margin-top: 2px; float: right; width: 10px; height: 12px; }
table.grid-table .grid-filter-btn { cursor: pointer; display: block; width: 10px; height: 12px; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAMCAYAAABbayygAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAJFJREFUKFNjkJSU/E8MZvj//78DMRhkoj+6bizYH2SiiIeHx2FjY+P/2DBIDqSGAQSOHTtmYWZm9hldEUgMJAdWBAJAHSzt7e056ApBYiA5qDIIAAoIhIaGroYpArFBYlBpVLB3715DmEIQGyqMCUDWwBRiWIkOYAqhXNwApMjX13c7lIsbgBQBrdWAcqGAgQEAdOGTrvsYKXIAAAAASUVORK5CYII=') no-repeat; }
table.grid-table .grid-filter-btn.filtered { background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAMCAYAAABbayygAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAJNJREFUKFNjYGj//58o/P//fwdiMIOkpKQ/VhOQMFgNULWIh4fHYWNj4//YMEgOpIYBBI4dO2ZhZmb2GV0RSAwkB1YEAkAdLO3t7TnoCkFiIDmoMggACgiEhoauhikCsUFiUGlUsHfvXkOYQhAbKowJQNbAFGJYiQ5gCqFc3ACkyNfXdzuUixuAFAGt1YByoYCBAQAUDanUpFB4UQAAAABJRU5ErkJggg==') no-repeat; }
table.grid-table .grid-filter-buttons { padding: 0; }
table.grid-table .grid-filter-datepicker { font-size: 12px; }
table.grid-table .grid-filter-datepicker table td { padding: 1px!important; }
table.grid-table .grid-filter-datepicker .ui-datepicker { width: auto; }
table.grid-table .grid-dropdown-inner ul.menu-list li a.grid-filter-clear { white-space: nowrap; padding-left: 23px; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAMCAYAAABbayygAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAARpJREFUKFNjYGj//58o/P//fwdiMIOkpKQ/VhOQMFgNULWIh4fHYWNj4//YMEgOpIYBBI4dO2axOC/396GinP/O+vpwRVbGxl92+vluXm1kuASsEKiD5VB99aG3eTH/HxjL/A/RUPsfrqb6f7e21uutlhbRYEUwAFQskOLmun2+lND/0xxM/7dycXzd6OxoCpVGBduWLjXv4+f/v5WF+f9RbtYvfeysqlApBKhhY2Hcxsy0+xAL038nbe3/m8W4ss/Jcx2GSiPAal6uvGtczP9TFOXBHgGJ7RHlmLGOjy0UrAAGzgT7rn7urP/P3NDgv6+v73aQWAMzM+dqTtbJYAUwsNzeyuhImE8GSBHQYxpQYYYJQCcxMDAwAAB7/bt5uWh9FAAAAABJRU5ErkJggg=='); background-position: 3px center; background-repeat: no-repeat; }
table.grid-table .grid-filter-choose.choose-selected { background-color: white!important; cursor: default; color: #999; }
table.grid-table .grid-popup-additional { padding: 3px 0 0 0; }
/* POP-UP */
.grid-dropdown { font-weight: normal; left: -102px; top: 16px!important; min-width: 180px; }
.grid-dropdown-arrow { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAICAYAAADJEc7MAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTAw9HKhAAAAl0lEQVQoU42PMQuFMAyE6xN5gpOjjsIb/P9/o3O3zh27dY25kIPq8DBwmLT35WoQkUEVOmGec84CaW2q7+N+AdCD6M9SisQYTei1jsfyCeCu+vjFVGs1AN++94DRfUOfuNLoKUiyRC5y2F5I8NdaM4P/l0EswvBorQTnfxBhLMRih+2pklIy+eEtjQPu6MNZwIBNbwteMBd5X4ZGHcwL3QAAAABJRU5ErkJggg==") no-repeat; height: 8px; left: 99px; position: absolute; top: -8px; width: 14px; }
.grid-dropdown-inner { padding: 5px 7px; }
.grid-dropdown ul.menu-list { list-style-type: none; margin: 3px 0 0 0; padding: 0; }
.grid-dropdown ul.menu-list li a { text-decoration: none; background-position: 6px center; background-repeat: no-repeat; display: block; padding: 4px 5px; }
.grid-dropdown ul.menu-list li a:hover { background-color: #EEE; text-decoration: none; }
Added these two lines under GridBody in Gridmvc.css :
table.grid-table tr td {border-right: solid 1px #666;}
table.grid-table tr a {border-right: solid 1px #666;}
To add a right border to your table you need to apply it to your table headings and table data tags
Add this to your CSS and place it after the gridmvc.css.
td, th {
border-right: 4px solid black;
}
Hope this helps

Resources