EDIT 1
I've tryed using bith crispy-forms and widegt-tweaks but it doen't works.
Seems that widget=forms.RadioSelect() is not compatible with use of these 2 libraries together...
I want to display radio button inline using Boostrap.
I've tryed to add bootstrap form-check-inline class by setting attrs attribute of Django widget.
But When I debug, form-check-inline is not applyed.
If I add form-check-inline class "manually" in div element containing radiobutton (see below) it works.
template.html
{{ form.eli_oui_ebo|as_crispy_field }}
html page when inspected
<div class=""> ***<= here should be applyed form-check-inline class****
<div class="form-check">
<label for="id_id_eli_oui_ebo_0_1" class="form-check-label">
<input type="radio" class="form-check-input" name="eli_oui_ebo" id="id_id_eli_oui_ebo_0_1" value="0" class="test">
Non
</label>
</div>
<div class="form-check">
<label for="id_id_eli_oui_ebo_0_2" class="form-check-label">
<input type="radio" class="form-check-input" name="eli_oui_ebo" id="id_id_eli_oui_ebo_0_2" value="1" class="test">
Oui
</label>
</div>
</div>
form.py
self.fields['eli_oui_ebo'] = forms.TypedChoiceField(label = 'A eu, dans les 72h, un contact avec un malade Ebola confirmé par RT-PCR',widget=forms.RadioSelect(attrs={'class': 'form-check-inline'},),required=False,choices=[i for i in Thesaurus.options_list(1,'fr') if i != (None,'')], empty_value=None, disabled=DISABLED)```
You can use wrapper_class "form-check-inline"
Please refer crispy-bootstrap5/django source: https://github.com/django-crispy-forms/crispy-bootstrap5/blob/main/crispy_bootstrap5/templates/bootstrap5/layout/inline_field.html
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 need to render individual fields from my Form so I use the filter |as_crispy_field from crispy-forms and use bootstrap 3 for the style but I need to do it in a form-inline like the first example here bootstrap example page so I tried to do it like this:
template.html
<form class="form-inline">{% csrf_token %}
{{ form.name|as_crispy_field }}
</form>
But the label shows above the TextInput field and not in-line as I need. How can I do this using |as_crispy_field?
EDIT: Here is the HTML after the render with crispy
<form class="form-inline"><input type='hidden' name='csrfmiddlewaretoken' value='****...' />
<div id="div_id_name" class="form-group">
<label for="id_name" class="control-label requiredField">
Name<span class="asteriskField">*</span>
</label>
<div class="controls ">
<input class="form-control textinput textInput form-control" id="id_name" maxlength="100" name="name" type="text" />
</div>
</div>
</form>
The one you linked to, with the labels on the left of the fields, is called "form-horizontal" in Crispy. It is explained here. You need to set these helper properties
helper.form_class = 'form-horizontal'
helper.label_class = 'col-lg-2'
helper.field_class = 'col-lg-8'
Actual inline forms, with the label displayed inside the fields are right below on the same page. You only need to set two helper properties
helper.form_class = 'form-inline'
helper.field_template = 'bootstrap3/layout/inline_field.html'
That should do it, if I understood your question correctly.
I have a simple input radio for toggling between active and inactive. I can not figure out how to get Ember to tie this to the model. My RAW html currently looks like this:
<fieldset class="checkboxes">
<label class="active" for="is_active">
<input type="radio" id="is_active" name="status" value="1" checked="">
<span>Active</span>
<div class="input"></div>
</label>
<label class="sep">/</label>
<label class="inactive" for="inactive">
<input type="radio" id="inactive" value="0" name="status">
<span>Inactive</span>
<div class="input"></div>
</label>
Does anyone have any ideas on how to do this using the Ember form model binding?
make your labels action, that will allow you to play with them in the controller. I hope this help....
<fieldset>
<label class="option-buttons" for="reason1" {{action "setDeclineReason" "Too Expensive" on="mouseDown"}}>
<input name="decline-reason" id="reason1" value="Too Expensive" type="radio">
<span>
<div class="check"></div>
Too expensive
</span>
</label>
<label class="option-buttons" for="reason2" {{action "setDeclineReason" "Lack of Amenities" on="mouseDown"}}>
<input name="decline-reason" id="reason2" value="Lack of Amenities" type="radio">
<span>
<div class="check"></div>
Lack of amenities
</span>
</label>
</fieldset>
App.DeclineController = Ember.Controller.extend({
declineReason: null,
decline: function(){
var update = this.store.update('request', {
id: this.get('model').id,
user_decline_reason: this.get('declineReason')
});
update.save();
actions:{
setDeclineReason: function(declineReason){
this.set('declineReason', declineReason);
}
}
});
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