OMV6 and my bad eyesight

  • Hi,

    I started testing OMV6 and try to get used to the new UI. One thing which hit me was the proportion of the menu font and the text.
    This is 100% zoom on my browser and the text marked with yellow is hardly legible to me.

    If I change the zoom factor the menu gets too large and takes to much screen estate:



    Is this only me or is it worth to open an issue?


    Eigther mat-error and mat-hint are too small or the navigation too large.

    If you got help in the forum and want to give something back to the project click here (omv) or here (scroll down) (plugins) and write up your solution for others.

  • votdev

    Added the Label OMV 6.x (RC1)
  • This is a snapshot of the componentes page (100% zoom)


    I changed the mat-hint in the Angular Material components page:


    This is less legible in my oppinion


    I checked the agular material site:

    and the OMV6 page:


    The font size if overwritten by the omv-form-checkbox-wrapper

    If you got help in the forum and want to give something back to the project click here (omv) or here (scroll down) (plugins) and write up your solution for others.

  • In omv-form-checkbox-wrapper you a mimicing the mat-form-field-subscript-wrapper (font-size: 75%), but in the angular components page the bas is 16px in omv it is 14px, so the problem is somewhere higher up the tree.


    Do you accept assistance here?

    If you got help in the forum and want to give something back to the project click here (omv) or here (scroll down) (plugins) and write up your solution for others.

  • OK, found the root cause: You are using the input controls inside a mat-card, whereas google / angular material uses these outside the cards.

    A card sets the font size down from 16px to 14px whicn in turn makes all content smaller.


    This is how it looks like when i disable the font-size reduction in the mat-card. Spacing is not ideal, but better I think.

    If you got help in the forum and want to give something back to the project click here (omv) or here (scroll down) (plugins) and write up your solution for others.

  • The font size if overwritten by the omv-form-checkbox-wrapper

    This is done to adapt the look of the checkbox field hint to the default look of all other form field hints. It does not make sense to define a different font size for checkbox hints when all other form field hints are using a different one which is defined by the Material framework.




    I think this is a bug in the Material framework because all form field hints are reducing their font size if they are embedded in a mat-card.

  • I googled quite a bit, but found no clear answer. To me it looks like the mad-card is not meant as a wrapper to input elements. Form the docs:


    "<mat-card> is a content container for text, photos, and actions in the context of a single subject."


    and at least angular material is not using it like this on their web page.


    Don't wont to bother, but this one struck me , after installing OMV6, but I seem to be the only one, so just ignore it.



    And thanks for the nice product, I have been using it for several years now.

    If you got help in the forum and want to give something back to the project click here (omv) or here (scroll down) (plugins) and write up your solution for others.

  • But it is nowhere forbidden. TrueNAS for example is also using forms inside mat-card.


    - https://github.com/truenas/web…references.component.html

    - https://github.com/truenas/web…m-embedded.component.html


    I am sure there are more projects using it the same way.


    - https://github.com/cloudnc/ngx…sting-form.component.html

    - https://gist.github.com/EmpeRo…3af84b15f5c386261e6e9ab19

    - ...


    A mat-card is a styling component to show the user that this is a form. Why reinventing the wheel when mat-card can be used to separate a form from the rest of the page?

  • I checked with collegues and they said they had the same problem (even worse, as they were using inputs inside and outside of the cards) and they decided to create a new styling element and replace mat-card.


    And you are right, there are no real directions in the docs saying when to use it and not and obviously it works (somehow) and others are doing it too.


    Don't want to discract form the real problems.

    If you got help in the forum and want to give something back to the project click here (omv) or here (scroll down) (plugins) and write up your solution for others.

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!