Override Default Input Styles

[M2Industries]

For stacked forms the inputs in the Field attribute need to take in custom css styles. I noticed that the base_inputs are not overridden for this instance. It would also be nice to get rid of the default mb-3 when custom styles are needed.

[smithdc1]

Hi -- Thanks for the feedback. I'm super excited to have the first issue against this project!

With work and family commitments this week it may be a short while before I get to look at this deeply. In the meantime, just to check my gut reaction, does wrapper_class on the Field give you what you need here? 🤔

https://django-crispy-forms.readthedocs.io/en/latest/layouts.html?highlight=wrapper_class#universal-layout-objects

I can't send a specific link - but search for wrapper_class on this page.

[M2Industries]

Hey David, I played around with your code a bit and may have a better way for the template renderings. I’ll shoot you a synopsis of what I did. I previously tailwind-Ified a scss file built on top of bootstrap 4 but this is much better!! Basically, I wanted to implement a better conditional for a default class on an input field would be awesome. If there’s isn’t a specified css class on the form helper then default to the base css class for an input field. The form input field was rendering both the base class and my custom class I want to implement on the field. Best Michael Murray

On Sun, Oct 11, 2020 at 5:16 PM David Smith ***@***.***> wrote: Hi -- Thanks for the feedback. I'm super excited to have the first issue against this project! With work and family commitments this week it may be a short while before I get to look at this deeply. In the meantime, just to check my gut reaction, does wrapper_class on the Field give you what you need here? 🤔 https://django-crispy-forms.readthedocs.io/en/latest/layouts.html?highlight=wrapper_class#universal-layout-objects I can't send a specific link - but search for wrapper_class on this page. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#58 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/APPAIX56I7DQLRRL5GPX3I3SKIOA7ANCNFSM4SL2VXJQ> .

-- *Michael Murray* Chief Technical Officer | Mod Technologies LLC | www.Modtechnology.io <http://www.modtechnology.io/> 26300 Johns rd, South Lyon, MI 48178 <https://www.google.com/maps/search/26300+Johns+rd,+South+Lyon,+MI+48178?entry=gmail&source=g> | P (248) 766-4712

[smithdc1]

Sorry. I focused too much on the comment about the mb-3.

I agree with your point about being able to customise the styles.

I have created a class CSSContainer to hold these customised classes which can be added to the helper. If it's not added the default styles are used.

Although I've not yet got round to documenting this and I'm not sure if this is the best approach and so would value your thoughts.

The benefit here is that the classes can be added once at the helper lever (via css_container). In the example you have had two write the classes out twice which is a bit verbose (and introduce risk of getting it wrong) especially with tailwind being a utility Framework.

https://www.github.com/django-crispy-forms/crispy-tailwind/tree/master/crispy_tailwind%2Ftailwind.py

[smithdc1]

See #61 for my first draft of what I was thinking...

[M2Industries]

what i did was simply remove the base_input styles and then add them in the helper. But yes! I think what you described is exactly what i was going for. Since tailwind is utility first I didnt mind not having base styles. It may deter users from using the form helper properly

If custom styles for a Field element are not supplied in the form helper then use the default "base_input" styles:

under CrispyTailwindFieldNode:
base_input = (
# "bg-white focus:outline-none border border-gray-300 rounded-lg py-2 px-4 block w-full "
# "appearance-none leading-normal text-gray-700"
""
)

[Nielssie]

The benefit here is that the classes can be added once at the helper lever (via css_container).

Hello @smithdc1 Do you have an example how to do this. I can't figure it out. My goals is to give the checkboxselectmultiple a set of classes

[sheckathorne]

Hey guys, I read the discussion and read through the helpful docs in #61 , however overriding the default_styles still won't let me clear the mb-3 classes showing up in my form.

It looks like the templates are expecting a field_class attribute that I'm not sure how to set in my LayoutHelper:
<div class="{% if field_class %}{{ field_class }}{% else %}mb-3{% endif %}"{% if flat_attrs %} {{ flat_attrs|safe }}{% endif %}>

Any direction you can give is greatly appreciated!

-Sean

[sheckathorne]

For anyone else struggling with this issue, I ended up copying the field.html template to my project i.e. "templates > tailwind > field.html" and deleting the string instances of "mb-3" which has temporarily solved my problem. Would propose removing these mb-3 classes from the templates since there is no clear way to specify "field_class" when defining fields in Layout.