Use Fiori Fundamentals Styles in ui5 controls

[andresfelipe66]

Describe the documentation issue

• [X ] Other

Description of the issue

I like to use Fiori Fundamentals CSS (https://sap.github.io/fundamental/components/form.html) in componentes ui5. ¿Is it possible? In this moment I have a project in angular with the next table, in the ui5-input I assign styles from Fiori Fundamentals, in this case I like to have inputs smallers.

With a fd-table from Fiori Fundamentals or in a input from html it works fine

[fifoosid]

Hello @andresfelipe66

As far as I can see you are trying to show UI5 Components in Compact Content Density.(Please correct me if I am wrong).

In order to achieve this, UI5 Web Components come with built in configuration for different Content Density(Cozy and Compact). Both Cozy and Compact are Fiori 3 compliant. In Cozy Content Density(default one) all controls appear in their original size, whereas in Compact Content Density they appear smaller(compact).

In order to make all your controls appear in Compact(smaller) you can add this config to your index.html:

<script data-id="sap-ui-config" type="application/json">
    {
      "compactSize": true
    }
  </script>

or add the following parameter to your url:

www.someurl.com/app?sap-ui-compactSize=true

I am wondering if this option works for your case.

Otherwise if you need a custom size of the input, with this change #658 which is already in master and will be available in the next release, we make possible to set custom size to ui5-input like this:

ui5-input {
    width: 5rem;
    height: 3rem;
}

UI5 Web Components come with their own CSS and cannot be used with fundamental UI styles.

Best Regards,
Filip

[andresfelipe66]

Hello @fifoosid

Thanks for the answer, yes is a good idea to use CompactSize=true. It's that I need.

Best Regards,

Andres