Search icon rendered twice (small screen)

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
ymenager
Posts: 3
Joined: 11 Jun 2011, 23:21

03 Jan 2023, 10:52

The search icon is rendered twice when in small screen mode.

This is typically hidden/fixed by the "Today" button, but if the "Today" is removed (we don't have a use for right side menu), then it's a major problem because the second search icon overlays the first one and it's not even possible to click on it.

To reproduce just remove "Today" button

cetincakiroglu
Posts: 130
Joined: 17 Dec 2021, 09:33

05 Jan 2023, 15:54

Hi,

Could you please attach a screenshot so we can identify the problem?

ymenager
Posts: 3
Joined: 11 Jun 2011, 23:21

31 Jan 2023, 18:21

Well a screenshot doesn't show the problem very well but here it is:

Image

If you look closely you'll notice there's two search icon overlapping, one of them is blocking the input to the correct one (the one that opens the search bar)

cetincakiroglu
Posts: 130
Joined: 17 Dec 2021, 09:33

01 Feb 2023, 10:18

Hi,

Thanks for the instructions we've managed to reproduce the issue, and we're working towards fixing it. Fix will be available in the upcoming release but I'll leave a workaround here after fixing the issue for you until the fixed version of Atlantis is available to download so you won't need to wait for the release.

atakantepe
Posts: 14
Joined: 29 Jan 2019, 13:03

06 Feb 2023, 10:28

Hi ymenager,

We will fix this in the next update, but you can now use this solution.

in the
_breadcrum.scss
change the scss with the one below.
line 83

Code: Select all

  .search-wrapper {
                width: 0;
                opacity: 0;
                position: absolute;
                right: 0;
                background: $topbarSubmenuBg;
                border-radius: 6px;
                transition: all $animationDuration $animationTimingFunction;
   
                input {
                    width: 0;
                }

                i{
                    display: none;
                }

                &.active-search-wrapper {
                    width: 100%;
                    transition: all $animationDuration $animationTimingFunction;
                    opacity: 1;

                    input {
                        width: 100%;
                    }

                    i{
                        display: block;
                    }
                }
            }
Hope you are enjoying the Atlantis. We will update Atlantis to nextgen soon, which will have new apps and features.

Have a nice day

Post Reply

Return to “Atlantis - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 5 guests