[Feature] Custom styling(CSS) for widgets

[marks0351]

Summary

Provide users the ability to customize CSS properties of a widget and A place to write custom CSS and an option to pass the custom class to widgets would be great.

Motivation

Today we provide widgets that are not customizable. This wud enable users to customize styles like font style, background color, border, etc. We cud also build this up to provide users a way to add in their own theme or custom CSS styles that wud override Appsmith's base CSS.

Front conversations

[somangshu]

3184 should be merged here.

[sbalaji1192]

Unlinking this from App theming epic, as this requirement is not being solved there.

[vernonstinebaker]

It will be great to be able to add CSS to style Disabled items better. Right now disabled items (text within a textbox, for example) are very difficult to see.

[WeaVaer]

We definitely need custom css for widgets because the current algorithm does a very good job of estimating how an ui should look like, alas unable to cover all the variety of ui designs us wild designers throw around and in the end we cant have what we want as looks (read: design). It's a bit sad for such a successful implementation of low-code tool builder. Actually one thinks; that should be fairly easy to accomplish; This can be achieved either by a using a specific custom css parameter on the widget itself (which there's none currently) or thinking that would still require a lot of effort to code in no time, a simpler straight-forward solution might be; a single custom css parameter on the page itself that would be injected into the page's styles when being rendered;

I'll throw a use-case below but the needs are much more than that; maybe in billions; When designing a page with multiple containers placed horizontally (like [a] [b] [c] on the page), and when you resize the screen horizontally, all the containers resize automatically. (like [ <--a--> ] [ <--b--> ] [ <--c--> ] ). But I wanna be able to control the auto resizing of the containers; such that e.g. I want only the middle container to resize when the screen resizes (like [a] [ <--b--> ] [c] ). If there was a means of passing a fixed width css piece to the middle widget, that might be easily accomplished by users.

[dahakim]

Definitely agree.

[mweichert]

Looking forward to this.

[PaulMcF1987]

I posted a similar request on discord - https://discord.com/channels/725602949748752515/1087799733554249768/1087799733554249768

I was asking about injecting CSS but having custom CSS for widgets would be even better

I was wondering if there was a way for me to inject CSS into an App using javascript?

The only thing I wam really looking to alter is the minimum size of some containers. I find when I group text widgets together the container used for grouping can cause the widgets to take up double the space that they should.

If I could inject some CSS to then make the container smaller, the app would look and feel a lot nicer

(The reason I group text widgets together is shown in the attached pic... The first pic shows the text in line, looking neat... The second pic shows what happens if text becomes too long, it can move the widgets out of alignment... The 3rd pic shows the widgets grouped. The alignment is restored but there is a large gap (highlighted in yellow) caused by the container (usually I wouldnt have the border, but I kept it in the pic to demonstrate))

I have tried using auto height with limits but that then creates its own challenges

[nzidol]

Another usecase is testing applications with cypress https://docs.cypress.io/guides/references/best-practices#Selecting-Elements

[emmanQabe]

I posted a similar request on discord - https://discord.com/channels/725602949748752515/1087799733554249768/1087799733554249768

I was asking about injecting CSS but having custom CSS for widgets would be even better

I was wondering if there was a way for me to inject CSS into an App using javascript?

The only thing I wam really looking to alter is the minimum size of some containers. I find when I group text widgets together the container used for grouping can cause the widgets to take up double the space that they should.

If I could inject some CSS to then make the container smaller, the app would look and feel a lot nicer

(The reason I group text widgets together is shown in the attached pic... The first pic shows the text in line, looking neat... The second pic shows what happens if text becomes too long, it can move the widgets out of alignment... The 3rd pic shows the widgets grouped. The alignment is restored but there is a large gap (highlighted in yellow) caused by the container (usually I wouldnt have the border, but I kept it in the pic to demonstrate))

I have tried using auto height with limits but that then creates its own challenges

i 100% agree. Had tried to do a javascript workaround but to no avail. We i need exactly the same thing, to be able to set minimum dimensions

[dilippitchika]

@emmanQabe will you be able to share screenshots of your app and explain the problem better? I am trying to understand how we can build this and would want to know some more details around minimum dimensions.

Do you think the spacing is too much between widgets and want to decrease it?

If you have some time i would like to connect with you and dig deeper on your app, please choose a time to connect from this link so that i can help you out

[Fabiolupitecus]

I think appsmith is super useful, and with custom css feature definitely will help us to develop more pixel perfect apps

[cl-provecto]

I'm just starting out on the platform and I'm still learning.

Is there a way to format or style a given widget? Could be with CSS or Javascript

For example:

In the table, I would like to leave certain columns with the same size.

Whenever I create a table it always exceeds the size of the screen, I would like it not to exceed the size of the screen and adjust the columns so that it does not interfere with the text or distribute the size of the columns equally.

[bigfinaleeeeeeee]

upvote for this, this is deciding factor

[ithan]

Is there any update regarding this? being able to even just having a single global style file for app that we can edit would be a HUGE improvement 🙏

[PaulMcF1987]

The apps we make on appsmith work, but it is very difficult to get an app which looks visually appealing. People want things that work so that box is ticked But they also want things that look the part and that box is definitely not ticked at present

[Nikhil-Nandagopal]

We're currently laying the foundations in our widget to enable clean styling of entire applications from a single place. @cl-provecto I don't think custom CSS will help with table column widths. You can resize the table columns to make them fit your desired size. Are you looking to dynamically wrap the columns? You can also set the text to wrap in the table column setting. @ithan @PaulMcF1987 We would love any detailed feedback you have on why the default widgets don't look visually appealing, visual appeal should be a default part of the platform and not something users need to work hard at using CSS to achieve. We're primarily looking at this feature as a way to enable organizations to make apps that look consistent with the other applications in their organization so their users can trust the app.

[PaulMcF1987]

The main issue with achieving a visually appealing app is the amount of white space, the apps are full of it because there is no way to get widgets to sit flush together, there is always a gap by default This also means that the app will take up more space that is otherwise required.

[ichik]

@vernonstinebaker @WeaVaer @dahakim @mweichert @PaulMcF1987 @nzidol @emmanQabe @Fabiolupitecus @cl-provecto @Net30NetNow @ithan Hello, folks. We've been working on a revamp of our layout and theming engines that should facilitate faster, more predictable, and more consistent styling of the widgets. While that is still work-in-progress the team wants to properly evaluate a common request for custom CSS, that has been asked by the community. To that end I'd be interested in talking with you, to see what kind of ideas you have. You can schedule a call with me if you're willing to talk or drop me an email.

[PaulMcF1987]

@ichik The main issue for me, as you can probably tell from the images I have posted, lie around Margin and Padding Sometimes, I would like widgets to sit flush, next to each other, but this is not possible due to an enforced margin As you will see above, when you use a container, there is also an enforced padding All of this creates a lot of unnecessary white space. It would be nice to be able to control other areas of CSS, but margin and padding are my main issues at present

Also Being able to set a Min OR Max height for containers etc. Min being the main one.

As it stands we can use Auto height which starts with quite a large size which I feel for one line of text is too much, it gets better if a second line is added but there is still quite a bit of padding/margin that on occasions, I would like to remove/change

The other option is Auto height with limits but this requires a max and min height to be set. For certain things, I don't want a max height. Id like a min height to make it neat when minimal entries are inside, but I'd also like it to be able to expand to fit any entries which might populate, with no max limit

[nzidol]

As stated before my main use case was...

1. Add data-* css attributes to make it easier to target elements when testing with cypress.

These could also be auto generated with name of the widget, maybe with an optional switch... And yes all the abundant white space is annoying like always having to move labels on input elements from top to left. .. It may look nice for a simple app but more complex forms need to be far more compact.

On Wed, Jan 10, 2024, 12:06 AM vadim @.***> wrote:

@vernonstinebaker https://github.com/vernonstinebaker @WeaVaer https://github.com/WeaVaer @dahakim https://github.com/dahakim @mweichert https://github.com/mweichert @PaulMcF1987 https://github.com/PaulMcF1987 @nzidol https://github.com/nzidol @emmanQabe https://github.com/emmanQabe @Fabiolupitecus https://github.com/Fabiolupitecus @cl-provecto https://github.com/cl-provecto @Net30NetNow https://github.com/Net30NetNow @ithan https://github.com/ithan Hello, folks. We've been working on a revamp of our layout and theming engines that should facilitate faster, more predictable, and more consistent styling of the widgets. While that is still work-in-progress the team wants to properly evaluate a common request for custom CSS, that has been asked by the community. To that end I'd be interested in talking with you, to see what kind of ideas you have. You can schedule a call with me https://www.getclockwise.com/c/vadim-appsmith-com/quick-meeting if you're willing to talk or drop me an email @.***>.

— Reply to this email directly, view it on GitHub https://github.com/appsmithorg/appsmith/issues/3095#issuecomment-1882867782, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADH46HKQRYJXYJUFDDZVXPDYNUQDLAVCNFSM4X2PFZ32U5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TCOBYGI4DMNZXHAZA . You are receiving this because you were mentioned.Message ID: @.***>

[vernonstinebaker]

So long ago.. :-)

My use case was very simple. The text in disabled fields was difficult to see, so I wanted a way to improve text visibility.

[melroy-bsk]

for me my use is plenty, but for one, as mentioned by @vernonstinebaker. Secondly, I wanted to reduce the opacity of specifc widgets based on specific conditions. An example would be for form submission. Rather than setting the visibility, reducing the opacity to 0.4 and showing a spinner in the center and the setting the opacity back up when success or a failure and show other things. Just creates a better experience rather than depending always on a modal or a alert.

[patrickmast]

My goal is to create an input field with a monospaced font. Implementing the ability to use CSS on widgets would be a crucial next step for more customized settings in Appsmith. This feature is highly needed. Thank you!

[Nikhil-Nandagopal]

@patrickmast why are you looking for that specific font? Do you have some organisational need that you are trying to drive with this?

[patrickmast]

Hey @Nikhil-Nandagopal, the font I need needs to be monospaced as it is code and serial numbers I need to show in an input field. And a space needs to be the same width as a W.