Override the default css in fillpage.css

[jzadra]

I have a flexdashboard created with Rmarkdown that has a custom span added to the navbar, resulting in the map I have below not being sized problem due to the extra height of the navbar.

The fix in the generated html is known to me: change the height of the dashboard container by replacing

$("html,body,#dashboard").css("height", "100%");

with

$("html,body,#dashboard").css("height", "calc(100% - 30px)");

However, I have been unable to change the generating Rmarkdown/css code to affect this line in the resulting html document.

The line with some context around it (in the html file) is:

if (_options.resize_reload) {
      $(window).on('resize', function() {
        if (_options.isMobile !== isMobilePhone() ||
            _options.isPortrait !== isPortrait()) {
          window.location.reload();
        }
      });
    } else {
      // if in desktop mode and resizing to mobile, make sure the heights are 100%
      // This enforces what `fillpage.css` does for "wider" pages.
      // Since we are not reloading once the page becomes small, we need to force the height to 100%
      // This is a new situation introduced when `_options.resize_reload` is `false`
      if (! _options.isMobile) {
        // only add if `fillpage.css` was added in the first place
        if (_options.fillPage) {
          // fillpage.css
          $("html,body,#dashboard").css("height", "100%");
        }
      }
    }

The referenced fillpage.css in its entirety is:

@media only screen and (min-width: 768px) {
html, body {
  height: 100%;
}

#dashboard-container {
  height: 100%;
}
}

I have tried the following:

1. Adding the above fillpage.css code (with the modified height: calc(100% - 30px) to the Rmarkdown document in the css chunk (other css in this chunk is working).
2. Adding a modified fillpage.css to the css yaml.

In both cases, the generated html referenced above is unaffected.

How can I implement this change in my code so I don't need to manually edit the html document each time I knit?

Note that this is a crosspost from https://stackoverflow.com/questions/68793691/adjusting-leaflet-height-in-flexdashboard

[gadenbuie]

Thanks for the report! It's possible that flexdashboard should be doing something different in general with the #dashboard height. If you could provide a complete reproducible example it would greatly help our investigation. Perhaps you could start with the nuclear waste sites example and remove everything except one map and then add to it the elements you need?

An alternative idea would be to force the custom span you're adding in the navbar to be 30px tall.