I didn't expect creating a radio input in a form using Bootstrap3's style could have some many pitfalls.
Here is a model I have:
Here is the corresponding ModelForm:
I have a sex field which let users to pick their gender. When running the code above, I get three choices instead of two:
- '--------' # django automatically insert this 'default' option
This is of course not what we want. There should only be two options, 'Male' and 'Female'. So to correct this issue, I had to add TWO extra parameters to the Model:
Note that I added blank=False AND default='M'. If you only include blank=False, you will still see the '--------' option. It is important to have both of them set.
Now, I want to style my forms using Bootstrap3. To do this, I recommend using crispy-forms
Crispy-form creates a Bootstrap3 style input field for every single field defined in the model when this line runs:
The UserProfile model has 13 fields. It is nice that I don't have to specify each one of the 13 fields. But here comes the problem, when the radio input is been rendered. The male and female options are listed vertically. I want them to be listed horizontally. Crispy-form does provide an inline option for rendering radio inputs horizontally. This is nice, but how can I replace the default Layout of the gender field with the suggested inline Layout?
Crispy-forms allows you to access the Layout of each field by using index.
With the tweaks above, now I have a wonderful radio input for gender selection :) So many small things need to be taken care of for something seems so trivial.
Bootstrap offers a great Accordion element but it needs a few patches:
- An up and down arrow beside the accordion's title would be nice.
- The clickable area is centered around the title text. If you click between the text and the background border, the accordion will not show or hide.
- A hide all or show all method would be nice.
I created a JSFiddle: http://jsfiddle.net/p1ok0t51/4/
A few key points to point out,
the up/down arrow switch is enabled by the CSS.
I added the following to both the div.panel-heading and h4 element, so that the clickable area is the entire title div:
The data-toggle="collapse" attribute makes your element clickable, by adding it to the div.title element, the entire div becomes clickable. Thus, when users click in between the title text and the border of the div.title element, the accordion will still respond.
The data-target="#collapse2" attribute will add and remove a class named collapsed when clicked. The CSS in the JSFiddle has different styles when collapsed appear and disappear.
I removed the data-parent="#accordion" attribute to allow show all and hide all. If this attribute is added like in the Bootstrap's example, then only one section can be expanded at anytime.
A great website for looking up Bootstrap icons (if you don't want to use the up/down arrow button), click here: http://glyphicons.bootstrapcheatsheets.com/
I used Jasny's image upload plugin for Bootstrap to allow users upload images to a server. Later on, I had to populate a page with these uploaded images. Here is how I did it:
That's it :)