Databases
StackOverflow2013
Postsdbo
POCheckbox issues in CSS and HTML
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCheckbox issues in CSS and HTML
    text
    copied!<p>I'm making a checkbox in Django, but I'm seeing when I render the checkbox a nicely rendered checkbox pops up which is good, but also a traditional looking checkbox comes along for the ride. My CSS is the following:</p> <pre><code>input[type=checkbox]:before { display:inline-block; content:""; width:20px; height:20px; background:red; border:solid 3px #e2e2e2; margin:0px;} input[type=checkbox]:checked:before { display:inline-block; background:green; width:20px; height:20px; border:solid 3px #e2e2e2; margin:0px;}​ </code></pre> <p>I know this isn't really a Django issue - I'm creating my own render function so I can spit out HTML in any format, but I don't know why I get two functioning textboxes. Here is my Django render for each option. This is taken and adapted from the render function on CheckBoxWidget - I.e. wanted to employ some formatting to it hence I created my own function with a different render function.</p> <pre><code>for i, (option_value, option_label) in enumerate(chain(self.choices, choices)): # If an ID attribute was given, add a numeric index as a suffix, # so that the checkboxes don't all have the same ID attribute. if has_id: final_attrs = dict(final_attrs, id='%s_%s' % (attrs['id'], i)) label_for = format_html(' for="{0}"', final_attrs['id']) else: label_for = '' cb = CheckboxInput(final_attrs, check_test=lambda value: value in str_values) option_value = force_text(option_value) rendered_cb = cb.render(name, option_value) option_label = force_text(option_label) r = i % 2 if len(option_label) &gt; 40: option_label = force_text(option_label).split('[')[0] if len(option_label) &gt; 40: option_label = force_text(option_label)[0:40] output.append(format_html(row_label[r]+'&lt;li class="option table"&gt; &lt;label {0} &gt; &lt;div class="cell" id="left"&gt; &lt;div class="icon profile" data-icon-name="profile"&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="cell" id="center"&gt;{2}&lt;/div&gt;&lt;div class="cell" id="right"&gt;&lt;div class="styled-check"&gt;&lt;div class="check"&gt;&lt;/div&gt;{1}&lt;/label&gt;&lt;/div&gt;&lt;/div&gt;&lt;/li&gt;&lt;/div&gt;', label_for, rendered_cb, option_label)) output.append('') </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload