nav-dropdown doesn't work with nav-right

[sushiljainam]

inside nav-fixed:
I wanted to show a nav-dropdown on the right side.
but hovering on it does not display -- list items.

actually, they are displayed, but behind..
Solve it please.

[Borderliner]

Thanks for reporting. I'll try to fix that asap, and will release a hotfix when it's ready.

[Borderliner]

Fixed the issue, release v1.2.4 as a hotfix. Will be available on CDNJS in a couple of minutes.
https://github.com/Borderliner/Meshki/releases/tag/v1.2.4

[sushiljainam]

Oh! It started working. Thanks for quick response.
BUT
still not properly..
check this code:
check the top-right 'links'

[sushiljainam]

@Borderliner
tell me If you need a screenshot

[Borderliner]

@sushiljainam You mean when the dropdown goes out of the screen? Sending a screenshot would be great.
As a workaround, you can set the right property of the nav-dropdown-content to 0 manually, so it doesn't go out of the screen. But I'll try to come up with a fix as soon as possible.

[sushiljainam]

yes, you got it. ".. dropdown goes out of the screen..".
I will try to make that solution..

inform me, If it can be fixed at your end. thanks!

[Borderliner]

@sushiljainam Please verify that the below code fixes the issue. Put it somewhere in your custom css file:

.nav ul li.nav-right.nav-dropdown .nav-dropdown-content {
  right: 0;
}

.nav ul li.nav-right.nav-dropdown ~ .nav-dropdown .nav-dropdown-content {
  right: auto;
}

It works on the jsfiddle you gave, verify it in your own project. What it really does, is that it sets the right property of the last dropdown (first in html) to 0. Tell me if it works properly, so that I can release another hotfix. Thanks.

[sushiljainam]

@Borderliner Yes, It's working fine. :) thanks.

[sushiljainam]

It's fine for my case.

but check this:
others can get 'improper positioned display' in such use-cases..

<div class="nav fixed">
     <ul>
        <li><a href="logs">logs</a></li>
        <li><a href="resume">resume</a></li>
        <li class="nav-right"><a href="#">configuration/settings</a></li>
        <li class="nav-right nav-dropdown hide-on-mobile">
          <a href="javascript:void(0)" class="nav-dropdown-button">links</a>
          <div class="nav-dropdown-content">
            <a href="#">twitter</a>
            <a href="#">tumbler</a>
            <a href="#">wordpress</a>
            <a href="#">gmail</a>
            <a href="#">mail</a>
          </div>
        </li>
      </ul>
  </div>

where: last nav menu is having more characters "configuration/settings" in this example.
run it somewhere. Hope, it helps.

[Borderliner]

I know, there's nothing I can do logically. CSS is not that smart to detect which elements are out of the screen. In such cases, one needs to set the right property manually. I will release a hotfix soon. Thank you for reporting the issue.

[sushiljainam]

yeah.. we can close it now.
by the way.. why did you reopen this?

or you closed it by mistake?

[Borderliner]

The actual fix would be to use JavaScript to calculate the width and position of dropdown-content. But since Meshki tries to be as simple as possible while being useful and stable, I'm not gonna add more JavaScript code, unless it's necessary. This CSS workaround will be enough for most cases. I reopened this issue because I thought JS fix could be another option, but I changed my mind. I will close this issue after the release.

[sushiljainam]

yes! don't add that JS. css is enough for 'most cases'.

[Borderliner]

Fix released: https://github.com/Borderliner/Meshki/releases/tag/v1.2.5
Website updated: http://meshki.borderliner.ir/
It may take up to 1 hour for CDNs to update themselves. Please be patient.
Thanks for your contribution.
Closing the issue.