Styling messed up on toolbar

[zeroasterisk]

I get "Draw" text on all my controls in the toolbar, when I add this...

• is there extra CSS I should have to add?
• is the "global" L in your code importable? Is there a chance that's our problem, since I don't have L in global scope anywhere? (es6 import modules all the way)
• I'm trying to set this up in react-storybook which is awesome - but it's been a bit of a pain getting leaflet + css in place... thoughts?

    <Map {...pickMapProps(mapData)}>
      <TileLayer
        url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      />
      <FeatureGroup>
        <EditControl
          position='topright'
          onEdited={props.onChanged}
          onCreated={props.onChanged}
          onDeleted={props.onChanged}
          draw={{
            rectangle: false
          }}
        />
          <Circle center={[51.51, -0.06]} radius={200} />
      </FeatureGroup>
    </Map>

[zeroasterisk]

Here's a public example (as far as it goes) https://zeroasterisk.github.io/react-leaflet-polytools/ https://github.com/zeroasterisk/react-leaflet-polytools/blob/master/src/index.js

[alex3165]

Hey, I think they haven't updated their styles so I have pushed an update of the examples, I managed to solve it by using https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.2/leaflet.draw.css and I have added this css rule to my css:

  .sr-only {
    display: none;
  }

You can check the examples for more details

[zeroasterisk]

I have updated things, with your new CSS and their new CSS and the images... it's better (no wonky texts) and it works for me locally, but not when deployed because I'm currently relying on CSS --> image url --> static path on a storybook, which doesn't seem to translate well to published on github... I may need to figure out how to make the image URLs come through webpack, or change them to be full URLs to a CDN.

Anyway - though - thanks for your help! https://zeroasterisk.github.io/react-leaflet-polytools/