leaflet in README.Rmd breaking pkgdown homepage styling?

Package development
, ,
1

I've been working on a pkgdown template, rotemplate.

For a particular package whose README.Rmd calls leaflet, we see a weird light blue background in part of the navbar on the home page around "part of rOpenSci" and the version label, while other pages of the same package website are fine. The problem doesn't happen on other package websites using the template.

I'm a bit at a loss. How could I solve this? Is this an issue in my template? Could the leaflet embedding be tweaked somehow? Or should I expect pkgdown to prevent this?

Thanks! :slightly_smiling_face:

2

It looks like you have conflicting CSS for the class info, which is where you're getting the weird box.

<div class="info">
          <span class="partof">part of  <a href="https://ropensci.org"><img src="https://d33wubrfki0l68.cloudfront.net/88338b7637e084df5c43e7a9e6293719dbaf10e2/30903/img/icon_lettering_white.svg" height="24" alt="rOpenSci"></a></span>
          <span class="version label label-default version-default" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Released version">0.2.8</span>
        </div>

stplanner info box
stplanner info box2966×972 549 KB

There's CSS styling for this in both the ropensci.css source file, and in the leafletfix.css source file:

CSS styling for info class
CSS styling for info class1010×350 29.2 KB

leafletfix.css has

/* Work around CSS properties introduced on img by bootstrap */

.info {
  padding: 6px 8px;
  font: 14px/16px Arial, Helvetica, sans-serif;
  background: white;
  background: rgba(255,255,255,0.8);
  box-shadow: 0 0 15px rgba(0,0,0,0.2);
  border-radius: 5px;
}

which is what's giving you that white box.

The file in the leaflet GitHub repo is below:

3 Likes
3

Thanks! So I should either rename the CSS class in my template, or find a way to "hermetically" embed the leaflet map. :thinking:

4

I don't know if you can control the ordering of the stylesheets, since I assume leaflet's is embedded somehow.

You could use an id selector in the ropensci css, I imagine, (#info), or invoke !important, but that's the extent of my CSS knowledge. ¯\(°_o)/¯

I did add a link to the leafletfix.css file in my response above, but I'm not sure what the implications would be of trying to fix it there, versus on your end. (In an easy case, I'd think maybe it could be a child of #htmlwidget, or something like that, where you'd just add specificity to the leaflet selector — but, as I said, I'm basically making that up! :grimacing:)

1 Like
5

Thanks! I'm about to test a suggestion of @rlesur's where I edit my CSS, :crossed_fingers: (I'll update the thread!)

6

So, as long as the leaflet stuff isn't really hermetic, here's a quick fix by @RLesur (merci !), that worked! Now in ropensci.css I set values for background-color and box-shadow, and the website looks fine.

.navbar .info {
  float: left;
  height: 50px;
  width: 140px;
  font-size: 100%;
  position: relative;
  margin-left: 5px;
  background-color: #6faef5;
  box-shadow: unset;
}

Thanks @mara for your :female_detective: help!

4 Likes
7

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.

If you have a query related to it or one of the replies, start a new topic and refer back with a link.