Skip to content
This repository has been archived by the owner on Sep 18, 2022. It is now read-only.

Add support for the <button> tag #92

Open
arknotts opened this issue Aug 19, 2011 · 3 comments
Open

Add support for the <button> tag #92

arknotts opened this issue Aug 19, 2011 · 3 comments

Comments

@arknotts
Copy link

I use a CSS styling for tags, and it would be nice if django-uni-form had a helper that would render this out-of-the-box. Is this possible?

@maraujop
Copy link
Collaborator

There are a Button and Submit layout objects in django-uni-form, both accept the kwarg css_class, so you can do:

Submit('submit', 'Submit', css_class='button white')

that way you can creat buttons and user your CSS styling. Future django-uni-form version 0.9.0 ships new docs with more information about this. But beware that some of the things stated there cannot be done with stable version 0.8.0, but with current development version.

Regards,
Miguel

@arknotts
Copy link
Author

Great! Thanks for the answer. I'll be looking forward to version 0.9.0! Any estimate on the release date?

EDIT: Actually, I'm looking at the code for the current development version, and both the Button and Submit layout objects appears to be rendered as input elements. Will it be possible to add a layout object for a tag? I use tags rather than input because I can include additional HTML inside them for icons and other styling.

@maraujop
Copy link
Collaborator

Version 0.9.0 should come out this week if possible. If we miss, it the latest date before release is on 5th September.

I see what you mean about using <button> tags instead of <inputs>. The only thing that makes me reluctant to change Button layout object to use button instead of input is that IE6 had issues with it. Never thought I would say something like this, I never give support for the damn browser, but I'm afraid some people would complain.

I need to think if we give support for a Button layout that uses this tag, having two layout objects for the same thing. Meanwhile, I recommend you create your own Layout object:

Template file should look like:

<button type="{{ input.input_type }}" 
    {% if input.input_type != "hidden" %}
        class="{{ input.css_class }}"
        id="{{ input.input_type }}-id-{{ input.name|slugify }}">
    {% endif %}
    {{ input.content }}
</button>

Supposing you name the previous template button.html and you position it in one of your TEMPLATE_DIRS. This is what the layout object would like:

class ButtonTag(object):
    template = "button.html"
    input_type = 'button'

    def __init__(self, content, **kwargs):
        self.content = content

        if kwargs.has_key('css_class'):
            self.css_class = kwargs.get('css_class')

        self.template = kwargs.get('template', self.template)

    def render(self, form, form_style, context):
        """
        Renders a `<button />` container
        """
        return render_to_string(self.template, Context({'input': self}))

And this is how you would use it:

ButtonTag("<img src='whatever.png' /> Delete", css_class="blues")

I haven't tested the code, but it should work. If you want to be able to set the button's id, you will have to add self.css_id and modify the template code accordingly.

Feel free to ask me all your questions on this, regards
Miguel

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants