I'm trying to put a highchart in a flexbox container. The chart grows with the container just fine, but it doesn't shrink when the container shrinks.
My project uses angularJS and highcharts-ng, although I'm guessing the problem lies with flexbox itself. It's the same in Chrome and IE at least.
Here's a plunkr that illustrates the issue. If you open the embedded view you'll notice when you make the window wider, both charts reflow to fit. But when you make it narrower, the top chart (in a flexbox), remains unchanged.
I put in the reflow button to broadcast the reflow event for highcharts-ng, but it seems to have no effect.
I'm looking for a workaround or any solution that will still let me use flexbox.
Below is the code from Plunkr. It is based on another plunk by the author of highcharts-ng that solved a similar issue for bootstrap containers.
index.html
<!DOCTYPE html>
<html ng-app="highChartTest">
<head>
<link data-require="bootstrap#3.3.2" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body ng-controller="MyHighChart as c">
<div class="page-container">
<div class="side-panel">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li><button ng-click="onReflowButtonPressed()" class="autocompare">Reflow</button></li>
</ul>
</div>
<div class="main-panel">
<highchart id="highchart01" config="c.config" height="300"></highchart>
</div>
</div>
<highchart id="highchart02" config="c.config" height="300"></highchart>
<script data-require="jquery#2.1.3" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script data-require="angular.js#1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script data-require="ui-bootstrap-tpls-0.12.0.min.js#*" data-semver="0.12.0" src="https://rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-0.12.0.min.js"></script>
<script data-require="highcharts#4.0.1" data-semver="4.0.1" src="//cdnjs.cloudflare.com/ajax/libs/highcharts/4.0.1/highcharts.js"></script>
<script data-require="highcharts-ng#0.0.9" data-semver="0.0.9" src="https://rawgit.com/pablojim/highcharts-ng/master/dist/highcharts-ng.min.js"></script>
<script src="app.js"></script>
</body>
</html>
style.css
.page-container {
margin: 20px;
border: 1px solid black;
display: flex;
}
.side-panel {
width: 200px;
flex-shrink: 0;
background-color: #ddd;
}
.main-panel {
margin: 10px;
padding: 20px;
flex-grow: 1;
border: 1px solid blue;
}
.highcharts-container {
width: 100%;
border: 1px solid red;
}
app.js
(function() {
angular.module('highChartTest', ['ui.bootstrap', 'highcharts-ng'])
.controller('MyHighChart', ['$scope', '$timeout', MyHighChart]);
function MyHighChart($scope, $timeout) {
$scope.onReflowButtonPressed = function(){
console.log("broadcasting reflow");
$scope.$broadcast('highchartsng.reflow');
}
var chartId = 'yieldColumns01';
this.widget = {
chartId: chartId,
cols: '12',
title: 'Reflow Test'
};
this.config = {
options: {
chart: { type: 'column' },
legend: { enabled: false},
},
title: { enabled: false, text: ''},
xAxis: { categories: ['A', 'B', 'C', 'D', 'E', ] },
yAxis: { max: 100},
series: [{
name: '2014',
data: [90.9, 66.1, 55.0, 53.2, 51.2]
}],
size: { height: '300' },
// function to trigger reflow in bootstrap containers
// see: http://jsfiddle.net/pgbc988d/ and https://github.com/pablojim/highcharts-ng/issues/211
func: function(chart) {
$timeout(function() {
chart.reflow();
// //The below is an event that will trigger all instances of charts to reflow
//$scope.$broadcast('highchartsng.reflow');
}, 0);
}
};
}
})();
You can either set a non-relative width or flex-basis on the .main-panel container to help Highcharts figure out the parent element's dimensions.
I've also removed the width: 100% on .highcharts-container since it wasn't doing anything.
The original Plunkr works on Safari 9.0.1, so this could be due to differences in how browsers implement the flexbox spec (e.g. related issue with width/height: 100%)
Related
I'm using Tailwind (react/next) and struggle to change the way my scrollbar looks.
It's a single page application and I have been trying to create custom CSS to apply to the first div in my index file, like this:
<div className="no-scroll"> <<<<<<<--------- Adding custom css here
<Head>
<title>Oscar Ekstrand</title>
<link rel="icon" href="/images/favicon.ico" />
</Head>
<main className="flex flex-col no-scroll">
<section ref={heroref}>
<Hero scrollToContacts={scrollToContacts} />
</section>
<section ref={offeringref}>
<Offering />
</section>
<section ref={processref}>
<WhatIDo />
</section>
<section ref={biographyref}>
<CvBar />
</section>
<section ref={skillsetref}>
<Skillset />
</section>
</main>
<section ref={contactsref}>
<Footer />
</section>
</div>
I can get custom CSS classes to work for things like buttons, both with a "plugin-approach" and having a global style sheet. (https://play.tailwindcss.com/zQftpiBCmf)
But I can't understand how to change the look of my scrollbar.
Anyone got an idea?
Tailwind CSS doesn't provide a built-in way to customise the scrollbar styling. However, you can use the various ::-webkit-scrollbar pseudo-elements to style it.
Tailwind playground link: https://play.tailwindcss.com/5samiwyr4v.
#layer utilities {
.scrollbar::-webkit-scrollbar {
width: 20px;
height: 20px;
}
.scrollbar::-webkit-scrollbar-track {
border-radius: 100vh;
background: #f7f4ed;
}
.scrollbar::-webkit-scrollbar-thumb {
background: #e0cbcb;
border-radius: 100vh;
border: 3px solid #f6f7ed;
}
.scrollbar::-webkit-scrollbar-thumb:hover {
background: #c0a0b9;
}
}
yarn add -D tailwind-scrollbar
or
npm install --save-dev tailwind-scrollbar
then
plugins: [
// ...
require('tailwind-scrollbar'),
],
sample
<div class="h-32 scrollbar scrollbar-thumb-gray-900 scrollbar-track-gray-100">
<div class="h-64"></div>
</div>
variants
variants: {
// ...
scrollbar: ['dark']
}
FOR SOME INSTANCE IF YOU WANT TO CHANGE THE WIDTH OF THE SCROLLBAR YOU CAN CUSTOME IN YOUR tailwind.css
#layer utilities {
.scrollbar-medium::-webkit-scrollbar {
width: 12px;
}
}
then
<div class="h-32 scrollbar scrollbar-thumb-gray-900 scrollbar-track-gray-100 scrollbar-medium">
<div class="h-64"></div>
</div>
THERE IS ONLY ONE STYLE FOR SCROLLBAR WHICH IS scrollbar-thin... so customize this way
I've managed to style the scrollbar with Tailwin plugin like this:
// tailwind.config.js
const plugin = require('tailwindcss/plugin');
module.exports = {
// ...
plugins: [
plugin(({ addBase, theme }) => {
addBase({
'.scrollbar': {
overflowY: 'auto',
scrollbarColor: `${theme('colors.blue.600')} ${theme('colors.blue.200')}`,
scrollbarWidth: 'thin',
},
'.scrollbar::-webkit-scrollbar': {
height: '2px',
width: '2px',
},
'.scrollbar::-webkit-scrollbar-thumb': {
backgroundColor: theme('colors.blue.600'),
},
'.scrollbar::-webkit-scrollbar-track-piece': {
backgroundColor: theme('colors.blue.200'),
},
});
}),
],
// ...
};
And use like this:
<div class="scrollbar">
<!-- content -->
</div>
/* For Firefox Browser */
.scrollbar {
scrollbar-width: thin;
scrollbar-color: #000 #fff;
}
/* For Chrome, EDGE, Opera, Others */
.scrollbar::-webkit-scrollbar {
width: 20px;
}
.scrollbar::-webkit-scrollbar-track {
background: #fff;
}
.scrollbar::-webkit-scrollbar-thumb {
background:#000;
}
TailwindCSS's doc changed scrollbar styles by scrollbar:!w-1.5 scrollbar:!h-1.5 scrollbar:bg-transparent scrollbar-track:!bg-slate-100 scrollbar-thumb:!rounded scrollbar-thumb:!bg-slate-300 scrollbar-track:!rounded, the plugin they use
/** #type {import('tailwindcss').Config} */
module.exports = {
mode: 'jit',
content: ['./src/**/*.{html,ts,tsx,js}'],
darkMode: 'media',
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [
// https://github.com/tailwindlabs/tailwindcss.com/blob/ceb07ba4d7694ef48e108e66598a20ae31cced19/tailwind.config.js#L280-L284
function ({ addVariant }) {
addVariant(
'supports-backdrop-blur',
'#supports (backdrop-filter: blur(0)) or (-webkit-backdrop-filter: blur(0))',
);
addVariant('supports-scrollbars', '#supports selector(::-webkit-scrollbar)');
addVariant('children', '& > *');
addVariant('scrollbar', '&::-webkit-scrollbar');
addVariant('scrollbar-track', '&::-webkit-scrollbar-track');
addVariant('scrollbar-thumb', '&::-webkit-scrollbar-thumb');
},
],
};
Addition to that comment : https://stackoverflow.com/a/69410151/18041352
You can add darktheme option just adding
dark:scrollbarkdark or what you want to name that.
<div className="... overflow-auto scrollbar dark:scrollbarkdark> ...
Then add this in your main css file like in that comment above.
.scrollbar::-webkit-scrollbar-track {
background: white;
}
.scrollbardark::-webkit-scrollbar-track {
background: black;
}
...
Extend Tailwind by adding your own base styles on top of Preflight, simply add them to your CSS within a #layer base directive:
//Inside styles.css
#tailwind base;
#tailwind components;
#tailwind utilities;
#layer base {
::-webkit-scrollbar-thumb{
#apply bg-transparent shadow-sm
}
::-webkit-scrollbar{
#apply w-3 bg-transparent
}
::-webkit-scrollbar-thumb{
#apply rounded-none bg-blue-400 /*color trackbar*/
}
}
Check out the documentation [here][1]
[1]: https://tailwindcss.com/docs/preflight
My v-select components should have a fixed width (60px), they fit in a table cell, and I want to prevent them from changing the width after value selected.
They change the width and drop-down arrow moves to the right after selection, so if there a way to decrease the size of an icon or its padding/margin it might be helpful.
Don't really know how to get props of this arrow and how this calls.
Here is the reproducible
https://codesandbox.io/s/competent-dew-eixq2?file=/src/components/Playground.vue
EDIT: Add snippet
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.0.1/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<style>
.select {
max-width: 60px;
max-height: 60px;
font-size: 11px;
}
.col {
max-width: 60px;
max-height: 60px;
}
</style>
</head>
<body>
<div id="app">
<v-app>
<v-row>
<div class="col" v-for="col in cols" :key="col">
<v-select class="select" :items="variants" item-value="name" item-text="name" label="" dense outlined hide-details single-line v-model="selected">
</v-select>
</div>
</v-row>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.10/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.0.1/dist/vuetify.js"></script>
<script>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: {
selected: "",
cols: [1, 2, 3, 4, 5],
variants: [{
id: 0,
name: ""
},
{
id: 1,
name: "1:0"
},
{
id: 2,
name: "0:1"
},
{
id: 3,
name: "1:0 B"
},
{
id: 4,
name: "0:1 B"
},
{
id: 6,
name: "1:0 R"
},
{
id: 7,
name: "0:1 R"
},
{
id: 8,
name: "1:0 F"
},
{
id: 9,
name: "0:1 F"
},
],
},
})
</script>
</body>
</html>
The basic problem is that v-select has some styling (specifically padding and margin) that does not work very well at small widths.
This is the innerHTML of the rendered v-select, with the styles that need reducing
<div class="select...">
<div class="v-input__control">
<div role="button" class="v-input__slot"> <!-- padding-right: 12px; -->
<div class="v-select__slot">
<div class="v-select__selections">
<div class="v-select__selection--comma"> <!-- margin-right: 4px; -->
1:0 B
</div>
</div>
<div class="v-input__append-inner"> <!-- padding-left: 4px; -->
<div class="v-input__icon v-input__icon--append"> <!-- width: 24px; min-width: 24px;-->
<i aria-hidden="true" class="v-icon..."></i>
</div>
</div>
</div>
</div>
</div>
</div>
Aside from those innerHTML changes, you want a fixed width of 60px per column so change
<style>
.select {
max-width: 60px;
...
}
to
<style>
.select {
width: 60px;
...
}
Adjusting Vuetify inner styles
Looking at the Vuetify issues around styling, there's suggestions of using un-scoped style blocks, or deep-scoped style blocks, but neither worked for me. Vuetify have said they are working on a revamp of the way styles are applied to overcome the issues.
Fortunately Vue itself has tools to do it in javascript.
These are the key steps
add a reference to the v-select so that it's accessible in javascript
add a change handler to the v-select so that elements can be re-styled when the user selects something
define the style adjustments in an object so you can easily tweak them
add a method to apply the styles
call the method in mounted() and the v-select #change handler
use Vue.nextTick() to allow Vuetify to style first, then our custom styles are applied
Here's the adjusted code snippet. I put in some severely minimal padding and margins, and maximized the space for the selected value (to avoid text wrapping). You may want to play with the styles as I'm not sure I understood all of the requirements.
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.0.1/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<style>
.select {
width: 60px;
max-height: 60px;
font-size: 11px;
}
.col {
max-width: 60px;
max-height: 60px;
}
</style>
</head>
<body>
<div id="app">
<v-app>
<v-row>
<div class="col" v-for="col in cols" :key="col">
<v-select ref="select" #change="applyCustomStyles"
class="select" :items="variants" item-value="name" item-text="name" label="" dense outlined hide-details single-line v-model="selected">
</v-select>
</div>
</v-row>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.10/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.0.1/dist/vuetify.js"></script>
<script>
const customStyles = {
".v-input__slot": {
padding: "0 0 0 4px",
},
".v-select__selections": {
width: "27px",
},
".v-select__selection--comma": {
margin: "7px 0 7px 0",
},
".v-input__append-inner": {
"padding-left": "0",
},
".v-input__icon": {
width: "14px",
"min-width": "14px",
},
};
new Vue({
el: '#app',
vuetify: new Vuetify(),
mounted() {
this.applyCustomStyles();
},
methods: {
applyCustomStyles() {
Vue.nextTick(() => {
this.$refs.select.forEach((vSelect) => {
Object.entries(customStyles).forEach(([selector, styles]) => {
Object.entries(styles).forEach(([style, value]) => {
vSelect.$el.querySelector(selector).style[style] = value;
});
});
});
});
},
},
data: {
selected: "",
cols: [1, 2, 3, 4, 5],
variants: [{
id: 0,
name: ""
},
{
id: 1,
name: "1:0"
},
{
id: 2,
name: "0:1"
},
{
id: 3,
name: "1:0 B"
},
{
id: 4,
name: "0:1 B"
},
{
id: 6,
name: "1:0 R"
},
{
id: 7,
name: "0:1 R"
},
{
id: 8,
name: "1:0 F"
},
{
id: 9,
name: "0:1 F"
},
],
},
})
</script>
</body>
</html>
Why not a <style> block?
There are suggestions of using an un-scoped style block to override the Vuetify styles.
For example,
<style>
.select .v-input__slot {
padding-right: 4px
}
...
</style>
The problem is the Vuetify styles are getting applied after those declared on the component.
You can do it by applying greater specificity than Vuetify uses, e.g.
<style>
.select.v-text-field.v-text-field--enclosed:not(.v-text-field--rounded)>.v-input__control>.v-input__slot {
padding-right: 4px
}
</style>
gives you this
so you can hunt out all the existing places where a change is necessary and copy the Vuetify selector.
The problems might occur when a new version of Vuetify is used, or the shape of the component is changed. To me, the javascript solution looks more manageable.
1. If you don't care about the appended icon, you can remove it with the use of append-icon prop (pass empty value):
<v-select
class="select"
...
append-icon=""
></v-select>
2. You can override the slot for the icon with your own content:
<v-select
class="select"
...
>
<template #append>
<div class="my-custom-icon">...</div>
</template>
</v-select>
Then add style to your my-custom-icon class to make it appear in one place:
.my-custom-icon {
position: absolute;
left: ...;
right: ...;
}
3. Make use of overflow: hidden property:
<style> // don't add "scoped" attribute, otherwise the style won't be applied
.select .v-input__control {
overflow: hidden;
}
</style>
Hello I have facing same problem but as I am using custom made select from vuetify v-select i can not overwrite CSS because it will change drop-down in whole project and this will be the case for all devloper working on projects
So simple solution will be make container div and give it min-width max width and width as you see fit it will solve your size change issue with table cell
It worked for me as i set my drop-down min width to max-width of container so it will be same same width
Ex
<div :class='container'>
<v-select />
</div>
<style>
. container {
max-width: 9rem // in my case it's the min width for my default selected option
}
</style>
<div id="embedded-feed" style="height:800px;width:400px;"></div>
<script type="text/javascript" src="https://s0.assets-yammer.com/assets/platform_embed.js"></script>
<script type="text/javascript">
yam.connect.embedFeed({
"config": {
"use_sso": false,
"header": false,
"footer": false,
"showOpenGraphPreview": false,
"defaultToCanonical": false,
"hideNetworkName": false,
"defaultGroupId": 8430003
},
"container": "#embedded-feed"
});
</script>
How would I insert CSS into it in order to change the background color of the embedded yammer?
<style>
#embedded-feed { background-color: orange; }
</style>
If I use the above CSS turns it orange, and the immediately reverses.
The embedded content is inside an iframe that got a white background. I'm afraid you cannot change it.
You can sort of manipulate it in a hacky way, by using a pseudo element (::after) on top of the container (#embedded-feed), which has a background and a blend mode:
#embedded-feed {
position: relative;
}
#embedded-feed::after {
content:'';
position: absolute;
left: 0; right: 0; bottom: 0; top: 0;
background: orange;
pointer-events: none;
mix-blend-mode: multiply;
}
<script type="text/javascript" src="https://c64.assets-yammer.com/assets/platform_embed.js"></script>
<div id="embedded-feed" style="height:400px;width:500px;"></div>
<script>
yam.connect.embedFeed({
container: '#embedded-feed',
network: 'fourleaf.com',
feedType: 'group', // can be 'group', 'topic', or 'user'
feedId: '123', // feed ID from the instructions above
config: {
defaultGroupId: 3257958 // specify default group id to post to
}
});
</script>
jsFiddle: https://jsfiddle.net/azizn/40faxryw/
Be careful, this is experimental and has limited browser support as of now (FF32, Chrome 41+, Safari 8+, Opera, No IE).
You can play around with different options, colors and/or opacity:
Cannot think of another solution that does not involve CORS.
MDN - CSS mix-blend-mode
Can I use... mix-blend-mode
Can you please take a look at this demo and let me know how I can separate the .clickme box from the .slidecontent? I need to change the Height of the .slidecontentfor example toheight:300px;` but this also change the grey shadow to 300px
What I need to have is having the .slidecontent with height of 300 and looks like the third (green arrow)
$(function () {
$("#clickme").toggle(function () {
$(this).parent().animate({left:'0px'}, {queue: false, duration: 500});
}, function () {
$(this).parent().animate({left:'-280px'}, {queue: false, duration: 500});
});
});
#slideout {
background: #666;
position: absolute;
width: 300px;
height: 300px;
top: 45%;
left:-280px;
}
#clickme {
float: right;
height: 20px;
width: 20px;
background: #ff0000;
}
#slidecontent {
float:left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slideout">
<div id="slidecontent">
Yar, there be dragonns herre!
</div>
<div id="clickme">
>
</div>
</div>
I am not 100% sure I understand what you are trying to do but your jQuery code refers to the parent of clickme which is slideout, not slidecontent and it is probable that this is causing the undesired effect. Is there a reason you are not referencing slidecontent directly?
For a chrome extension, I am trying to apply a set of CSS rules on some elements injected through a script. I tried separately running the injected html, explicitly linking the CSS file and it works in that case but nothing sort of works this way. Following is the code
Snippet from my manifest.json:
"background": {
"scripts": [ "Scripts/Background/background.js" ]
},
"browser_action": {
"default_icon": "img/icon.png"
//"default_popup": "popup.html"
},
"permissions": [
"bookmarks",
"tabs",
"http://*/*",
"https://*/*",
"activeTab"
],
"web_accessible_resources": [
"HTML/popup.html", "Scripts/External/jquery-2.1.3.min.js", "Scripts/Injected/loadExtUI.js", "Style/extUI.css"
]
My Background script:
// Supposed to be Called when the user clicks on the browser action icon.
function loadExt() {
chrome.tabs.insertCSS(null, { file: "Style/extUI.css" }, function () {
alert("Inserted CSS") //This alert works
});
chrome.tabs.executeScript(null, { file: "Scripts/External/jquery-2.1.3.min.js" }, function () {
chrome.tabs.executeScript(null, { file: "Scripts/Injected/loadExtUI.js" });
});
}
chrome.browserAction.onClicked.addListener(loadExt);
Scripts/Injected/loadExtUI.js:
var popup_root = document.getElementById('chimp_ext_container');
if (popup_root == null) {
$.get(chrome.extension.getURL("HTML/popup.html"), function (data) {
//$(data).appendTo('body');
// Or if you're using jQuery 1.8+:
$($.parseHTML(data)).appendTo('body');
});
} else {
document.body.removeChild(popup_root);
}
Style/extUI.css
#chimp_ext_container {
max-width: 420px !important;
overflow-x: hidden !important;
font-family: Arial, sans-serif !important;
font-size: 12px !important;
margin:1px !important;
padding:10px !important;
border: 1px groove !important;
border-radius: 5px !important;
background-color:aqua;
position: absolute !important;
top:10px !important;
float:right !important;
}
And finally, here is the HTML/pop
<!doctype html>
<html>
<head>
<title>Chimpu</title>
</head>
<body>
<div id="chimp_ext_container">
<h1>Chimpu mera doshtttt!</h1>
</div>
</body>
</html>
The test page where I am running this is my own page which just has a element with no other CSS applied so I am sure, nothing is interfering with my CSS file.
While debugging this, I observed that css styles applied to <p> gets properly seen but not to <div>!