bs4Dash
bs4Dash copied to clipboard
RinteRface
`customArea` is hidden due to height setting of dashboardSidebar
Hi David
Thanks a ton for the great UI framework!
I ran into an issue using the customArea property of the dashboardSidebar . I realized it is hidden because of the height setting of the main sidebar content. If i disable the marked css rule in Chrome Dev Tools the customArea shows up as expected.
not sure whats the implications of the css rule, however when disabling it, the height setting is inherited from the next rule which is height: calc(100% ((3.5rem + 4rem) + 1px)); instead of height: calc(100vh (3.5rem + 1px));
Happy to learn whats the reasoning behind the rule & how to make the customArea work in this context
I am running Chrome Version 103.0.5060.53 (Official Build) (64-bit) on Windows 10 to view the app.
The app itself is developed on a Linux server. Here is the corresponding sessionInfo():
> sessionInfo()
R version 4.1.3 (2022-03-10)
Platform: x86_64-pc-linux-gnu (64-bit)
Running under: Ubuntu 20.04.4 LTS
Matrix products: default
BLAS: /usr/lib/x86_64-linux-gnu/blas/libblas.so.3.9.0
LAPACK: /usr/lib/x86_64-linux-gnu/lapack/liblapack.so.3.9.0
locale:
[1] LC_CTYPE=en_US.UTF-8 LC_NUMERIC=C LC_TIME=de_CH.UTF-8 LC_COLLATE=en_US.UTF-8 LC_MONETARY=de_CH.UTF-8 LC_MESSAGES=en_US.UTF-8 LC_PAPER=de_CH.UTF-8
[8] LC_NAME=C LC_ADDRESS=C LC_TELEPHONE=C LC_MEASUREMENT=de_CH.UTF-8 LC_IDENTIFICATION=C
attached base packages:
[1] stats graphics grDevices utils datasets methods base
other attached packages:
[1] bgs.data.explorer_0.0.0.9000 shiny_1.7.1
loaded via a namespace (and not attached):
[1] bgs.hephaistos_0.1.0.0.0.0.1656321662 plyr_1.8.7 igraph_1.3.1 lazyeval_0.2.2 crosstalk_1.2.0
[6] BiocParallel_1.28.3 usethis_2.1.5 GenomeInfoDb_1.30.1 ggplot2_3.3.6 digest_0.6.29
[11] htmltools_0.5.2 rsconnect_0.8.25 fansi_1.0.3 magrittr_2.0.3 memoise_2.0.1
[16] ScaledMatrix_1.2.0 cluster_2.1.2 config_0.3.1 limma_3.50.3 remotes_2.4.2
[21] matrixStats_0.62.0 pkgdown_2.0.3 prettyunits_1.1.1 colorspace_2.0-3 ggrepel_0.9.1
[26] xfun_0.31.2 dplyr_1.0.9 callr_3.7.0 crayon_1.5.1 RCurl_1.98-1.6
[31] jsonlite_1.8.0 PCAtools_2.6.0 roxygen2_7.1.2 glue_1.6.2 gtable_0.3.0
[36] zlibbioc_1.40.0 XVector_0.34.0 DelayedArray_0.20.0 pkgbuild_1.3.1 BiocSingular_1.10.0
[41] BiocGenerics_0.40.0 scales_1.2.0 DBI_1.1.2 data.tree_1.0.0 miniUI_0.1.1.1
[46] Rcpp_1.0.8.3 xtable_1.8-4 clue_0.3-60 dqrng_0.3.0 rsvd_1.0.5
[51] stats4_4.1.3 MsCoreUtils_1.6.2 bgs.ggtheme_0.1.0.0.0.0.1652949247 DT_0.22 htmlwidgets_1.5.4
[56] ellipsis_0.3.2 fresh_0.2.0 pkgconfig_2.0.3 sass_0.4.1 utf8_1.2.2
[61] here_1.0.1 tidyselect_1.1.2 rlang_1.0.2 reshape2_1.4.4 later_1.3.0
[66] munsell_0.5.0 tools_4.1.3 cachem_1.0.6 cli_3.3.0 generics_0.1.2
[71] QFeatures_1.4.0 devtools_2.4.3 evaluate_0.15 stringr_1.4.0 fastmap_1.1.0
[76] yaml_2.3.5 processx_3.5.3 knitr_1.39 fs_1.5.2 shinycssloaders_1.0.0
[81] purrr_0.3.4 AnnotationFilter_1.18.0 sparseMatrixStats_1.6.0 mime_0.12 ggExtra_0.10.0
[86] xml2_1.3.3 brio_1.1.3 compiler_4.1.3 rstudioapi_0.13 curl_4.3.2
[91] testthat_3.1.4 waiter_0.2.5 tibble_3.1.7 bslib_0.3.1 stringi_1.7.6
[96] ps_1.7.0 desc_1.4.1 lattice_0.20-45 ProtGenerics_1.26.0 Matrix_1.4-0
[101] markdown_1.1 vctrs_0.4.1 pillar_1.7.0 lifecycle_1.0.1 jquerylib_0.1.4
[106] cowplot_1.1.1 bitops_1.0-7 irlba_2.3.5 thematic_0.1.2.1 httpuv_1.6.5
[111] GenomicRanges_1.46.1 R6_2.5.1 promises_1.2.0.1 echarts4r_0.4.4 IRanges_2.28.0
[116] sessioninfo_1.2.2 MASS_7.3-55 assertthat_0.2.1 pkgload_1.2.4 golem_0.3.2
[121] fontawesome_0.2.2 SummarizedExperiment_1.24.0 bs4Dash_2.1.0 rprojroot_2.0.3 shinyWidgets_0.6.4
[126] withr_2.5.0 S4Vectors_0.32.4 GenomeInfoDbData_1.2.7 parallel_4.1.3 MultiAssayExperiment_1.20.0
[131] grid_4.1.3 beachmat_2.10.0 tidyr_1.2.0 rmarkdown_2.14 attempt_0.3.1
[136] DelayedMatrixStats_1.16.0 MatrixGenerics_1.6.0 Biobase_2.54.0
After some more digging I figured out, that the css rule actually comes from fresh, which I use to theme the dashboard.
I now worked around it by overriding with a custom css rule in the script that generates my theme:
"@supports not (-webkit-touch-callout: none){
.layout-fixed .main-sidebar-custom .sidebar {
height: calc(100% - ((3.5rem + 4rem) + 1px)) !important;
}
}"
Feels a bit hacky though, would prefer a cleaner solution. Any suggestions welcome :)
@lhabegger Nice catch! I was having the same issue and couldn't figure out what's going on. Your solution seems to work nicely!
