Whenever I am setting height and width of ZingChart in percentage, so that it's compatible with all screen sizes, it has no effect.
Example: If I set 1% height and 1% width, nothing as such happens.
I am changing height and width as:
zingchart.render({
id : 'myChart',
data : myConfig,
height: '1%',
width: '1%'
});
You can view the complete code here:
http://jsfiddle.net/xbh2ap18/
ZingChart's height and width inherits from the parent container that you are attaching to. The actual chart is a child of myChart, so you will need to apply css to your container.
zingchart.render({
id : 'myChart',
data : {
type:"line",
series :[
{ values : [1,2,3,4] }
]
},
height: "100%",
width: "100%"
});
html,body,#myChart{
height: 100%;
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div id='myChart'></div>
</body>
</html>
Related
I am working to create some slides using reveal.js (from within R markdown if it matters). Compared to other frameworks (like ioslides or slidy) there are HUGE margins to the left of the text, as in the graphic below.
I've been trying to edit the css to move the text further to the left but to no avail.
Any ideas?
My css style section is:
<style type="text/css">
.reveal p {
text-align: left;
}
.reveal ul {
display: block;
}
.reveal ol {
display: block;
}
Reveal.initialize({ width: 1920, height: 1080, margin: 0.00, });
</style>
After much investigation, I did figure out a solution (at least in Rmarkdown). Specifically, I added the width and height argument under reveal_options in my output header. The settings below look much better for a 16:9 aspect ratio display.
output:
revealjs::revealjs_presentation:
reveal_options:
width: 1280
height: 720
I am building a web app using web components in LitElement.js. I have a div containing most components (let's call it .top) that specifies a grid layout and a background image. In the div I have a custom component (call it <custom-container> that is itself composed of custom components (call each instance <custom-leaf>). The container also uses display: grid and defines a grid-column-gap.
The problem: between each <custom-leaf> nested inside the <custom-container> there is a grid gap, however, it is invisible: instead of "piercing" through the background image, it shows the background image.
Here is some code:
index.html
<style>
.top {
grid-gap: 4px;
display: grid;
background-image: url("../img/background.jpg");
}
</style>
<body>
<div class="top">
<custom-container></custom-container>
</div>
<script src="customContainer.js"/>
<script src="customLeaf.js"/>
</body>
customContainer.js
class CustomContainer extends LitElement {
static get styles() {
return css`
:host {
display: grid;
grid-gap: 4px
}
`
}
render() {
return html`<custom-leaf></custom-leaf><custom-leaf></custom-leaf>`
}
}
Question
How do I remove all the white space around the <paper-button> elements (only) inside a <paper-dialog> element?
So, for example, the hover effect should go all the way to the edge. But I still would like to retain the white space surrounding the paragraph text.
Demo:
Click this JS Bin for working example code.
Special note to Safari users: Use Chrome to view demo.
Attempts:
In the code and demo, I commented all my prior attempts /* No effect */.
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Polymer Bin</title>
<base href="http://element-party.xyz">
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="all-elements.html">
</head>
<body>
<x-element></x-element>
<dom-module id="x-element">
<style>
:host { /* No effect */
display: block; /* No effect */
margin: 0;
}
paper-dialog {
width: 400px;
margin: 0; /* No effect */
padding: 0; /* No effect */
}
paper-button {
width: 100%; /* No effect */
margin: 0; /* No effect */
}
paper-dialog::shadow { /* No effect */
margin: 0 auto; /* No effect */
padding: 0 auto; /* No effect */
}
paper-button:hover{
background-color: black;
color: white;
}
</style>
<template>
<paper-dialog id="dialog">
<p>
I want to remove the white space around the below buttons
so the hover effect extends to the edges of this dialog.
But I want to keep the white space around this text.
</p>
<div class="layout vertical">
<paper-button>One</paper-button>
<paper-button>Two</paper-button>
<paper-button>Three</paper-button>
</div>
</paper-dialog>
<paper-button on-tap="openDialog">Open Dialog</paper-button>
</template>
<script>
Polymer({
is: 'x-element',
openDialog: function(){
this.$.dialog.open();
}
});
</script>
</dom-module>
</body>
</html>
I think you just need to be a bit more specific on your selector try:
paper-dialog div {
margin: 0;
padding: 0;
}
but this will style all the div elements so I'm not sure if that's what you were after.
How to create a layout as shown in the image? The first column left and the second column right should always be the same height, depending of the first column height, using Foundation 5.
Foundation equalizer will make them even, but based on the longer one.
http://foundation.zurb.com/docs/components/equalizer.html
you can use jQuery to do it yourself like this (this can work with many columns, and with any column as the one determining the size:
$(document).ready(function() {
sizeRow();
function sizeRow() {
var $col = $('.sizeRow .size-by-me');
var height = $col.height();
$col.siblings('.size-me').height(height);
}
});
.small-6 {
float: left;
width: 50%;
}
.col1 {
height: 400px;
background-color: #F00;
}
.col2 {
height: 200px;
background-color: #FF0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="row sizeRow">
<div class="small-6 columns size-by-me col1">Column 1</div>
<div class="small-6 columns col2 size-me">Column 2</div>
</div>
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Working with Susy 2 Grid Layouts</title>
<link rel="stylesheet" href="css/app.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
</head>
<body>
<div class="notice"><h3>Susy is GREAT.. But really..!</h3></div>
<div class="container">
<div class="one"><strong>1</strong><br />
#include span(8)<br />
#include prefix(1) <em>//padding</em><br />
</div>
<div class="buttons">
A Pure Button
</div>
<div class="notice">this is some notice</div>
</div>
</body>
</html>
app.scss
#import 'susy';
$susy: (
flow: ltr,
output: float,
math: fluid,
column-width: false,
container: 1140px,
last-flow: to,
columns: 12,
gutters: 1/8,
gutter-position: after,
global-box-sizing: border-box,
debug: (
image: show,
color: rgba(green, .25),
output: background,
toggle: top right
),
);
#include global-box-sizing(border-box);
img {
width: 100%;
height: auto;
}
.notice {
#include full;
background-color: yellow;
}
.notice {
padding: 5px 8px;
}
.container {
#include container;
font-size: small;
}
em {
background-color: yellow;
color: black;
font-weight: bold;
}
.one {
#include span(8); // can be narrow(default), wide & wider
#include prefix(1);
height: 200px;
background-color: blue;
color: white;
}
.buttons {
#include span(1 at 2 fluid isolate); // shouln't this be 1 at 10 as it is still in context of 12???
}
Shouldn't that span shorthand with isolate mode, specify column 10 instead
of 2, as I am still in a context of 12 columns, and first 8 were occupied by
.one div? Everything other in Susy behaves logically and I did not have any
problems but this one trips me off.
However, if I specify:
.buttons {
#include break; // which does clear:both on this element
#include span(1 at 10 fluid isolate);
}
, then I have to tell it to be on 10th column. Is this supposed to work like
this?
Since Susy is not aware of the DOM, all positioning is relative to the default flow. Isolation can work around that, if everything in a given context is isolated — because that pulls everything out of the horizontal flow. But when you isolate only one element, it will position itself off other elements to it's left.