I am using ChartJs library to create the Line Chart. I have two Charts on the page. I need to resize the Charts on opening of Side Menu. I have used a container div to wrap the canvas element and that worked fine when I only had one chart on the page.
Now when I have two Chart on the page, on opening of Side Menu, only one Chart is getting resized. The observation that I had is that probably resize event is only getting applied to only of the Charts and that's why the div with the class "chartjs-size-monitor" is getting applied to the first Chart. Please note that this div is being created by the ChartJs internally.
below is the class "chartjs-size-monitor" which get's applied as an adjacent tag of canvas tag.
<div class="chartjs-size-monitor"><div class="chartjs-size-monitor-expand"><div class="">
</div></div>
<div class="chartjs-size-monitor-shrink"><div class="">
</div></div></div>
As a result of this tag, the class "chartjs-render-monitor" is getting applied to the canvas tag thus making it responsive.
<canvas id="chart_name1" class="chartjs-render-monitor" style="display:
block; height: 582px; width: 1165px;" width="1747" height="873"></canvas>
However the div element with class "chartjs-size-monitor" is not getting applied to the second Chart.
Kindly let me know what could be done as a workaround in case of having multiple ChartJs Charts on the same page.
FYI, I have already tried making changes to the option of Charts like making
responsive: true,
maintainAspectRatio: false
Related
I have a map, but it repeats. I would like it to stop repeating, and get only one map. How do I do this?
<MapContainer
className='h-[700px] w-[700px] float-right mr-10 mt-10'
center={[51.505, -0.09]} zoom={5} scrollWheelZoom={true}>
<TileLayer
noWrap={true}
url="/allmap.jpg"
/>
</MapContainer>
I see that you added in the URL a path to image url="/allmap.jpg". as it's an image you can inspect on the TileLayer after it's rendered. see on the right side the class which contains this image as background-image add to that class the following.
.tile-layer-class {
background-repeat: no-repeat;
background-size: cover;
}
UPDATE:
The problem was that the image was not shown. because there was a style from leaflet.css hide the image to show. you can override that style by using the below class.
.leaflet-container {
overflow: unset <= or by using !important as well if that didn't reflect.
}
The problem is not related to styling at all. what I figured out that the image is not only rendered just one time in the dom but it's gets rendered for 4 images tags. you can inspect the image and you will see that there're 4 img tags in the dom.
I think you will need to find out the reason for why there're 4 images rendered in the dom.
I tried to be honest to do my best. but I'm not familiar with Next.js
We are currently in the process of migration from Confluence to Docusaurus 2. And we have many anchors in Confluence that we cannot reproduce as links to the headers in Docusaurus. For example, we have an anchor link to a specific table row. What options do we have in Docusaurus to create anchor links?
I tried <a id="..."/> html tag to create anchors and it works except that it seems that navbar's height is not taken into account (even with navbar: { hideOnScroll: true }). For example, we have Literals.md page with the table inside:
|Name |Example |Class |...
|----------------------------------|--------|-------------------|---
|<a id="strliteral"/>String literal|`'text'`|`STRING[N]`, `TEXT`|...
And after following the link Literals.md#strliteral the actual position is hidden by the navigation bar:
Is there any possibility to fix this issue with the navigation bar or to use something else to simulate the Confluence anchor feature?
My current solution is to add a css class to the custom.css that takes the navigation bar into account
.lsdoc-anchor {
display: block;
position: relative;
top: calc(var(--ifm-navbar-height)*-1 - 0.5rem);
}
And use it within an html <a> tag when creating anchors
<a className="lsdoc-anchor" id="anchorid"/>
In JSSOR 26.5, using $ThumbnailNavigatorOptions: {$ChanceToShow: 0} is supposed to completely hide the thumbnails. However, the display:none is applied only to the thumbnavigator element, NOT the container that is injected around thumbnavigator.
As a result, the absolutely-positioned container renders atop the slider. It's invisible because its only child (the thumbnavigator) is not displayed. But it intercepts click events, so it is having an effect on my UI.
In one case, the navigator (bullets) are rendered "below" the hidden thumbnails, which makes the bullets not clickable.
In version 19.0.1. there was no wrapper injected around "thumbnavigator", so the problem was not there. We moved from 19 to 26, and that is where I see the problem.
Solution is to put the display:none on the injected thumbnavigator wrapper, rather than on thumbnavigator itself.
Please resort html order to move bullet navigator above thumbnail navigator.
<!-- Thumbnail Navigator -->
<div data-u="thumbnavigator" class="jssort101" style="position:absolute;left:0px;bottom:0px;width:980px;height:100px;background-color:#000;" data-autocenter="1" data-scale-bottom="0.75">
...
</div>
<!-- Bullet Navigator -->
<div data-u="navigator" class="jssorb032" style="position:absolute;bottom:12px;right:12px;" data-autocenter="1" data-scale="0.5" data-scale-bottom="0.75">
...
</div>
I can't seem to get the paper-dialog to show up correctly all of the time. It will show correctly once then it will show up compressed the next time when I click on it to the point that it looks like a line. Unfortunately, I am unable to add a picture of it since this is my first question.
I have removed my styling sheets from this element but could the other styling sheets of my other element be causing this problem? Any direction of what I should look at would be really helpful.
I setup this paper dialog with the following:
<paper-dialog id='addressDialog'
opened="{{addressDialogOpened}}"
no-cancel-on-outside-click
no-cancel-on-esc-key
entry-animation="slide-from-right-animation"
exit-animation="scale-down-animation">
<div>
<template is="dom-if" if="{{newAddressDialog}}">
<h2>Add an Address</h2>
</template>
<template is="dom-if" if="{{editAddressDialog}}">
<h2>Edit Address Information</h2>
</template>
<hr>
</div>
It has a series of template repeats in it as well. I was reading about the paper dialog and it says that it has space for a header, content area, and buttons. Do I always have to set it up this way in order for it to work?
Additional solution is to add position: fixed; into your paper-dialog style like:
:host paper-dialog { position: fixed; }
So the only way that I saw to fix this terrible problem was to use a style of "min-height" and some percentage of the page. After I included this in my paper-dialog elements the popups were showing perfectly.
How to control the facebook like box stream part height alone. Its normal to reduce height of whole box but if tries to control it fans images are not shown.
The css .fan_box .page_stream{ ...,width:300px} to .fan_box .page_stream{...,width:150px}
i'm asking because the stream box inside iframe
There isn't a way to change the height. Facebook doesn't provide a way to change the height and there isn't a way to change the height using JavaScript and CSS.
Why can't I do it with JavaScript and CSS?
CSS just doesn't apply through an iFrame because thats how an iFrame works -- its basically a window to another page with its own CSS.
Javascript won't allow you to access the content of an iFrame if the URL of the iFrame is different than the page that contains the iFrame. Doing:
document.getElementById('iframeID').contentWindow.document
Will give you the following warning in Chrome.
Unsafe JavaScript attempt to access frame with URL... Domains, protocols and ports must match.
The reason for this is to prevent XSS. Here's more on the Same Origin Policy.
I saw this on the Like Box page and figured I'd respond that you can use the 'data-height' attribute:
data-height="250"
Worked for me. Here's my example:
http://www.skonet.com/Resources/Articles/Index.aspx
you can reduce the height of the encasing div, hide its overflow and if you want push the top of it underneath an absolutely positioned element with a higher z-index like so:
<div style="position:absolute;z-index:2;top:0;left:0;width:300px;height:130px;background-color:#c0c;opacity:0.5;filter:alpha(opacity=50);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";"></div>
<div style="height:140px;width:140px;overflow:hidden;background-color:#0c0; margin-top: 60px;color: #fff;padding: 30px;font-family:arial;">
facebook like box goes here - only the green part will be visible if you make the pink box white and take out the 0.5 opacity and the bottom will get cut off so you can just display whatever part you want
</div>
I suppose you guys still need it and this is the most acurate trick I can provide and its also promising to work with the every day changing of the facebook like box by facebook.
Its a bit tricky but will work for you guys..
create two seprate like box of the same page, and close them in seprate div right in my case
<div class="up1">
facbook like box 1 code
<div class="up2">
facbook like box 2 code
Now in the css
use position absolute to class up1
.up1 {
position:absolute;
z-index:99999;
background-color:white;
}
and in up2
.up2 {
padding-top:87px;
}
What it does it will put the box 1 over the box 2 hiding its facebook like and bla bla making it feel like you have one box that contain picture and streaming of your desired lenght
I was looking around cos I had a problem like this one. Facebook has no standard way of customizing the stream if the faces and header are checked.
The solution is to take them differently. If you need the stream as long as 1000px, just uncheck everything except the stream. This will change its height from the default 300px to whatever value you type in the height field.
See an example below:
<div class="fb-like-box" data-href="https://www.facebook.com/MadeinHeavenEvents" data-width="800" data-height="2000" data-colorscheme="light" data-show-faces="false" data-header="false" data-stream="true" data-show-border="true"></div>
Then if you still need the one with faces, get a new code and set the height differently, then uncheck the others. Below is an example:
<div class="fb-like-box" data-href="https://www.facebook.com/MadeinHeavenEvents" data-width="800" data-height="500" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true"></div>
Don't forget to add the SDK before these codes.
I know it's a long time since this was posted, but here is the solution that helped me today
Yes the data-height to 250 will work as it reduce the outside iframe
Now try to set data-height to 1000 - it is still 300px height,
because the inner div inside the iframe hard coded to 300px and
you can not control that as it is in a cross domain iframe...
<div class="fb-like-box" data-href="http://www.facebook.com/example" data-width="292" data-height="250" data-show-faces="true" data-stream="false" data-header="false"></div>
Adjust the height in this code to what works best for you.