I am switching from Django Crispy Forms to Floppy Forms, but my desired Bootstrap styling appears to be lost; now it just looks like a plain unstyled form.
Crispy
Here is what I had with Crispy Forms's Bootstrap template pack:
Here was the generated source:
<div id="div_id_sent_amount" class="form-group has-error">
<label for="id_sent_amount" class="control-label requiredField">How much would you like to give?
<span class="asteriskField">*</span>
</label>
<div class="controls ">
<select class="select form-control" id="id_sent_amount" name="sent_amount"><option value="" selected="selected">---------</option><option value="0.00">$0.00</option><option value="0.05">$0.05</option><option value="0.10">$0.10</option></select>
<span id="error_1_id_sent_amount" class="help-block"><strong>This field is required.</strong></span></div>
</div>
Floppy
Here is what I get with Floppy using the Bootstrap layout here.
Here is the generated source:
<div class="form-group error">
<label class="col-sm-4 control-label" for="id_sent_amount">Sent amount <span class="required">*</span>:</label>
<div class="controls col-sm-8 field-sent_amount">
<select id="id_sent_amount" name="sent_amount">
<option value="" selected="selected">---------</option>
<option value="0.00">$0.00</option>
<option value="0.05">$0.05</option>
<option value="0.10">$0.10</option>
</select>
<ul class="errorlist"><li>This field is required.</li></ul>
</div><!--- .controls -->
Any ideas on what I am missing?
floppyforms just provides easier layout and widget control, it does not automatically enable bootstrap styling.
For that, you have to do a bit of work as detailed in the documentation.
In summary, you have to create these templates:
floppyforms/templates/floppyforms/layouts/bootstrap.html
floppyforms/templates/floppyforms/rows/bootstrap.html
floppyforms/templates/floppyforms/layouts/default.html
floppyforms/templates/floppyforms/errors.html
Fill them with bootstrap-specific styling (examples are provided in the documentation).
Keep in mind the examples are for an older version of bootstrap; you might want to update the templates with the current version of bootstrap.
You can edit the templates by hand to bring them up to date, or use django-floppyforms-bootstrap3 which does exactly what it says - updates the templates for bootstrap3 compatibility.
Related
I have a Django form field that is prefilled and using widget gave it a class. The form is rendered out in html as
<div id="id_clothingType" class="closet-form-section form-clothing-type">
<div>
<label for="id_clothingType_0">
<input type="radio" name="clothingType" value="11" class="closet-form-section form-clothing-type" required="" id="id_clothingType_0">
Accessory
</label>
</div>
<div>
<label for="id_clothingType_1">
<input type="radio" name="clothingType" value="12" class="closet-form-section form-clothing-type" required="" id="id_clothingType_1" checked>
Top
</label>
</div>
</div>
How do I style the radio inputs as buttons such that it changes its background color when it is checked without changing the html (form template)?
The problem is that the input is within the labels, so I am unable use the conventional way of the input:checked + label to style them.
hi i need to remove payment_address payment_method from checkout/checkout page Opencart 3.x.
i donot want extension, please some body help on this.
Theoretically, you can activate a COD payment method and then simply hide this step with basic CSS and a bit of JS to open the final step in the default checkout.
But Opencart heavily relies on Payment_address. Payment Address has several fields that are required like country, zone and often postcode.
Removing the payment_address will break the whole system. What you can do is via simple HTML and CSS, populate the fields with default values and then hide with CSS.
for example in catalog/view/theme/default/template/checkout/payment_address.twig
...html
<div class="form-group required">
<label class="col-sm-2 control-label" for="input-payment-firstname">{{ entry_firstname }}</label>
<div class="col-sm-10">
<input type="text" name="firstname" value="<MY_DEFAULT_FIRST_NAME>" placeholder="{{ entry_firstname }}" id="input-payment-firstname" class="form-control" />
</div>
</div>
...
do this for all the fields.
then in catalog/view/theme/default/template/checkout/checkout.twig do style="display:none'
<div class="panel panel-default" style="display:none">
<div class="panel-heading">
<h4 class="panel-title">{{ text_checkout_account }}</h4>
</div>
<div class="panel-collapse collapse" id="collapse-payment-address">
<div class="panel-body"></div>
</div>
</div>
{% else %}
<div class="panel panel-default" style="display:none">
<div class="panel-heading">
<h4 class="panel-title">{{ text_checkout_payment_address }}</h4>
</div>
<div class="panel-collapse collapse" id="collapse-payment-address">
<div class="panel-body"></div>
</div>
</div>
this will just hide the payment_address block but it will still be there.
and now you need to skip the payment address step by calling the Continue button via JavaScript
so in the same file catalog/view/theme/default/template/checkout/checkout.twig
after line 165
$('a[href=\'#collapse-payment-address\']').trigger('click');
//add this code to trigger continue button:
$('#button-payment-address').trigger('click');
You might need to wrap the trigger click action with setTimeout becuase you might trigger the click before the form is actually loaded.
I would also advise to do this in a CUSTOM theme folder, and not in the default opencart theme. this way you can do the modifications without touching the core file.
I'm using the django-select2 package to implement Searchable Select on a ForeignKey field.
I was successful in getting the functionality to work by following the steps mentioned in the docs but I am having trouble with the styling.
To render my form I use crispy-forms. All the other widgets get rendered properly except the Select2Widget.
As can be seen in the above image, the height and width of the form element is not dynamic like other elements.
HTML code generated:
<div class=""> <select name="current_user" data-minimum-input-length="0" data-allow-clear="true" data-placeholder=""
class="select2widget form-control django-select2" required id="id_current_user">
<option value=""></option>
<option value="">---------</option>
<option value="4" selected>Arpita</option>
</select> </div>
</div>
<div id="div_id_device_admin" class="form-group"> <label for="id_device_admin" class=" requiredField">
Device admin<span class="asteriskField">*</span> </label>
<div class=""> <select name="device_admin" data-minimum-input-length="0" data-allow-clear="true" data-placeholder=""
class="select2widget form-control django-select2" required id="id_device_admin">
<option value=""></option>
<option value="">---------</option>
<option value="4" selected>Arpita</option>
</select> </div>
</div>
This is how I set the widget in ModelForm.
def __init__(self, *args, in_org, **kwargs):
...
self.fields['current_user'].widget = Select2Widget()
self.fields['current_user'].queryset = in_org.user_set.all()
I feel this is mostly an issue with CSS styling and I am unable to figure out the issue. Any help would be greatly appreciated.
For those who are looking for a solution (though I think it's not the best),
you can fix the layout issue by passing attrs={'data-width': '100%'}
e.g.
self.fields['current_user'].widget = Select2Widget(attrs={'data-width': '100%'})
or
current_user = forms.ChoiceField(
widget=ModelSelect2Widget(
model=User,
search_fields=['username__istartswith'],
attrs={'data-width': '100%'},
),
)
I am using crispy_forms and FormHelper. I have a model field declared as:
active = models.BooleanField(default=True)
And in my ModelForm, I have tried both the following in my Layout:
self.helper.layout = Layout(
...
InlineCheckboxes('active'),
Field('active'),
...
which both not providing the desired result:
Please see image link
While using InlineCheckboxes, I do not see the checkbox and using only Field, it's not formatted correctly.
Please help
Here is the link to the "Bootstrap Layout objects" section of Crispy Forms docs.
InlineCheckboxes: It renders a Django forms.MultipleChoiceField field using inline checkboxes
InlineCheckboxes isn't appropriate for your model's field-type.
A hacky way to achieve what you're looking for is to use PrependedText with an empty string for the text argument.
...
PrependedText('active', ''),
...
Examining the source it appears that a boolean field by default renders the <input> tag inside the <label> tag. Using the hack above, 'Active' stays in the <label> and the <input> is put where you'd expect: in a <div> with "control" css class. Compare the following:
PrependedText('active', ''):
<div id="div_id_active" class="form-group">
<label for="id_active" class="control-label">Active</label>
<div class="controls">
<div class="input-group">
<input type="checkbox" name="active" class="checkboxinput" id="id_active" />
</div>
</div>
</div>
Field('active'):
<div class="form-group">
<div id="div_id_active" class="checkbox">
<div class="controls">
<label for="id_active" class=""><input type="checkbox" name="active" class=
"checkboxinput checkbox" id="id_active" /> Active</label>
</div>
</div>
</div>
Update
I've confirmed that this is fixed in the dev branch of django-crispy-forms.
Reference this commit: 5c3a268
And this github issue: #267
Can Foundation 4 be initialized only in certain areas of the page?
For instance, if I have 2 divs, can I call foundation("#div2") and all CSS and javascript events are applied only within div#2?
Thanks a 1000!
Generally it won't affect you. The grid system for example is mainly controlled by CSS. For forms, unless you apply the custom class to your form the js for forms elements won't kick in. To illustrate that, one of the two forms below has the custom class and the other don't. Notice that Foundation will add two anchor tags and an unordered list for the form with custom class:
<form id="form1">
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</form>
<form id="form2" class="custom">
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</form>
Here's the fiddle to that to see it in action.
UPDATE: For general "section formatting" yes you can apply foundation to some sections of your page. But take note though that the grid system will still be applied even if the grid is outside the section you targeted. Again, that is because they are mainly controlled by CSS. Here's another illustration:
<h1>The Grid System will still be applied to this</h1>
<div class="row1">
<div class="large-5 large-centered columns">
<p class="panel">Centered Div</p>
</div>
</div>
<div id="foundationArea">
<h1>Only apply Foundation here</h1>
<form id="form1" class="custom">
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</form>
<div class="row">
<div class="large-6 columns panel">
<p>Test</p>
</div>
</div>
</div>
<h1>Foundation is not allowed here</h1>
<form id="form2" class="custom">
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</form>
See this updated fiddle to show the updated example given here.