滚动条创建重叠的图表div

时间:2020-05-31 23:24:35

标签: javascript jquery css highcharts bootstrap-4

我正在实现一个按钮来生成报告(绘制一些图表)。那些图表在按下按钮之前是<IfModule mod_ssl.c> <VirtualHost *:443> ServerName example.com ServerAlias www.example.com ServerAdmin example@gmail.com DocumentRoot /var/www/html/example/public <Directory /var/www/html/example> Options Indexes FollowSymLinks MultiViews AllowOverride All Order allow,deny allow from all </Directory> CacheQuickHandler off CacheLock on CacheLockPath /tmp/mod_cache-lock CacheLockMaxAge 5 CacheIgnoreHeaders Set-Cookie <Location /> CacheEnable disk CacheHeader on CacheDefaultExpire 600 CacheMaxExpire 86400 CacheLastModifiedFactor 0.5 ExpiresActive on ExpiresByType text/javascript "access plus 1 week" Header merge Cache-Control public FileETag All </Location> RewriteEngine On # match any URL with www and rewrite it to https without the www RewriteCond %{HTTP_HOST} ^(www\.)(.*) [NC] RewriteRule (.*) https://%2%{REQUEST_URI} [L,R=301] ErrorLog ${APACHE_LOG_DIR}/error.log CustomLog ${APACHE_LOG_DIR}/access.log combined Include /etc/letsencrypt/options-ssl-apache.conf SSLCertificateFile /etc/letsencrypt/live/example.com/fullchain.pem SSLCertificateKeyFile /etc/letsencrypt/live/example.com/privkey.pem </VirtualHost> </IfModule> ,因为我正在使用ExpiresByType text/javascript "access plus 1 week" 滚动条也被隐藏了。按下按钮后,我在div上调用了hidden()以定义图表并调用了图表渲染功能,在显示div之后,也创建了滚动条,但由于某种原因bootstrap变得不可访问并且不会触发,因此,导出按钮和配额会被滚动条裁剪。

https://jsfiddle.net/bernardo0marques/m6jqa79r/24/

如果您手动调整窗口大小,则会调用show()并将其固定。有任何解决方法或建议吗?

1 个答案:

答案 0 :(得分:1)

实际上,您正在努力解决的问题与触发chart.reflow无关。在提供的演示中,您尝试在图表初始化之前触发chart.reflow-检查开发人员控制台。

真正的问题与您的按钮位置有关。您为按钮元素使用了style="float: left;"属性,该属性设置了按钮在窗口中的左侧位置-也是第一张图表的容器,并且在计算某些图表元素的初始位置时会产生复杂性-这是一个演示,可以更轻松地了解我在说什么:https://jsfiddle.net/BlackLabel/L70xh95g/

因此,您将需要找到其他不会干扰图表渲染的CSS样式。在常规块模式下,一切正常:

https://jsfiddle.net/BlackLabel/dwrje7f0/

我刚刚删除了style="float: left;"