Missing arrows

Topic: Missing arrows

Flub premium asked 2 years ago

Expected behavior

Animated arrows for accordion should appear, even when default theme is changed.

Actual behavior

Accordion arrows works well, except if I load a theme. Then they disappear... I have no such problem with any other component.

Resources (screenshots, code snippets etc.)

@import './node_modules/mdb-angular-ui-kit/assets/scss/mdb'; $my-theme-primary: #000000; $my-theme-secondary: #69f0ae; $my-theme: mdb-light-theme($my-theme-primary, $my-theme-secondary); @include mdb-theme($my-theme);

Add comment

Arkadiusz Idzikowski staff answered 2 years ago

0 0 Best answer

<p><a href="/profile/?id=57392" target="_blank" rel="nofollow">@Flub</a> Thank you for reporting this problem. I can confirm there is a bug in theme styles, we will take a closer look and fix it as soon as possible. As a workaround for now, please try to add these styles after theme <code>include</code>:</p>

<pre class="prettyprint"><code>.accordion-button:after {
  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%234f4f4f'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 01.708 0L8 10.293l5.646-5.647a.5.5 0 01.708.708l-6 6a.5.5 0 01-.708 0l-6-6a.5.5 0 010-.708z'/></svg>");
}

.accordion-button:not(.collapsed):after {
  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%234f4f4f'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 01.708 0L8 10.293l5.646-5.647a.5.5 0 01.708.708l-6 6a.5.5 0 01-.708 0l-6-6a.5.5 0 010-.708z'/></svg>");
}
</code></pre>

<p>Edit: This problem was fixed in v2.3.0</p>

Please insert min. 20 characters.

@Flub Thank you for reporting this problem. I can confirm there is a bug in theme styles, we will take a closer look and fix it as soon as possible. As a workaround for now, please try to add these styles after theme include:

.accordion-button:after {
  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%234f4f4f'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 01.708 0L8 10.293l5.646-5.647a.5.5 0 01.708.708l-6 6a.5.5 0 01-.708 0l-6-6a.5.5 0 010-.708z'/></svg>");
}

.accordion-button:not(.collapsed):after {
  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%234f4f4f'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 01.708 0L8 10.293l5.646-5.647a.5.5 0 01.708.708l-6 6a.5.5 0 01-.708 0l-6-6a.5.5 0 010-.708z'/></svg>");
}

Edit: This problem was fixed in v2.3.0

Flub premium commented 2 years ago

Indeed, by adding this css, arrows appear fine. I'll use this until future patch.

Many, many, thanks @Arkadiusz Idzikowski for your quick answer & assistance!

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

ForumUser: Premium
Premium support: Yes
Technology: MDB Angular
MDB Version: MDB5 1.6.1
Device: Fujitsu Laptop
Browser: Firefox & Chrome
OS: Windows 11 (10.0.22000.493)
Provided sample code: No
Provided link: No

Flub

Premium support 57Support score
5Questions 3Answers 0Snippets