Layer switcher loses styles

  • Resolved digbymaass

    (@digbymaass)


    1 year, 5 months ago

    Hi! I like your plugin but I have an annoying problem. The layer switcher drop down doesn’t display correctly as you can see in the page link.
    It’s down to a conflict between something in the theme custom css and… I’m not sure what in Waymark’s css (or Leaflet?). I can’t pin it down in inspector.
    I’m reluctant to mess with our css as there may be unintended consequences, but I’m happy to add any custom css that might sort it out.
    Could you have a look?
    Thanks.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Joe

    (@morehawes)

    Hi @digbymaass,

    Thanks for reaching out and I am sorry to hear your are experiencing this issue. I spent some time on this also, but I’m afraid I too keep running into problems with your site’s styles.

    You have some very broad CSS rules in your style.css that are hard to overcome. For example:

    /* This rules sets dimensions for *ALL* form inputs */
input,
select,
textarea {
  height: 26px;
  padding: 5px 5px;
  padding: 0.5rem 0.5rem;
  width: 100%;
  /* etc */
}

/* This rules adjusts the display of *EVERY* element on the page */
*,
input[type="search"] {
  -webkit-box-sizing: border-box;
  -moz-box-sizing:    border-box;
  box-sizing:         border-box;
  -webkit-appearance: none; /*remove rounded corners from search box*/
  -webkit-border-radius:0; 
  border-radius:0;
}

    These rules are going to affect any content added to the page, so I would recommend making them more specific.

    I hope this helps.

    Cheers,

    Joe

    Thread Starter digbymaass

    (@digbymaass)

    Yes I zeroed in on those too. I’m not sure I can face the struggle! Thanks for looking though.

    Thread Starter digbymaass

    (@digbymaass)

    I got there in the end focusing on those areas you pointed out but had to add 5px padding to the drop down layers box to get rid of an intractable y scroll bar (in our css of course). The box does expand to fit more layers. Whew! Our css could do with a lot more rationalisation.

    .waymark-map-container .leaflet-control.leaflet-control-layers .leaflet-control-layers-list {
    padding-bottom: 5px;
    }

    • This reply was modified 1 year, 5 months ago by digbymaass.
    Plugin Author Joe

    (@morehawes)

    Hi @digbymaass,

    Thanks for updating – I’m glad to hear you figured it out ??

    Reviews appreciated!

    Cheers,

    Joe

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Layer switcher loses styles’ is closed to new replies.