Content Manager plugin does not get overwritten by custom file / width of rendered component not listening to getInputSize

[MatthiasDunker]

Bug report

Describe the bug

I added my own field. Visually it is some kind of schedule which is saved in JSON format and as longtext in the mySQL database. As it has some columns I wish it to be taking maximum available space in the admin UI to provide a good user experience, but instead it gets rendered taking 6 of the 12 available grid cols.
To get this working, I tried to overwrite the content-manager plugin and to set 12 cols as default size for components. But it does not seem to work (still taking 50 % of the space). Either the original file won’t be overwritten or I am looking at the wrong place.

Steps to reproduce the behavior

1. Copy file packages/strapi-plugin-content-manager/admin/src/utils/layout.js to ./extensions/content-manager/admin/src/utils/layout.js
2. Change default col span from 6 to 12 (see code snippet below).
3. Rebuild Admin UI with yarn build
4. Components still render with class .col-6 and take 50 % of the available space.

Expected behavior

Expecting the wrapper for the field to render with class="col-12" or class="col".

Code snippets

Here I altered default size of 6 to 12 (I guessed).

// ./extensions/content-manager/admin/src/utils/layout.js
const getInputSize = type => {
 switch (type) {
   case 'boolean':
   case 'date':
   case 'integer':
   case 'float':
   case 'biginteger':
   case 'decimal':
   case 'time':
     return 4;
   case 'json':
   case 'component':
   case 'richtext':
   case 'dynamiczone':
     return 12;
   default:
     // return 6;
     return 12;
 }
};

System

I am working with the latest docker image started by a docker-compose.yml

version: "3"

services:
  strapi:
    image: strapi/strapi
    container_name: ig-corporate-strapi
    restart: unless-stopped
    env_file: .env
    environment:
      DATABASE_CLIENT: ${DATABASE_CLIENT}
      DATABASE_HOST: ${DATABASE_HOST}
      DATABASE_PORT: ${DATABASE_PORT}
      DATABASE_NAME: ${DATABASE_NAME}
      DATABASE_USERNAME: ${DATABASE_USERNAME}
      DATABASE_PASSWORD: ${DATABASE_PASSWORD}
    networks:
      - ig-corporate-network
    volumes:
      - ./app:/srv/app
    ports:
      - "1337:1337"
      - "8010:8000" # admin dev mode
    depends_on:
      - mysql

  mysql:
    image: mysql:5.7
    container_name: ig-corporate-mysql
    restart: unless-stopped
    command: --default-authentication-plugin=mysql_native_password
    env_file: .env
    environment:
      MYSQL_DATABASE: ${DATABASE_NAME}
      MYSQL_USER: ${DATABASE_USERNAME}
      MYSQL_PASSWORD: ${DATABASE_PASSWORD}
      MYSQL_ROOT_PASSWORD: ${DATABASE_ROOT_PASSWORD}
    networks:
      - ig-corporate-network
    volumes:
      - ./db:/var/lib/mysql
    ports:
      - 3306:3306

networks:
  ig-corporate-network:
    driver: bridge

volumes:
  strapidata:

#8094 could be a relational issue

Thanks in advance!

[MatthiasDunker]

I would still be happy about some input on how this layout thing is meant to be.

Meanwhile I came up with a very ugly hack:
Inside of my functional component i set a reference to the outer DOM element.
With an effect depending on that reference, I bubbled up the DOM and looked for the parental element with the class col-6 as a child of a element with the class row — it should be our col.
Then I just switched col-6 to col.

I know.....ugly, but it is an interim hack.

const myComp = () => {
  const wrappingDiv = useRef(null);

  useEffect(() => {
    if (wrappingDiv.current) {
      const colEl = wrappingDiv.current.closest(".row > .col-6");
      colEl.classList.add("col");
      colEl.classList.remove("col-6");
    }
  }, [wrappingDiv]);

  return (
    <div ref={wrappingDiv}>
        { /* some stuff here */ }
    </div>
 );
}

[derrickmehaffy]

Hello,

I've marked this as discussion pending any of our front-end engineers to take a dive at. For the moment they are quite busy but I have poked them with the issue link of they get some time.

Please note that generally we do not allow customization discussions in Github and instead redirect you to our forums: https://forum.strapi.io

[MatthiasDunker]

Hey @derrickmehaffy
thank you very much. Just joined the forum!
I am not quite sure if the content manager does not get overwritten which would rather be some kind of bug.
I see that the frontend behavior has more to do with individual opinion.

[soupette]

Hello @MatthiasDunker.
You are not overriding the correct file, with the latest version 3.4.1 you will need to look at this one

I am closing the issue as I have tested the modification with the correct file and it is working fine, feel free to reopen it.

[lpanjwani]

Hi @soupette, I can confirm the issue is still persistent since I have done the steps below to the same result.

I am running Strapi 3.4.1

1. Override /my-app/extensions/content-manager/services/utils/configuration/layouts.js
2. Override /my-app/extensions/content-manager/admin/src/containers/EditSettingsView/utils/layout.js
3. Delete build & .cache.
4. Rebuild or yarn develop --watch-admin

I tried even changing the default to test changes yet no changes are visible in the Single Entry View and Configure View aswell

[MatthiasDunker]

Hey @soupette, unfortunately this is not working or did not understand the concept of overriding here. And I cannot re-open this issue, as I am not allowed to re-open Issues a contributor closed.
Have a nice rest of the year and a great new year's eve 🥂

[soupette]

Hello @MatthiasDunker, I am not sure which version you are currently using but it seems that the file you are trying to override is not located at the correct path. Here is the one you are looking for.

Happy new year too!

[MatthiasDunker]

Hey @soupette, I upgraded to version 3.4.1 and experienced the exact same behavior like @lpanjwani (#8950 (comment)_)

[derrickmehaffy]

This issue has been mentioned on Strapi Community Forum. There might be relevant details there:

https://forum.strapi.io/t/field-api-custom-json-field/447/9