I'm creating a theme for Highcharts and need to be able to configure the shadow angle on the tooltips. In some configuration areas, shadow allows for an object (ex: plotOptions.pie.dataLabels.shadows) but it seems that the shadow setting on tooltip does not allow this. Is there a workaround or a global setting I'm missing?
You can put css-style on your tooltip, in that way you can setup your shadow like that :
First deactivate the default shadow :
tooltip: {
valueSuffix: '°C',
shadow:false,
useHTML:true,
formatter: function() {
return '<div class="tooltip">Test</div>';
}
// Replace "Test" with the formatter you want, there are good examples
// on their website.
}
And set the style of your tooltip :
div.tooltip {
-moz-box-shadow: 20px 20px 20px #888;
-webkit-box-shadow: 20px 20px 20px #888;
box-shadow: 20px 20px 20px #888;
}
Here is an live example : http://jsfiddle.net/PKFSs/
With that you can do whatever you want on your tooltip.
EDIT :
If you can't use css :
formatter: function() {
return '<div class="tooltip" style="-webkit-box-shadow: 20px 20px 20px #888;box-shadow: 20px 20px 20px #888;">Test</div>';
}
I know it is not the best way, I'm trying to find a better solution, but this one works.
Related
I'm trying to style my Tabs of the BottomNavigation but I'm not being able to do it because of a Nativescript Theme globally installed.
For example, my BottomNav Tab label is being filled with a Nativescript Theme global style, probably for titles, or labels... well, I don't know.
Here is my example... The "Home", because it's selected, should be black. But it's lime because of a globally installed Nativescript Theme.
How could I effectively set this to be black when selected?
I already tried to use CSS:
TabStrip {
background-color: $primary;
color: #FFFFFF;
}
TabStripItem {
color: white;
}
TabStripItem:active {
color: black;
}
TabStripItem Label {
font-size: 12;
}
But didn't worked.
Also, I tried to set the color to this TabStripItem Label and worked but only to be always black. I wish that it could be set dynamically.
I've found it.
I needed to just set this CSS:
TabStripItem:active Label {
color: black;
}
If you click this link it takes you to a few examples on their page.
https://ng.ant.design/components/button/en
I am able to access the buttons and change the color but not the actual blue border. I have tried :active, :hover, :focus, etc..
This is how I access the button for some custom css
.ant-btn-circle {
background-color: $theme-foreground !important;
color: rgb(var(--MainColor)) !important;
}
.ant-btn-circle:focus {
background-color: rgb(var(--MainColor)) !important;
color: $theme-foreground !important;
outline: 0 !important;
}
The outline portion doesn't seem to work... Any tips?
I see something like this that has the blue color but I dont know what it is. --antd-wave-shadow-color
html {
font-family: sans-serif;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-ms-overflow-style: scrollbar;
--antd-wave-shadow-color: #1890ff;
}
Only solution I found so far is creating a theme.less file in your src and adding this:
#import "../node_modules/ng-zorro-antd/ng-zorro-antd.less";
#primary-color: #6D6E70;
So I guess it is the primary color. Would be nice to set it custom. In the css.
I managed to resolve this by setting the transition period for the button's border-color property to 0ms.
So using your example:
.ant-btn-circle {
transition: border-color 0ms;
}
Can anyone tell me how to make ng-input-tag(Angular) scrollable in X-direction.
Currently if I insert the tags then the height of the div increases.
What I want is that If I go on inserting the tags then it should scroll in X-direction
I have tried:
width: auto;height: 34px;overflow-x: auto;overflow-y: hidden;white-space: nowrap;
But it didn't work as expected
So let me know where I am wrong.
I know this is late, but I have seen similar questions go unanswered recently and this one is at the top of a google search for this problem. This can be done using only CSS. If you would like an added visual effect, try customizing the scrollbar.
For the X direction:
This can get a bit ugly if you decide to set a min-width or width on your tags.
The only way I've found to do it in the X direction is using flexbox:
tags-input .tags .tag-list {
display: flex;
flex-direction: row;
overflow-x: auto;
}
tags-input .tags .tag-item {
/* Applying this display class */
display: inline-table;
/* OR set the tag width to ensure that the text is visible */
min-width: 150px; /* Could also use width: 123px */
}
This Github issue is also directly related to the problem.
For the Y direction:
Applying a fixed height to the .tags class and setting the overflow-y to scroll will give you the desired result:
.tags {
height: 34px;
overflow-y: scroll;
}
Try This
simple css to add on tags-input class for scroll on x and y axis
.tags-input {
max-width: 100%;
line-height: 22px;
overflow-y: scroll;
overflow-x: scroll;
height: 65px;
cursor: text;
}
I'm trying to hide the horizontal scrollbar of a Angular ui-grid, but I can't find the right property. (Property enableScrollbars=false removes both.)
Is it possible to remove only the horizontal scrollbar?
With the latest version on Github v3.0.0-rc.16 you can disable horizontal and vertical Scrollbar separately.
Instead of
enableScrollbars = false;
use
enableHorizontalScrollbar = value;
enableVerticalScrollbar = value;
with
value = 0; /* NEVER */
value = 1; /* ALWAYS */
value = 2; /* WHEN_NEEDED */
UPDATE:
If you want to use constants instead of the integer-value, look at corresponding post:
Using ui-grid constants to disable scrollbars
UPDATE:
The option WHEN_NEEDED doesn't seem to be available at the moment.
Maybe this will be changed again, so please look for the available constants in the source code.
The Constants are defined in
https://github.com/angular-ui/ui-grid/blob/master/packages/core/src/js/constants.js
At now, the option WHEN_NEEDED doesn't seem to be available at the moment (ui-grid 3.1.1). So I have worked around by jQuery and CSS:
For simple, we just need do this:
.ui-grid .ui-grid-render-container-body .ui-grid-viewport {
overflow-x: auto !important;
/* or use: overflow-x: hide!important; */
}
To more flexible, we can use CSS class and jQuery. First, we add one more class:
.ui-grid-render-container-body .ui-grid-viewport.no-horizontal-bar {
overflow-x: hidden !important;
}
In controller, we will use this class by jQuery:
$timeout(function(){
if (!!$scope.gridOptions.data) {
$('.ui-grid-render-container-body .ui-grid-viewport').addClass("no-horizontal-bar");
}
});
To hide the blank gap when use selecting and grouping (http://i.imgur.com/veevhgQ.png), we use:
$timeout(function(){
if (!!$scope.gridOptions.data) {
/* To hide the blank gap when use selecting and grouping */
$('.ui-grid-render-container-left .ui-grid-viewport').height($('.ui-grid-render-container-left .ui-grid-viewport').height() + 17);
$('.ui-grid-render-container-body .ui-grid-viewport').addClass("no-horizontal-bar");
}
});
With 17px is height of the gap when we use selecting and grouping feature.
Demo: http://plnkr.co/edit/D9PKPkvuRy2xA6UNNXCp?p=preview
With this solution we can show the horizontal bar again easily.
If you are allowed to use flexboxes:
.ui-grid-render-container-body {
.ui-grid-header {
padding-right: 17px;
.ui-grid-header-viewport {
width: 100%;
.ui-grid-header-canvas {
width: 100%;
.ui-grid-header-cell-wrapper {
display: block;
width: 100%;
.ui-grid-header-cell-row {
display: flex;
min-width: 0;
.ui-grid-header-cell {
flex: 1 1 0;
min-width: #col-min-width;
}
}
}
}
}
}
.ui-grid-viewport {
overflow: auto !important;
display: flex;
.ui-grid-canvas {
flex: auto;
min-width: 0;
[role="row"] {
display: flex;
min-width: 0;
.ui-grid-cell {
flex: 1 1 0;
min-width: #col-min-width;
}
}
}
}
}
Where col-min-width is a minWidth that you would normally set in the gridOptions. Also you have to set the ui-grid-header's padding-right (which is 17px in this example) to the width of your browser's scrollbar with the javascript on certain events: number of rows changed, container resized etc. Scrollbar width = ui-grid-viewport's offsetWidth - clientWidth. Using a hardcoded value for scrollbar width is bad because different browsers have different (and even configurable) values for that.
The default behavior for the jQuery Autocomplete widget is to position the results list one z-index level above the input so that the latter is always visible but in my case this has the undesirable effect of overshadowing the text input element.
I tried to set the z-index value input element at least one level above that of the result list from within the open method like so without much success:
open: function () {
setTimeout(function () {
$(this).css('zIndex', 10000);
}, 1);
},
close: function () {
$(this).css('zIndex', 0);
}
The z-index level for the input element does get promoted to 10000 while that of the results list remains at level 1 but the input element still appears underneath it.
Does anyone have a clue on why this is happening?
The position attributes for the results list and input element are set to absolute and relative respectively. Could that be the cause?
You can do it by adding a simple rule to your styleseet:
#your_input {
position: relative;
z-index: 10000;
}
.ui-autocomplete {
z-index: 9999 !important;
}
That should do all the work, I tested it in the firebug
This code solved problem with z-index for me (jQueryUI 1.8) without any extra CSS or timeouts
open: function () {
$(this).autocomplete('widget').zIndex(10);
}
You don't really need to fiddle with the z-index -
.shadow {
-moz-box-shadow: 2px 2px 2px 1px #ccc;
-webkit-box-shadow: 2px 2px 2px 1px #ccc;
box-shadow: 2px 2px 2px 1px #ccc;
}
DEMO