Hi,

The index list looks fine below 992 and above 1280.

I have attached screenshots to show the problem.

992px and below

993px -> 1280px

1281px and above

//Tim

The menu works fine on every browser except for iOS Safari. I didn't notice right away, but something about that browser is causing issues. I'm not sure what the problem might be.

Hello,
When opening an inline form, there is no responsiveness. I'm not sure, but it may be a related issue to #25

Hello Gregorio and thanks for your package.
I noticed that there is a problem when displaying the filters on view page of nova resource.
Can you help me to solve it?

Thank you
marco

The w-1/2 of the help text component needs display: table-row;

Fixed	Original

Nova currency field not rendering properly, same across Iphone and Ipad, vertical/horizontal view.

The modal's (and the dropdown menu's) z-index needs some fix.

Not saying this is an elegant solution, but below 500px I've opted to hide all but the first two and last columns on my index view:

    td:not(:last-of-type):not(:first-of-type):not(:nth-of-type(2)):not(:nth-of-type(3)) {
        display: none;
    }

    th:not(:last-of-type):not(:first-of-type):not(:nth-of-type(2)):not(:nth-of-type(3)) {
        display: none;
    }

Ultimately, it'd be nice to just specify a priority of fields in my Nova resource so that the columns gracefully collapse upon screen shrinkage... I'll work on that one if I have time.

Not sure if anyone is interested in this solution, but though I'd at least share it in case.

There is a little problem with Nova Responsive theme when working alongside with Tabs package, if there are HasMany or BelongsToMany relationships. The single item view is not responsive and the create/attach button does not go to the new line, stretching the container and ruining everything...

i have nova 1.2.1 and laravel-nova-theme-responsive 0.6.1. My sidebar dont scroll. Pls need help
https://youtu.be/HW1z6NI9Sik

Hi,
what do you think if your package provider collapsable side barre in desktop view
Many thx !!

Even with text wrapping, form fields tend to collide with form labels on a mobile viewport. Rather than align them side-by-side, having the label stacked vertically above each form input would be more useable.

Layout breaks when "select all" and the action selection dropdown appears.
Maybe finding a way to re-order the elements and make the action selection full width

For example https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/GridAdaptabilityOverview/Vue/Light/

Removing the site name and user's name will make global search usable

The user knows their name & the app name is in the url

So I think it's safe to hide this text for a better experience

Fixed	Original

When you have more than 3 filters approximately, the upper one appears cut and the main scroll bar must be dragged down, so that it is displayed correctly

On load page:

on scroll down main bar just a little,

The modal form width is set statically, needs width: 100% to not clip the content within.
This might be fixed in an official release from what I've seen in laravel/nova-issues
Otherwise documenting it here

Fixed	Original

I have issue when using with nova-rtl-theme:

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 which package is causing the issue. or maybe nova is causing the issue!

I like how you make create button being responsive:

It would be great if we have similiar behavior on attach button. The current state of attach button:

Somebody please help submit PR about this.

This theme is wonderful.

I have found just one bug so far:
When trying to open the modal that is create by "showCreateRelationButton" method on a field it is not responsive.

Thanks

Nova 2.9.2 - iPhone 11

I was wondering if it is possible to show the logo somewhere, like as a header above the menu? It is a sign of recognition for employees to know they logged in to the correct environment. Kind regards!

This might be a nova newbie question. But i'm a little lost.

After installing nova, and later installing laravel-nova-theme-responsive, everything was peachy.

After that, i changed the path in config/nova.php to /admin, ran 'php artisan optimize:clear' and 'php artisan view:clear' - and now the new url /admin works except that the responsive theme is gone, and i'm back to the old theme.

I've tried running npm run prod with no luck.

Any help much appreciated!

The following css is causing the global search results to not appear

.h-header a.no-underline {
    display: none;
}

Replacing it with the following fixes it

span.hamburger-menu + a {
    display: none;
}

Currently if you scroll the page with sidebar open it shows the end of the sidebar, needs to be fixed

Then if its too long it doesn't scroll, needs to overflow: auto

before

.w-sidebar {
    position: absolute;
    z-index: 1000;
    margin-top: 3.75rem;
}

after

.w-sidebar {
    position: fixed;
    z-index: 1000;
    margin-top: 3.75rem;
    height: 100%;
    overflow: auto;
}

Hi hi - this broke my pagination. When I hover over the pagination buttons, it displays a no/disabled icon. How can I either fix this, or uninstall? Thank you -

Removing create button text will automatically increase the size of the search input

Fixed	Original

Resource names like "Attributes" or "Permissions" will cut off completely

.btn {
    text-indent: -9999px;
    // ^ pulls text off screen
    font-weight: bolder;
    font-size: 26px;
    padding: 0 12px;
}
.btn:before {
    content: "+";
    position: relative;
}