CODEWITHSUNDEEP
phpmagento2
Chi
Chi

Reputation: 1410

Magento2: css looks wrong in admin

Basically, I set up a new Magento2 instance and though it took me a while, it's working nicely most of the time now. One problem that I just couldn't figure out though is a weird CSS problem in the admin interface. An edit form looks like this:

enter image description here

The problem seems to be with a legend tag, there is actually a fieldset legend at the beginning of the form:

<fieldset class="fieldset admin__fieldset fieldset-wide" id="brand_base_fieldset">
  <legend class="admin__legend legend">
    <span>General Information</span>
  </legend><br>
  ...
</fieldset>

But for some reason, that text is not visible and it seems to be the reason why the form looks so weird. Did anyone else encounter this problem and found a solution? The css files are all correctly included, there are no errors in the console.

Thanks for you help!

Upvotes: 0

Views: 136

Answers (2)

Pournami
Pournami

Reputation: 21

This is a known issue with the legend element in webkit browsers. There are no clean workarounds for the legend element itself, but you could instead add the margin to the first element that follows the legend.

Also, you'll have to explicitly set -webkit-margin-collapse: separate on that element to make it work properly. Try using this:

legend + * {
  -webkit-margin-top-collapse: separate;
  margin-top: 10px;
}

Upvotes: 2

Mayoori - gaja digital agency
Mayoori - gaja digital agency

Reputation: 284

Try clearing all the caches in magento admin panel and check. settings -> cache management.

Upvotes: 0

Related Questions