Field UI problems

[trippo]

• input sty on right => .multiselect__tags need flex-grow:1;
• border color need to be equal to nova input color

  
  .input-class{
  border-color: rgba(var(--colors-gray-300),var(--tw-border-opacity));
  }

.dark .input-class{ border-color: rgba(var(--colors-gray-700),var(--tw-border-opacity)); }

<img width="622" alt="image" src="https://user-images.githubusercontent.com/497169/179347392-15dae172-f6a6-45e2-bb5e-bc51e43e3911.png">
<img width="619" alt="image" src="https://user-images.githubusercontent.com/497169/179347405-e0cebe91-9087-4de4-b383-945755f72a44.png">

[Tarpsvo]

Do you have some conflicting styles that break this? I haven't seen it happen in any version of Nova in my projects.

[trippo]

No, I have a new nova 4 installation

[Tarpsvo]

What browser and operating system is this? And what other packages do you have installed?

[trippo]

Chrome on mac

On nova i use these:

"blendbyte/nova-items-field": "^1.0",
"datomatic/nova-enum-field": "^1.4",
"outl1ne/nova-color-field": "^2.0",
"outl1ne/nova-multiselect-field": "^4.0",
"whitecube/nova-flexible-content": "^1.0",

[kbellpostman]

+1

[majweb]

yes there is a problem with Ui and reorder.

[mstaack]

seeing the same issue on my nova4 project.

also have whitecube/nova-flexible-content in there, might this mess up styling?

[mstaack]

just confirmed, removing whitecube/nova-flexible-content fixes the aligning issue:

[mstaack]

there it is: https://github.com/whitecube/nova-flexible-content/issues/356

[mstaack]

fixed in latest nova-flexible-content release !

@Tarpsvo guess this can be closed then. ✌🏼