Menu item - long text -not aligned properly with other items

Forum rules
Please note that response time for technical support is within 3-5 business days.
sk77
Posts: 62
Joined: 18 Sep 2016, 18:30

17 Feb 2017, 02:42

Hello,

Please take a look at the image below.. when there is a menu item with long text, it is not aligned properly with other menu items..

Image

Primeng 2.0
Ultima 2.0.3

Thank you
SK

User avatar
DarthMaul
Posts: 582
Joined: 23 Nov 2015, 21:20

17 Feb 2017, 08:36

We will review this and get back to you.

sk77
Posts: 62
Joined: 18 Sep 2016, 18:30

03 Mar 2017, 00:52

any update on this issue?

User avatar
DarthMaul
Posts: 582
Joined: 23 Nov 2015, 21:20

03 Mar 2017, 08:40

We have replicated the issue and working on a fix right now.

User avatar
DarthMaul
Posts: 582
Joined: 23 Nov 2015, 21:20

16 Mar 2017, 10:08

Hi,

Inside the assets/sass/layout/_main.scss

You can change the following CSS like this as a workaround

Code: Select all

.layout-container .ultima-menu li a span {
    display: inline-block; (Delete)
    display: inline; (Add)
    vertical-align: middle;
    word-break: break-all; (Add)
}
We created an issue about this we will continue to review this problem. You can check the state of issue from here ;

https://github.com/primefaces/ultima-ng/issues/54

sk77
Posts: 62
Joined: 18 Sep 2016, 18:30

20 Mar 2017, 20:38

I have tried this.. it is not perfect though..

http://imgur.com/a/eVawX

after the word wrap, long text is not aligned with the first line..also wrapping does not happen after a word is complete.. it is cutting off the second long text

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

20 Mar 2017, 22:59

Please try;

Code: Select all

.layout-container .ultima-menu li a i:first-child{
    position: absolute;
}

.layout-container .ultima-menu li a span {
    padding-left: 2.2em;
}
Screenshot;
Image

sk77
Posts: 62
Joined: 18 Sep 2016, 18:30

22 Mar 2017, 20:53

no luck.. this is what I have..can you please compare it with your code?

.layout-container .ultima-menu li a i:first-child {
display: inline-block;
vertical-align: middle;
margin-right: .5em;
position: absolute;
font-size: 1.5em; }

.layout-container .ultima-menu li a span {
display: inline;
vertical-align: middle;
word-break: break-all;
padding-left: 2.2em;
}

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

22 Mar 2017, 21:49

Please remove other changes and add only my css;

Code: Select all

.layout-container .ultima-menu li a i:first-child{
    position: absolute;
}

.layout-container .ultima-menu li a span {
    padding-left: 2.2em;
    padding-right: 1em; /* OPTIONAL */
}

Full code;

Code: Select all

.layout-container .ultima-menu li a i:first-child {
    display: inline-block;
    vertical-align: middle;
    margin-right: .5em;
    font-size: 1.5em;
    position: absolute;
}
.layout-container .ultima-menu li a span {
    display: inline-block;
    vertical-align: middle;
    padding-left: 2.2em;
    padding-right: 1em; /* OPTIONAL */
}

sk77
Posts: 62
Joined: 18 Sep 2016, 18:30

23 Mar 2017, 16:14

Perfect!!!.. Thank you for your help.. appreciate it

Post Reply

Return to “Ultima - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests