Hi,
I have a working-ish search dropdown. It queries a datasource dished out by DRF. The search dropdown queries correctly and finds results, but when selected the value isn't copied into the underlying hidden input. This isn't in place in the semantic ui docs so I assume this is specific to the django implementation. Do I need to manually copy the value into the hidden field onChange or is it a fault with the API mapping that means that although display of values is working, the underlying value isn't?

JS

    <script>
    $('.ui.dropdown')
      .dropdown()
    ;
    
    $('.ui.dropdown.search')
      .dropdown({
        apiSettings: {
          // this url parses query server side and returns filtered results
          url: '//127.0.0.1:8000/api/cities_light/cities/?q={query}'
        },
      })
    ;
    
    </script>

forms.py

class PublicLeadForm(ModelForm):
    email = EmailField()
    captcha = ReCaptchaField(label="Protect us from spammers...", widget=ReCaptchaWidget())
    locality = CharField(label="Town / Area", widget=TextInput(
            attrs={"_style": "search", "_override": "Select", "_name": "locality", "_dropdown_icon": "search"}))
    questions = CharField(label="Any Questions?", widget=Textarea(attrs={'rows':4,}))

    class Meta:
        model = Lead
        fields = ['name', 'email', 'gender', 'locality', 'age', 'questions', 'captcha']

Example API response

{
    "count": 1,
    "next": null,
    "previous": null,
    "results": [
        {
            "url": "http://127.0.0.1:8000/api/cities_light/cities/339/",
            "country": "http://127.0.0.1:8000/api/cities_light/countries/1/",
            "region": "http://127.0.0.1:8000/api/cities_light/regions/4/",
            "name": "Uxbridge",
            "name_ascii": "Uxbridge",
            "geoname_id": 2635042,
            "alternate_names": "",
            "display_name": "Uxbridge, England, United Kingdom",
            "search_names": "uxbridgeenglandunitedkingdom uxbridgeunitedkingdom",
            "latitude": "51.54890",
            "longitude": "-0.48211",
            "population": 0,
            "feature_code": "PPLA3",
            "timezone": "Europe/London"
        }
    ]
}

It would be very helpful if you would set metadata based upon the field type in models.py (e.g. models.IntegerField would cause step="1" to be added as metadata, models.DecimalField would yield step=".01", PositiveIntegerField would yield min="1"). Thanks for your consideration.

I would be cool if the ModelChoiceField rendered as semantic-ui dropdown (like choices) instead of a standard select field.

Do you have plans to extend to other elements of semantic ui like buttons or cards?

The error is : 'CallableChoiceIterator' object does not support indexing

Hello

Add semanticuiform to your INSTALLED_APPS. not semanticuiforms, without the s at the end.

Will django-semanticui-forms handle formsets? If so, what is the default rendering - a table?

Dropdown renders but cannot be clicked

A co-worker asked if django-semanticui-forms has layout capability like django-material does. It would be very useful to be able to do layout like this in the form class rather than having to iterate through fields. Any possibility of seeing this implemented?

For dropdown menu items, Semantic UI allows a value other than the primary key to be used as the value submitted in the request via the data-value attribute on the menu item. I can't think of a way to do this in the current implementation of django-semanticui-forms other than excluding the field from render_form and then rendering the field by hand (which I am currently doing). If there is not a built-in way to do this, I would like to request this feature. An example is that I am currently building a dropdown choice field for recipient email addresses. For users in the database, I need to have the dropdown render their email addresses in the data-value attribute of the menu item, not the id of the user record. I am doing it this way because I also want to initialize the dropdown as {allowAdditions: true} so that additional free-form email addresses can be entered. The "recipient" field is defined as a CharField that stores email addresses as comma-separated values. Thank you.

I know semantic-ui does not have specific support for help text but Django does and it is not output. It would be nice if we could add it to the html markup:

<div class="field">
<label for="id_myfiled">My field</label>
<input id="id_myfield" maxlength="32" name="myfield" type="text" value="" required="">
**<div class="help-text">This comes form model or form field help_text</div>
</div>

It could then be styled in css:

.ui.form .help-text {
    color: rgba(0,0,0,.4);
    font-size: .875em;
}

Field div could have id allowing easily hooking up some javascript. For example I have field with id="div_id_expire_date" then we can hook up calendar with some properties like minDate or maxDate.

In Checkbox Usage it says that checkboxes do not require Javascript in order to function. Your current rendering of checkboxes requires that the boxes be initialized with JS. Might it be a good idea to have a form variable to allow us to determine how we want checkboxes to be rendered?

If the Django form contains fields of type HiddenInput (and, I suppose, probably MultipleHiddenInput as well), the fields are not rendered as hidden. It would be great if this could be fixed soon. It is the one problem that is keeping me from fully implementing django-semanticui-forms. I've worked around the problem for now by using my own template and rendering hidden and visible fields separately by hand like this and doing an include of my form-rendering template, but of course I'd rather just be able to do {% render_form form %}.

This is my approach to set style semantic ui on formset.

<form action="." method="post">
    {% csrf_token %}
    {{ formset.management_form }}
    <table class="ui table">
        {% for form in formset %}
            {% render_form form %}
        {% endfor %}
    </table>
    <input type="submit" value="Save">
</form>

The result will look like this on Question-Answer formset.

But I think this is not best approach because input text box won't change. Is there another best approach?

Hi,

Is it possible to change the error that is displayed for the checkbox field? See image:

The arrow points up to nothing. Not sure if you can change the arrow for the checkbox field only to point left by adding the "left" class to the label? If not, maybe move the error to below the field or perhaps just move the error to below the field entirely - like the other errors.

Thanks!

I am rendering forms with the {% render_form form_name %} tag, so I would like to be able to add additional SUI classes to the rendered components in forms.py (specifically, I am trying to enhance a dropdown to be a "search" dropdown). When I place the "search" class on the field in forms.py, django-semanticui-forms is placing the class on the hidden input and not the <div class="ui selection dropdown"> as needed:

widgets = {
    'location': forms.Select(attrs={'class':'search'})
}

If I use the django-semanticui-forms helper "_field_class" in place of just "class", it places the search class on the field div that wraps the dropdown, not the dropdown div. Is there a way to do what I want to do within the existing release, or would this be something that needs a fix? Perhaps an additional "_component_class" helper that would always place additional classes on the component's wrapper div? Another example where this could be needed would be:

<div class="ui input">
  <input type="text" placeholder="Search...">
</div>

in which you might want to place another class on the wrapper div such as "disabled " or "loading".

We are rendering a lot of SUI forms and getting a lot of use from this library. Thank you.

Choice fields throw a UnicodeDecodeError if one of the choices is non-ascii.

The reason appears to be in line 49 of semanticuiforms.py

Changing the line from
self.values["field"] = str(FIELDS.get(name, FIELDS.get(None))(self.field, self.attrs))
to
self.values["field"] = FIELDS.get(name, FIELDS.get(None))(self.field, self.attrs)
fixed the problem for me (note the removed str())

I am using the following for a search selection field as you suggested doing in issue 17, and I am setting this inside widgets={} in forms.py:
"my_field": forms.TextInput(attrs={"_style": "search", "_override": "Select"})
The dropdown icon is rendered on the right side of the field instead of the search icon. If I do:
"cover_stock": forms.TextInput(attrs={"_style": "search", "_override": "Select", "_icon": "search"})
then nothing changes in the rendering - the dropdown icon is still rendered inside the <input>, not the search icon. Fortunately, everything else looks right in the rendering and the search field behaves properly, but how can I replace the dropdown icon with the search icon?

If I set the empty_label parameter in a form in forms.py, AND if the field is required, then it seems I should be able to handle things with the first code below and that django-semantic-ui should take care of rendering the empty_label value as the valueless option in the dropdown. Instead, I have to inject the empty value by hand as shown in the second set of code below.

class MyForm(ModelForm):
........
self.fields[my_field'].empty_label = 'Entire Job'
self.fields['my_field'].queryset = MyStep.objects.all()

class MyForm(ModelForm):
........
self.fields[my_field'].empty_label = 'Entire Job'
self.fields['my_field'].choices = (('', 'Entire Job'),) + tuple(MyStep.objects.all().values_list('id', 'name'))

I think this:
Fields to be excluded should be separated by comments.
should say this:
Fields to be excluded should be separated by commas.

In a form declaration in forms.py I have:
self.fields['machine'].disabled = True
This should come through in the html as
<div class="ui disabled field>
...
</div>

But it is not coming through with "disabled" as part of the class. Can you make the disabled class declaration come through on the individual field? I'd rather not have to test for the name of the field in the template and add the class there since simply using {% render_form my_form %} is working so well.

Initial ChoiceField value is ignored when it's type equals boolean. Works flawlessly with string for example initial="False" passed.

I need to render fields as inline so that the label is beside the field instead of above it. Ideally there would be two ways to do this: a Django forms variable (or render_form parameter) and a variable for individual fields. I have actually implemented it with an individual field variable ( _inline="true"), but I'm pretty new to Django and so haven't yet had time to work through how to do the whole form within the django-semanticui-forms library. Would you be able to implement this request for these two options soon? Or would you like me to submit a pull request for my _inline implementation?