Pin icon to fix menu e near to word.

caiquecardoso
Posts: 9
Joined: 07 Dec 2016, 13:37

11 Dec 2019, 15:25

Hi,

I'm almost finishing my project with Atlantis, but since the begin the pin icon stay near the word and I do not know how to fix it.

Anyone could help me?

Regards,

Caique.

aragorn
Posts: 3847
Joined: 29 Jun 2013, 12:38

20 Dec 2019, 16:22

Hi,

Could you please attach a screenshot about it?

Best Regards,

caiquecardoso
Posts: 9
Joined: 07 Dec 2016, 13:37

02 Jan 2020, 19:22

Hi,

Here is a screenshot, could you see it?

https://www.dropbox.com/s/5him6ykh7350u ... d.jpg?dl=0

Regards,

Caique.

Melloware
Posts: 1487
Joined: 22 Apr 2013, 15:48

02 Jan 2020, 19:40

Just inspect the CSS and add some padding or margin to the style.
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 7.0.8 / PF Extensions 7.0.3

caiquecardoso
Posts: 9
Joined: 07 Dec 2016, 13:37

03 Jan 2020, 14:54

Ok Melloware, but wich css I need to change, do you know?
And why this happen, do you know?

Regards,

Caique.

aragorn
Posts: 3847
Joined: 29 Jun 2013, 12:38

09 Jan 2020, 13:02

Could you please check .menu-pin-button style in the inspector of the browser?
it has float:right style in Atlantis.

Best Regards,

caiquecardoso
Posts: 9
Joined: 07 Dec 2016, 13:37

09 Jan 2020, 21:37

Hi aragorn,

I did it and do not find .menu-pin-button, only .menu-button that has the float: right style, this could be the problem, but how to fix it?
Could be a problem when I created the css files using sass tool?
I did this search when I see your suggestions here: viewtopic.php?t=51819

Best Regards.

aragorn
Posts: 3847
Joined: 29 Jun 2013, 12:38

14 Jan 2020, 08:58

Hi,

Please see my screenshot;
https://www.dropbox.com/s/gtp4pnhv1z2xl ... 6.png?dl=0

Could you please check it again? Could you please attach a screenshot for me?
Could be a problem when I created the css files using sass tool?
- Maybe, you can use SASS command instead of sass tool;
https://sass-lang.com/install

Also, could you please check the following style in _main.scss file?

Code: Select all

//line 348
.menu-pin-button {
Best Regards,

caiquecardoso
Posts: 9
Joined: 07 Dec 2016, 13:37

14 Jan 2020, 15:30

Hi Aragon,

It is different from yours. Please see here https://www.dropbox.com/s/jc8pwihpgsgtg ... n.png?dl=0

In _main.scss looks ok:

.menu-pin-button {
padding: 0px 7px;
float: right;
text-align: center;
@include transition(background-color .3s);

i {
line-height: inherit;
@include transition(transform .3s);
}

&:hover {
background-color: #E0E0E0;
}
}

A thing that I do not say it, but in this project I change from Modena to Altantis, this can say anything?

Thanks for your attention.

Best Regards.

aragorn
Posts: 3847
Joined: 29 Jun 2013, 12:38

21 Jan 2020, 08:32

I think the generator you used may have generated the wrong code. Could you please try it with SASS command?

For now, please use;

Code: Select all

.layout-wrapper .layout-sidebar .layout-tabmenu .layout-tabmenu-contents .layout-tabmenu-content .layout-submenu-title .menu-pin-button {
    padding: 0px 7px;
    float: right;
    text-align: center;
    -moz-transition: background-color 0.3s;
    -o-transition: background-color 0.3s;
    -webkit-transition: background-color 0.3s;
    transition: background-color 0.3s;
 }
 
 .layout-wrapper .layout-sidebar .layout-tabmenu .layout-tabmenu-contents .layout-tabmenu-content .layout-submenu-title .menu-pin-button i {
    line-height: inherit;
    -moz-transition: transform 0.3s;
    -o-transition: transform 0.3s;
    -webkit-transition: transform 0.3s;
    transition: transform 0.3s;
 }
Best Regards,

Post Reply

Return to “Atlantis - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests