The default layout for field in the detail view of the content manager is 2 columns.
Is there a way to make a field (e.g. Text Area) full width (span both columns)?
I didn’t find any setting for that neither on field nor on layout level.
Since Strapi seems to be using bootsrap the markup for the column is class=“col-6”. So we just have to change that to col-12 to make it work.
Is it already possible? If yes, how?
If not:
Is it already on the roadmap?
Is there any recommended workaround? I have created a custom plugin that kind of solves this (and also conditional fields) via client side JS. It’s working but it’s not the cleanest way in my opinion, so I was wondering how others deal with this…
Thanks in advance for any feedback!
Stay safe!
–Simon
If you look at its value you will find field sizes stored in layouts.edit:
So basically, you can modify its value from 6 to any other bootstrap number.
If this feature is crucial to you, you could build a custom plugin that allows you to modify these values. Also, you can add that functionality that allows you to modify these values directly inside strapi-plugin-content-manager.
These configurations are overwritten with Strapi’s default configuration when you make changes to the content-type structure (when you create/update/delete model fields).
We’re currently working on some redesign but unfortunately the possibility of changing layout (I mean changing field size) isn’t part of it yet. I’m actually glad to be aware of that request. We’ll try to figure out if we can do something asap. Thanks
My two cents: Since we are using bootstrap for layout the options for field size should be column spans. The class of the field’s container is “col-12”. So meaningful values for field size could be “col-12, col-9, col-6, col-3”. I think that should cover almost every use case.
For some users, col-12 doesn’t say anything. This is why I assumed that percentages would be much understandable for end-users.
Anyway, as a dev, you already know that 100% means col-12, 50% means col-6, etc. So there is no need to specify them with col-{nr}. As a backend developer, I don’t use bootstrap at all (but I used it a long time ago), and now I really don’t remember what col-{nr} is for 33%, or 20%, when I need them (usually once in a few months) I always open bootstrap’s documentation.
I am trying to modify width of custom field in core_db directly through MongoDB Compass to 12 however the width of the fields still remain at 6.
Also, I have rebuild the application using yarn build yet the same issue.
Unfortunately, no. Since I don’t use content manager anymore. I ended up building my custom front-end inside strapi for content editing and consuming APIs from content-manager.
Hi,
i just added the resizing function and opened a PR.
The problem with “yarn build” is overriding the current columns is fixed too.
There was a function call which will append default sizes if the default size of an element has changed.
Maybe the idea was to update existing layouts with new default sizes but the default size is now applied on adding new fields so the update is not required i think.
Today I’m also need deep content -editing customization (I’m need condittional field).
Can you please share simple project how to call simple custom form inside strapi admin panel and save edited content back to database ?
@web-mi I saw that PR and the example gif and it looks super awesome, I think our frontend team is reviewing it with our product design team to validate it.
Just wanted to say thank you for contributing back to us with such a great idea.
These configurations are overwritten with Strapi’s default configuration when you make changes to the content-type structure (when you create/update/delete model fields).
