Hi,I’m getting all dropdowns rendered with the same witdh, not adapting to the content length.
Also, textarea inputs are ignoring the ‘Cols’ setting. All are rendered with the same length, quite wide.
Using v2020.0.11, updated template, MSSQL database.Pedro
- In mobile mode, all input controls use 100% of the form width.
- In desktop mode, the text inputs will use the “Size” setting under Edit Tag settings.
- For dropdown, I don’t know what dropdown you meant, but if you use the “Use dropdown” option, you may specify the “Dropdown min-width (px)” setting.
- Textareas always use 100% of the available width.
arbei wrote:
- Textareas always use 100% of the available width.
Thank you for the clarification. So, can you also explain what’s the ‘Cols’ setting for, in the ‘TEXTAREA Tag Attributes’ in PHP Maker?
Found out why dropdowns are so narrow. It’s this setting in <project_name>.css file that limits the width to 20 characters:.ew-custom-select,.ew-custom-file{max-width:20em}Removing what’s inside the curly brackets, the dropdown extends all the way.
I’m trying to have the dropdows extend as needed, that is, to be as wide as the longest dropdown option. I tried these options with no result:.ew-custom-select,.ew-custom-file{width:auto}
.ew-custom-select,.ew-custom-file{.w-auto}I’m using simple dropdowns (not checking the ‘Use dropdown’ option). Desktop mode.
Can anyone help? Constructively?
I believe if you don’t use HTML editor, the Cols attribute will be used.To override CSS, you need to set the same property first, i.e. “max-width”.
arbei wrote:
I believe if you don’t use HTML editor, the Cols attribute will be used.I am not using HTML editor. The cols attribute is being ignored.
Bootstrap sets the form-control with width: 100%. You may override it by adding your own CSS under HTML → Styles → User, e.g.textarea.form-control {
width: auto;
}
arbei wrote:
textarea.form-control {
width: auto;
}That worked beautifully, thanks! Now the ‘cols’ setting is back in use.
This leaves the dropdowns’ auto width. I tried a few variations both in .ew-custom-select and select.form-control, like:max-width:100%;
flex: 4 1 20em !important;
width: auto !important;Still no result. Either they’re too short (20em) or too long (100%). There must be a way to get the auto width back…
You may right click the element in Chrome and select “Inspect” to check the CSS of the HTML element and then add your own to override. Read:
https://developers.google.com/web/tools/chrome-devtools/css
I noticed that the dropdowns are as expected (auto width) in the search page. They are fixed width in the add and edit pages. All dropdowns are showing as reported: 20em wide.
arbei wrote:
You may right click the element in Chrome and select “Inspect” to check the CSS of the HTML element and then add your own to override. Read:
https://developers.google.com/web/tools/chrome-devtools/cssThen which style did you find in Chrome setting the width? Post it for discussion.Simply copy and paste it under the HTML → Styles → User tab and change the width to override them.
Finally, after a few hours of frustrating attempts, I found a setting that works in Chrome, Firefox and IE11:.ew-custom-select {
max-width: 100%;
width: auto;
flex: none !important;
flex-basis: auto !important;
}…added to user styles.
Now, how can I make this affect normal pages, but NOT modal dialogs?
You may find the CSS of the parent element (which does not exist in modal dialog) and use it in your CSS selector.