Alignment for dropdown

[BasselArt]

Thanks for the great theme, I have a small issue and can't fix it, some dropdown not viewed correctly, attached a screenshot to describe the issue. I have a custom CSS file but I need some tips to fixe this.

Regards.

[FaridAghili]

Yes, already noticed that, didn't find a fix though. Feel free to make a PR.

[sepehrr]

this problem is because of popper.js. do this to solve the problem (assuming nova resides in /nova/):

1. change 'bottom-end' to 'bottom-start' in /nova/resource/js/components/Dropdown.vue
2. change 'bottom-start' to 'bottom-end' in /nova/resource/js/components/SearchInput.vue
3. change 'bottom-start' to 'bottom-end' in /nova/resource/js/views/Index.vue
4. make a webpack.mix.js file in your nova folder. (duplicate /nova/webpack.mix.js.dist to /nova/webpack.mix.js is just ok)
5. cd nova
6. run npm install
7. run npm run prod
8. now in laravel folder run php artisan nova:publish

now your Nova is RTL-friendly!

[FaridAghili]

@sepehrr Thank you for explanation, it works but can't be used cause we need a way to implement it in our package. Editing Nova's source is not an option.

[SadeghPM]

Yes, already noticed that, didn't find a fix though. Feel free to make a PR.

this fix issue in any screen size:

div.tooltip[x-placement="top-start"],div.tooltip[x-placement="bottom-start"]{
    left: 220px !important;
}
div.tooltip[x-placement="top-end"],div.tooltip[x-placement="bottom-end"]{
    left: -200px !important;
}

[FaridAghili]

Thanks.

Your code make change from this:

To this:

While expected result in something like this:

[FaridAghili]

I see that you've fixed filter and selection popups thu Thank you.

Do you have any idea about the user menu?

[SadeghPM]

Unfortunately no. ‌But quick and dirty way is: replace direction bottom-start with bottom-end in nova app.js resource. There is only two place to replace and its pattern like placement:{type:String,default:"bottom-start"}. This work for me in nova 2.8.

[FaridAghili]

@SadeghPM Editing Nova's source code is not an option because after updating Nova to newer version you will lose all your changes.

[FaridAghili]

It should be fixed in https://github.com/pishran/nova-rtl-theme/commit/6a01d9031940bc09834969781279b106c5f2b27c with some js magic! Needs a little testing thu.

[FaridAghili]

@BasselArt @sepehrr @SadeghPM Can you please test https://github.com/pishran/nova-rtl-theme/commit/6a01d9031940bc09834969781279b106c5f2b27c and let me know to result?

[FaridAghili]

Fixed in v1.3.1.

[SadeghPM]

some problem in v1.3.1:

[kfirba]

I've submitted a PR that fixes the alignment of the dropdowns: https://github.com/laravel/nova/pull/793

@FaridAghili

[abdallah84]

i upgrade to latest versions of theme, but i still face the problem

[kfirba]

@abdallah84 The PR on nova's repository was not yet reviewed.

[amidesfahani]

use this hack to bring left aligned buttons to right .card .flex.items-center.ml-auto.px-3 { margin-right: 0 !important; }

[FaridAghili]

@amidesfahani

Thanks, but it goes like this:

[SadeghPM]

@amidesfahani

Thanks, but it goes like this:

Yeh, but better than this:

[3adeling]

I have issue when using with laravel-nova-theme-responsive.

in mobile view (RTL only), when clicking on the profile dropdown I get blank page because of the huge transfrom transform: translate3d(-3535px, 53px, 0px); in the dropdown popup:

<div id="popover_iqs6hnofpb" aria-hidden="false" tabindex="0" class="z-50 open" style="visibility: visible; position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(-3535px, 53px, 0px);" x-placement="bottom-start"><div class=""><div class="" style="position: relative;"><div><div class="select-none overflow-hidden bg-white border border-60 shadow rounded-lg" direction="ltr" style="width: 200px;">
/** .... ***/
</div></div> <div data-v-b329ee4c="" tabindex="-1" class="resize-observer"><object aria-hidden="true" tabindex="-1" type="text/html" data="about:blank" __idm_frm__="344"></object></div></div> <div class="" style="left: 0px;"></div></div></div>

I am not sure what is the cause of the issue

[FaridAghili]

@3adeling This is a known issues, we tried several workaround (you can check them out in the comments above) but couldn't fix it. That transform property is calculated by Popper.js based on several things.

Feel free to give it a try.

[ali-shabani]

I fixed the problem with this pr https://github.com/pishran/nova-rtl-theme/pull/7

[FaridAghili]

Fixed in v1.5 thanks to @pyramid-ali.

[ImanRJB]

@FaridAghili

The problem is still unresolved after install Nova 3.21.0 and last version of nova-rtl-theme.

Also there is some error in my console as you can see.