Add class to double curly brackets

Question

i am using the double curly brackets to import variables into my html from my python code. I was inquiring on how to add class to these curly brackets in order to modify the variable in css. Here is a piece of code I am working on.

              <div>  
                {{ form.username.label(class ='username-label') }}
                <div>
                    {% if form.username.errors %}
                        {{ form.username }}
                        <div>
                            {% for error in form.username.errors %}
                                <span>{{ error }}</span>
                            {% endfor %}
                        </div>
                    {% else %}
                        {{ form.username }}
                    {% endif %}
                </div>

I tried to add class into the form.username.label in order to change the appearance of the label but it doesnt work. Is there a way to do it. I want it specifically for that label and not the whole div. I hope the only solution is not to add another div tag to the variable

What do you mean, exactly? If you want to format e.g. the `span` with the error in, just add a class *as part of the HTML*, not the templating - `{{ error }}`, for example. — jonrsharpe, Mar 31 '20 at 13:13

Ryuno-Ki · Accepted Answer · 2020-03-31T16:18:02.973

1

Let's see, whether I get you correctly.

{{ form.username.label(class_='username-label') }}

should become

{{ form.username.label(class_='username-label with-errors') }}

in case the form is invalid.

I'd approach it with

<div>
    {% if form.username.errors %}
        {{ form.username.label(class ='username-label with-errors') }}
    {% else %}
        {{ form.username.label(class ='username-label') }}
    {% endif %}
    <div>
        {% if form.username.errors %}
            {{ form.username }}
            <div>
                {% for error in form.username.errors %}
                    <span>{{ error }}</span>
                {% endfor %}
            </div>
        {% else %}
            {{ form.username }}
        {% endif %}
    </div>
</div>

Also you could use actual <label> and an <ul> for improving semantics.

Edit: Added underscores, so class_ is applied in a Flask template correctly.

edited Mar 31 '20 at 16:18

answered Mar 31 '20 at 13:22

Ryuno-Ki

692
1
6
8

my question was if one is able to style that class in css. For instance, that class 'username-label'...i want to style it in css ..is it usually possible? – NelsonNN Mar 31 '20 at 14:42
Depends on what gets rendered (can't tell without knowing the template language - jitsi2?). If you want to target a HTML class in CSS, the selector has a `.` (dot). E.g. `.username-label { background-color: red; }` – Ryuno-Ki Mar 31 '20 at 14:58
so it is actually possible to style it in css as you could stlye any other tag right? coz when i try to style it the label does not change according to the styling i have applied...that is my query. I know how to style in css, i just one to know if it is possible to style that variable inside the double curly brackets which in this case is 'username-label'...i hope you have understood me now..thanks – NelsonNN Mar 31 '20 at 15:07
What is rendered in the client / web browser? Right now I see a mix of template language with HTML. A „tag” is the part between the angle brackets. Your example is rather a text node and not a tag. `{{` and `}}` are delimiters for interpolation, i.e. parts of the template that will get replaced with content. – Ryuno-Ki Mar 31 '20 at 15:09
yes exactly...now i want to style that part of the template that will get replaced(the delimiters), by assigning it a class and then use that class in css – NelsonNN Mar 31 '20 at 15:16
Can you interpolate within `class="({{ interpolation }})`? My understanding was, that `form.username.label` would generate a `` with the attribute `class` set to `username-label`. That's why I asked, what gets rendered in the browser? (e.g. by looking at the Inspector tab in the DevTools of your web browser). – Ryuno-Ki Mar 31 '20 at 15:25
yes it does generate a but the class attribute has not been set...i have set up the class 'username-label' in my css but it is not getting rendered in the browser – NelsonNN Mar 31 '20 at 15:30
Okay, so what technology do you use with the above markup? Django/Flask? PHP? Do you happen to know the name of the template language being used? Perhaps you're missing something … – Ryuno-Ki Mar 31 '20 at 15:31
i use flask (and python)...i also suspect i am missing something – NelsonNN Mar 31 '20 at 15:33
i am not sure about the templating language. i am a begginer – NelsonNN Mar 31 '20 at 15:39
1

Hey, welcome to the Python community then! Personally, I haven't worked with Flask myself yet, but according to its website, it's using Jinja (like Django - what I worked with already). So if I take a look at their documentation, this should work: `{{ form.username.label(class_='username-label') }}` (c.f. https://stackoverflow.com/a/24841273/5189920 ) -- Note the underscore after `class` since it is a reserved keyword in Python! – Ryuno-Ki Mar 31 '20 at 16:03
nice nice....it has worked..thanks a lot men..not all heroes wear caps..i guess django is like a 'larger' version of flask – NelsonNN Mar 31 '20 at 16:15
i will sensei...namaste – NelsonNN Mar 31 '20 at 16:20

Add class to double curly brackets

1 Answers1