Radio button list appear vertically rather than horizontally. Appears alright on Chrome and Firefox. We are using angular js 1.7.
radio group from IE 11
radio group from Firefox 60.3.0 esr
HTML code snippet for the radio group
HTML Code:
<div ng-if="feedbackChoices && feedbackChoices.length > 1" id="629934096_not_helpful" class="choiceText f-b-choices-body ng-scope" ng-show="showChoices">
<br>
<div class="responsePrompt ng-scope" translate="">Where did we go wrong?</div>
<br>
<ul class="selectionRadio f-b-choices selectionGroup629934096_feedback_choices">
<!-- ngRepeat: choice in feedbackChoices --><li ng-repeat="choice in feedbackChoices" class="ng-scope">
<div>
<label><input id="948060864" class="f-b-input" name="selectionGroup" ng-click="submitFeedbackChoice(choice)" type="radio">
<label for="948060864" class="f-b-choices-label ng-scope ng-binding" translate="">The instructions did not apply</label>
</label>
</div>
</li><!-- end ngRepeat: choice in feedbackChoices --><li ng-repeat="choice in feedbackChoices" class="ng-scope">
<div>
<label><input id="948060864_2" class="f-b-input" name="selectionGroup" ng-click="submitFeedbackChoice(choice)" type="radio">
<label for="948060864_2" class="f-b-choices-label ng-scope ng-binding" translate="">The instructions were too long/hard to follow</label>
</label>
</div>
</li><!-- end ngRepeat: choice in feedbackChoices --><li ng-repeat="choice in feedbackChoices" class="ng-scope">
<div>
<label><input id="948060864_3" class="f-b-input" name="selectionGroup" ng-click="submitFeedbackChoice(choice)" type="radio">
<label for="948060864_3" class="f-b-choices-label ng-scope ng-binding" translate="">I need you to do this for me</label>
</label>
</div>
</li><!-- end ngRepeat: choice in feedbackChoices -->
</ul>
</div>
Related
I have a project in Laravel and Livewire.
This is my view displaying a list of projects submitted.
#forelse ($projects as $index => $project)
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<a href="#" wire:click="showProjectDetails({{ $project->slug }})"
class="block p-6 bg-white border border-gray-200 rounded-sm shadow-md hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-blue-500 dark:text-white">
{{ $project->title }}
</h5>
<p class="my-5">Bugdet Ghc500 - Ghc 700</p>
<p class="font-normal text-gray-700 dark:text-gray-400">{{ $project->description }}</p>
<ul class="flex gap-4 text-blue-600 mt-5">
<li>PHP</li>|
<li>Mobile App Development</li>|
<li>Database Management</li>|
<li>C++</li>
</ul>
</a>
</div>
#empty
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<p class="text-4xl">No Projects found</p>
</div>
#endforelse
When I click on a single project, a new view called show-project should display the details of the particular project that has been clicked.
My Livewire controller
public function showProjectDetails($slug)
{
return redirect()->route('show-project.details', $slug);
}
<a href="{{ route('show.project_details', ['slug' => $project->slug]) }}">
and web.php route can be either Controller or Livewire page.
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
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.
Hej all !
As the title of the subject suggest, I wonder if it's possible to have deep linking that works on nested tabs.
I mean, if I use only one tabs container, it works fine, but I don't know how to deep link to a tab inside a parent tab. It should first open the parent tab and then display the goal child tab.
Is it possible using Foundation 6 deep-linking please (without hacks) ?
Let's say we have this code :
<div>
<ul class="tabs" data-tabs id="tabs" data-deep-link="true">
<li class="tabs-title is-active">Content 1</li>
<li class="tabs-title">Content 2</li>
</ul>
</div>
<div class="tabs-content" data-tabs-content="tabs">
<div class="tabs-panel is-active" id="tab1">
My Content 1
</div>
<div class="tabs-panel" id="tab2">
<ul class="tabs" data-tabs id="tab2-tabs" data-deep-link="true">
<li class="tabs-title is-active">Content 2-1</li>
<li class="tabs-title">Content 2-2</li>
</ul>
<div class="tabs-content" data-tabs-content="tab2-tabs">
<div class="tabs-panel is-active" id="tab2-tab1">
My Content 2-1
</div>
<div class="tabs-panel" id="tab2-tab2">
My Content 2-2
</div>
</div>
</div>
</div>
How can I open "My Content 2-2" using deep-linking please ?
I have a saved HTML page which I've opened in notepad++. I would like to extract all the attach points out of the html file. Example from the HTML below:
<div class="contentBar">
<div class="banner" style="">
<span class="bannerRepeat"></span>
<span class="bannerDecal"></span>
</div>
<div>
<div class="logo" data-dojo-attach-point="pageLogoPt">
ABC
</div>
<div class="title" data-dojo-attach-point="pageTitlePt">
ABC
</div>
<div class="userPane">
<div>
<span class="LoginCell LoginText"><span data-dojo-attach-point="welcomeBlockPt">Welcome</span>, <b data-dojo-attach-point="usernameBlockPt">User Name</b></span>
<span widgetid="acme_Button_0" id="acme_Button_0" class="LoginCell Button" data-dojo-type="acme.Button" data-dojo-props="size: 'small'" data-dojo-attach-point="logOutButtonPt"><span widgetid="dijit_form_Button_0" class="dijit dijitReset dijitInline dijitButton ButtonSmall" role="presentation"><span class="dijitReset dijitInline dijitButtonNode" data-dojo-attach-event="ondijitclick:__onClick" role="presentation"><span style="-moz-user-select: none;" aria-disabled="false" id="dijit_form_Button_0" tabindex="0" class="dijitReset dijitStretch dijitButtonContents" data-dojo-attach-point="titleNode,focusNode" role="button" aria-labelledby="dijit_form_Button_0_label"><span class="dijitReset dijitInline dijitIcon dijitNoIcon" data-dojo-attach-point="iconNode"></span><span class="dijitReset dijitToggleButtonIconChar">●</span><span class="dijitReset dijitInline dijitButtonText" id="dijit_form_Button_0_label" data-dojo-attach-point="containerNode">Logout</span></span></span><input value="" class="dijitOffScreen" data-dojo-attach-event="onclick:_onClick" tabindex="-1" role="presentation" aria-hidden="true" data-dojo-attach-point="valueNode" type="button"></span></span>
</div>
<div>
<span id="printLink" style="display:none;">Print</span>
<span id="zoomPercentageDisplay"><span data-dojo-attach-point="zoomBlockPt">Zoom</span>: 100%</span>
<span id="smallFontSizeLink" style="font-size: .8em;">A</span>
<span id="defaultFontSizeLink" style="font-size: 1em;">AA</span>
<span id="largeFontSizeLink" style="font-size: 1.2em;">AAA</span>
</div>
</div>
</div>
</div>
I would like to get:
pageLogoPt
pageTitlePt
welcomeBlockPt
usernameBlockPt
etc ...
Is this possible? Thanks
You can do the following:
Replace (data-dojo-attach-point="[^"]+)(?=") with \n\1\n. This will put what you're looking for on separate lines.
Mark All based on the regex data-dojo-attach-point="[^"]+. Tick "Bookmark line" checkbox.
Search -> Bookmark -> Remove Unmarked Lines
Replace data-dojo-attach-point=" with blank.
This will give you your list with each item in its own line.
Tested on Notepad++ 6.8.8.
Inspired by https://superuser.com/questions/477628/export-all-regular-expression-matches-in-textpad-or-notepad-as-a-list.