How to put cards side by side in Angular Material? - angular-material

I'm not sure if some other CSS is messing with the way that I'm creating the site, but I cannot get the two angular-material cards to stay side by side. How can I do this?
<div class="container">
<div class="">
<mat-card>
<mat-card-header>
<mat-card-title>Leading Organization</mat-card-title>
<mat-card-subtitle></mat-card-subtitle>
</mat-card-header>
<mat-divider inset="true"></mat-divider>
<mat-card-content>
<div class="col s6">
<label>Strategic perspective </label>
<p class="range-field">
<mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Strategic"></mat-slider>
</p>
</div>
<div class="col s6">
<label>Being a quick study </label>
<p class="range-field">
<mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Quick"></mat-slider>
<!--<input type="text" id="quick" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_Quick" required />-->
</p>
</div>
<div class="col s6">
<label>Decisiveness</label>
<p class="range-field">
<mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Decisive"></mat-slider>
<!--<input type="text" id="decisiveness" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_Decisive" required />-->
</p>
</div>
<div class="col s6">
<label>Change management</label>
<p class="range-field">
<mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Change"></mat-slider>
<!--<input type="text" id="change" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_Change" required />-->
</p>
</div>
</mat-card-content>
</mat-card>
<mat-card>
<mat-card-header>
<mat-card-title>Leading Self</mat-card-title>
<mat-card-subtitle></mat-card-subtitle>
</mat-card-header>
<mat-divider [inset]="true"></mat-divider>
<mat-card-content>
<div class="col s6">
<label>Taking initiative</label>
<p class="range-field">
<mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Taking"></mat-slider>
<!--<input type="text" id="taking" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_Taking" required />-->
</p>
</div>
<div class="col s6">
<label>Composure </label>
<p class="range-field">
<mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Composure"></mat-slider>
<!--<input type="text" id="composure" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_Composure" required />-->
</p>
</div>
<div class="col s6">
<label>Balance between personal and work life </label>
<p class="range-field">
<mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Balance"></mat-slider>
<!--<input type="text" id="balance" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_Balance" required />-->
</p>
</div>
<div class="col s6">
<label>Self-awareness </label>
<p class="range-field">
<mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_SelfAware"></mat-slider>
<!--<input type="text" id="seflawareness" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_SelfAware" required />-->
</p>
</div>
<div class="col s6">
<label>Career management </label>
<p class="range-field">
<mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Career"></mat-slider>
<!--<input type="text" id="career" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_Career" required />-->
</p>
</div>
</mat-card-content>
</mat-card>
</div>
<mat-card>
<mat-card-header>
<mat-card-title>Leading Others</mat-card-title>
<mat-card-subtitle></mat-card-subtitle>
</mat-card-header>
<mat-divider [inset]="true"></mat-divider>
<mat-card-content>
<div class="col s6">
<label>Leading employees</label>
<p class="range-field">
<mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Leading"></mat-slider>
<!--<input type="text" id="leading" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_Leading" required />-->
</p>
</div>
<div class="col s6">
<label>Confronting problem employees</label>
<p class="range-field">
<mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Confront"></mat-slider>
<!-- <input type="text" id="confront" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_Confront" required />-->
</p>
</div>
<div class="col s6">
<label>Participative </label>
<p class="range-field">
<mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Confront"></mat-slider>
<!--<input type="text" id="participative" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_Participative" required />-->
</p>
</div>
<div class="col s6">
<label>Building collaborative relationships </label>
<p class="range-field">
<mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Build"></mat-slider>
<!--<input type="text" id="buid" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_Build" required />-->
</p>
</div>
<div class="col s6">
<label>Compassion</label>
<p class="range-field">
<mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Compassion"></mat-slider>
<!--<input type="text" id="compassion" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_Compassion" required />-->
</p>
</div>
<div class="col s6">
<label>Putting people at ease</label>
<p class="range-field">
<mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Putting"></mat-slider>
<!--<input type="text" id="putting" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_Putting" required />-->
</p>
</div>
<div class="col s6">
<label>Respect for differences</label>
<p class="range-field">
<mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Respect"></mat-slider>
<!--<input type="text" id="respect" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_Respect" required />-->
</p>
</div>
</mat-card-content>
</mat-card>
<mat-card>
<mat-card-actions>
<button type="submit" class="btn waves-effect waves-light blue darken-4"
[disabled]="!predictionForm.valid">
Predict
<i class="material-icons right">cloud</i>
</button>
<span class="right"></span>
<a class="btn waves-effect waves-light right"
(click)="resetForm()">
Reset
<i class="material-icons right">clear</i>
</a>
</mat-card-actions>
</mat-card>

mat-card is displayed as block, that means you need add some css properties to the parent or card itself.
This is a basic example using flex-box:
<div style="display: flex;">
<mat-card style="flex: 1 1 auto;">Card 1</mat-card>
<mat-card style="flex: 1 1 auto;">Card 2</mat-card>
</div>

Related

rails amp form error request and response access-control-allow-origin

i'm using rails amp and setting my amp route for contact form
<form id='contactusform' method="POST" class="p2" action-xhr = "<%= addquery_path %>" custom-validation-reporting="as-you-go" target="_top">
<%= hidden_field_tag :authenticity_token, form_authenticity_token -%>
<div class="form-row">
<div class="inline-form">
<label class="inline-label">
<input type="text" id="as-you-go-name" pattern="p{L}+\s\p{L}+" class="inline-label-input input-item" name='name' value="" required />
<span class="inline-label-label">Name</span>
</label>
<div class="validation-blk">
<span visible-when-invalid="valueMissing" validation-for="as-you-go-name">Please enter your first name</span>
<span visible-when-invalid="patternMismatch" validation-for="as-you-go-name">Please enter characters only</span>
</div>
</div>
</div>
<div class="form-row">
<div class="inline-form">
<label class="inline-label">
<input type="email" id="as-you-go-email" class="inline-label-input input-item" value="" name='email' required />
<span class="inline-label-label">Email</span>
</label>
<span visible-when-invalid="valueMissing" validation-for="as-you-go-email">Please enter your email address</span>
<span visible-when-invalid="typeMismatch" validation-for="as-you-go-email"></span>
</div>
</div>
<div class="form-row">
<div class="inline-form">
<label class="inline-label">
<input type="number" id="phone-number" name='phone' class="inline-label-input input-item" value="" required />
<span class="inline-label-label">contatct number</span>
</label>
<span visible-when-invalid="valueMissing" validation-for="phone-number">Please enter your phone number</span>
</div>
</div>
<div class="form-row">
<div class="inline-form">
<label class="inline-label">
<input type="text" id="Cityname" name='city' pattern="\w+\s\w+" class="inline-label-input input-item" value="" required />
<span class="inline-label-label">City</span>
</label>
<span visible-when-invalid="valueMissing" validation-for="Cityname">Please enter your City</span>
</div>
</div>
<div class="form-row">
<div class="inline-form">
<label class="inline-label">
<input type="text" id="Statename" pattern="\w+\s\w+" class="inline-label-input input-item" name='state 'value="" required />
<span class="inline-label-label">State</span>
</label>
<span visible-when-invalid="valueMissing" validation-for="Statename">Please enter your State</span>
</div>
</div>
<div class="form-row">
<div class="inline-form">
<label class="inline-label">
<input type="text" id="Country" pattern="\w+\s\w+" class="inline-label-input input-item" name='country' value="" required />
<span class="inline-label-label">Country</span>
</label>
<span visible-when-invalid="valueMissing" validation-for="Country">Please enter your Country</span>
</div>
</div>
<div class="form-row">
<div class="inline-form selectionbox">
<label class="inline-label">
<select class="select-box custom-select" required name="eventtype"
id="eventtype">
<option value="">QUERY TYPE</option>
<% #app_config.event_type.split('|').each do |event_name,index| %>
<option value="<%= event_name %>"><%= event_name %></option>
<% end %>
</select>
</label>
<span visible-when-invalid="valueMissing" validation-for="eventtype">selectoption message appears like this</span>
</div>
</div>
<div class="form-row">
<div class="ampstart-input inline-block relative">
<textarea name="message" id="message" class="block" rows="5" cols="50" required placeholder="your message"></textarea>
<!-- <label class="textarea-ab" aria-hidden="true">
Your message
</label> -->
<span visible-when-invalid="valueMissing" validation-for="message"></span>
</div>
</div>
<div class="button button-common">
<input type="submit" value="OK" class="ampstart-btn caps">
</div>
<!-- social icons -->
<div submit-success>
<template type="amp-mustache">
Subscription successful!
</template>
</div>
<div submit-error>
<template type="amp-mustache">
Subscription failed!
</template>
</div>
</form>
And my controller saves the form in my database, but the browser throws an error.
def addquery
#contact = Lead.new
#contact.name = params[:name]
#contact.email = params[:email]
#contact.phone = params[:phone]
#contact.city = params[:city]
#contact.state = params[:state]
#contact.country = params[:country]
#contact.enquiry_type = params[:eventtype]
#contact.message = params[:message]
#contact.save
end
when i try to submit my AMP form it showing
amp form error request must have access-control-allow-origin
in my browser console.
as well as the
response must have access-control-allow-origin
Set access-control-allow-origin: <your domain> as a response header in the form handler in rails.
Example, if you are running on localhost set form response header as access-control-allow-origin: http://localhost:3000

bootstrap Form Layout --horizontal with labels on top

I am just trying to have a horizontal form with labels on top. keep in mind I am going to add validation so grouping is important
I am looking for something like this
Name email ID
Mike Mike#hotmail.com something
code
<div class="col-lg-12">
<div class="row">
<div class="page-content">
<div class="panel panel-primary">
<form name="searchform" role="form" >
<fieldset>
<legend></legend>
<div class="form-horizontal">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-horizontal">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-horizontal">
<label for="exampleInputPassword1">Employee ID</label>
<input type="text" class="form-control" id="exampl">
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
this worked for me...let me know if there is a better solution
<form name="searchform" role="form" novalidate>
<fieldset>
<legend></legend>
<div class="col-lg-12">
<div class="row">
<div class="form-group col-xs-3 col-md-3">
<label for="Name" class="control-label"> Name</label>
<input type="text" value='' class="form-control" id="Name" placeholder="Name">
</div>
<div class="form-group col-xs-3 col-md-3">
<label for="associateID" class="control-label">Associate ID</label>
<input type="text" value='' class="form-control" id="associateID" placeholder="Associate ID">
</div>
<div class="form-group col-xs-3 col-md-3">
<label for="ID" class="control-label">ID</label>
<input type="text" value='' class="form-control" id="ID" placeholder="Racf ID">
</div>
<div class="form-group col-xs-3 col-md-3">
<label for="Role" class="control-label">Gateway Role</label>
<p-autoComplete [(ngModel)]="RoleVal" [suggestions]="iRole" name="gatewayRole" placeholder="Gateway Role" (completeMethod)="searchRole($event)" [style]="{'width':'85%'}" [inputStyle]="{'width':'85%'}" field="name" dataKey="id" [dropdown]="true"></p-autoComplete>
</div>
</div>
<div class="row">
<div class="form-group col-xs-3 col-md-3">
<label for="Name" class="control-label">Location</label>
<input type="text" value='' class="form-control" id="Name" placeholder=" Name">
</div>
<div class="form-group col-xs-3 col-md-3">
<label for="associateID" class="control-label">Associate ID</label>
<input type="text" value='' class="form-control" id="associateID" placeholder="Associate ID">
</div>
<div class="form-group col-xs-3 col-md-3">
<label for="racfID" class="control-label">ID</label>
<input type="text" value='' class="form-control" id="ID" placeholder="ID">
</div>
<div class="form-group col-xs-3 col-md-3">
<label for="gatewayRole" class="control-label">Role</label>
<p-autoComplete [(ngModel)]="RoleVal" [suggestions]="iRole" name="Role" placeholder="Role" (completeMethod)="searchyRole($event)" [style]="{'width':'85%'}" [inputStyle]="{'width':'85%'}" field="name" dataKey="id" [dropdown]="true"></p-autoComplete>
</div>
</div>
</div>
</fieldset>
</form>

Angularjs Material md-tabs issue with firefox

I am using md-tabs in md-dialog. It works fine in Chrome but creates issue in firefox. My code is,
<md-dialog aria-label="Mango (Fruit)">
<form>
<md-toolbar>
<div class="md-toolbar-tools">
<h2>Join Us</h2>
<span flex></span>
</div>
</md-toolbar>
<md-dialog-content style="max-width:800px;max-height:810px; " ng-cloak>
<md-tabs md-dynamic-height md-border-bottom md-align-tabs="bottom">
<md-tab label="Register">
<md-content class="md-padding">
<md-input-container class="md-icon-float md-block">
<!-- Use floating label instead of placeholder -->
<label>Name</label>
<input ng-model="name" type="text">
</md-input-container>
<md-input-container md-no-float class="md-block">
<label>Phone Number</label>
<input ng-model="phone" type="text" ng-required="true">
</md-input-container>
<md-input-container>
<label>Country Code</label>
<md-select ng-model="countrycode">
<md-option><em>None</em></md-option>
<md-option ng-repeat="c_code in countrycodes track by $index" ng-value="c_code.code">
{{c_code.name}}
</md-option>
</md-select>
</md-input-container>
<md-input-container class="md-block">
<label>Password</label>
<input ng-model="password" type="password" ng-required="true">
</md-input-container>
</md-content>
<md-dialog-actions layout="row">
<md-button class="md-primary" ng-click="register(name,phone,countrycode,password)" style="margin-right:20px;" >
Register
</md-button>
</md-dialog-actions>
</md-tab>
<md-tab label="Login">
<md-content class="md-padding">
<p class="text-center">{{error}}</p>
<md-input-container md-no-float class="md-block">
<label>Phone Number/Email</label>
<input ng-model="phone" type="text" ng-required="true">
</md-input-container>
<md-input-container class="md-block">
<label>Password</label>
<input ng-model="password" type="password" ng-required="true">
</md-input-container>
</md-content>
<md-dialog-actions layout="row">
<md-button class="md-primary" ng-click="login(phone,password)" style="margin-right:20px;" >
Login
</md-button>
</md-dialog-actions>
</md-tab>
</md-tabs>
</md-dialog-content>
In firefox it is not visible i.e. md-tabs moves to left of dialog box, keeping white space on right. please let me know, how to fix this.

Content Collapsible jquery mobile

I have a problem with jQuery Mobile 1.1.0 accordion ( http://jquerymobile.com/test/docs/content/content-collapsible.html )
I have a page with more accordion, and when I press to open / close the section brings me back to the top of the page.
I have already set:
ajaxEnabled: false;
hashListeningEnabled: false;
linkBindingEnabled: false;
this is my code:
<!-- anagrafica -->
<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="c">
<h3>Scheda cliente</h3>
<!-- Dati azienda -->
<div data-role="collapsible" data-collapsed="true" data-content-theme="c" class="grid-scheda">
<h3>Anagrafica</h3>
<form id="dati-azienda">
<div data-role="fieldcontain">
<label for="ragionesociale">Ragione Sociale:</label>
<input type="text" name="ragionesociale" id="ragionesociale" class="required fullsize" />
</div>
<div data-role="fieldcontain">
<label for="indirizzo">Indirizzo:</label>
<input type="text" name="indirizzo" id="indirizzo" class="fullsize" />
</div>
<div data-role="fieldcontain">
<label for="localita">Località:</label>
<input type="text" name="localita" id="localita" class="large" />
<input type="text" name="cap" id="cap" class="small" placeholder="CAP" />
</div>
<div data-role="fieldcontain">
<label for="pi">Partita IVA:</label>
<input type="number" name="pi" id="pi" class="fullsize" />
</div>
<div data-role="fieldcontain">
<label for="fisso">Fisso:</label>
<input type="number" name="fisso" id="fisso" class="medium" />
<input type="number" name="fax" id="fax" class="medium" placeholder="Fax" />
</div>
<div data-role="fieldcontain">
<label for="mobile">Mobile:</label>
<input type="number" name="mobile" id="mobile" class="fullsize" />
</div>
<div data-role="fieldcontain">
<label for="mail">Mail:</label>
<input type="text" name="mail" id="mail" class="fullsize" />
</div>
<!--
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Altre sedi:</legend>
<input type="checkbox" name="checkbox-0" style="margin-top:0px;" id="checkbox-mini-0" data-mini="true" />
<label for="checkbox-mini-0">Si</label>
</fieldset>
</div>
-->
<fieldset class="ui-grid-a">
<label> </label>
<div class="ui-block-b"><button rel="dati-azienda" type="submit" class="submit submitBTN" data-theme="b">Salva</button></div>
</fieldset>
</form>
</div><!-- /Dati Azienda -->
<!-- Dati Referente -->
<div data-role="collapsible" data-content-theme="c" class="grid-scheda">
<h3>Dati Referente</h3>
<form id="dati-referente">
<div data-role="fieldcontain">
<label for="cognome">Referente:</label>
<input type="text" name="cognome" id="cognome" class="small2" placeholder="Cognome" />
<input type="text" name="nome" id="nome" class="small2" placeholder="Nome"/>
<input type="text" name="dt_nascita" id="dt_nascita" class="small2" placeholder="Data nascita"/>
</div>
<div data-role="fieldcontain">
<label for="posizione">Posizione:</label>
<input type="text" name="posizione" id="posizione" class="medium" />
<input type="text" name="reperibilita" id="reperibilita" class="medium" placeholder="Reperibilità" />
</div>
<div data-role="fieldcontain">
<label for="mobile">Mobile:</label>
<input type="number" name="mobile" id="mobile" class="medium" />
<input type="number" name="fisso" id="fisso" class="medium" placeholder="Fisso" />
</div>
<div data-role="fieldcontain">
<label for="mail">Mail:</label>
<input type="text" name="mail" id="mail" class="fullsize" />
</div>
<div data-role="fieldcontain">
<label for="referente2">Referente alternativo:</label>
<input type="text" name="referente2" id="referente2" class="fullsize" />
</div>
<fieldset class="ui-grid-a">
<label> </label>
<div class="ui-block-b"><button rel="dati-referente" type="submit" class="submit submitBTN" data-theme="b">Salva</button></div>
</fieldset>
</form>
</div><!-- /Dati referente -->
<!-- caratteristiche -->
<div data-role="collapsible" data-content-theme="c" class="grid-scheda">
<h3>Caratteristiche</h3>
<div data-role="fieldcontain">
<label for="x">Consistenza attiva:</label>
<input type="text" name="x" id="x" class="small" />
</div>
</div><!-- /caratteristiche -->
<!-- registrazione -->
<div data-role="collapsible" data-content-theme="c" class="grid-scheda">
<h3>Registrazione 190</h3>
<form id="registrazione">
<div data-role="fieldcontain">
<label for="userid">User ID:</label>
<input type="text" name="userid" id="userid" class="small2" />
<input type="text" name="passw" id="passw" class="small2" placeholder="Password" />
<input type="date" name="dt_registrazione" id="dt_registrazione" class="small2" />
</div>
<?php for($i=1;$i<=2;$i++) { ?>
<div data-role="fieldcontain">
<label for="analisi_ft_num">Analisi Fattura:</label>
<input type="text" name="analisi_ft_num[]" id="analisi_ft_num" class="medium" placeholder="Nr. Fattura" />
<input type="date" name="dt_doc[]" class="medium" />
</div>
<?php } ?>
<div data-role="fieldcontain">
<label for="codice_cliente">Codice Cliente:</label>
<input type="text" name="codice_cliente" id="codice_cliente" class="medium" />
<input type="text" name="ciclo_fatturazione" id="ciclo_fatturazione" class="medium" placeholder="Ciclo Fatturazione" />
</div>
<fieldset class="ui-grid-a">
<label> </label>
<div class="ui-block-b"><button rel="registrazione" type="submit" class="submit submitBTN" data-theme="b">Salva</button></div>
</fieldset>
</form>
</div><!-- /registrazione -->
</div>
<!-- /anagrafica -->
Thanks in advice
It is not very clear as to what exactly the interface is supposed to look like. However, please look at the documentation: http://jquerymobile.com/demos/1.1.0/docs/content/content-collapsible-set.html
The link you pasted is for a test demo, but the syntax seem to have changed since then.

MVC RadioButtonFor Challenge to gen jQueryMobile Compliant HTML

I am working in .NET, VB Razor MVC4 with JQueryMobile.
My issue is in trying to get the #Html.RadioButtonFor to generate properly formatted HTML to get picked up by the JQuery Mobile.
This code:
#For Each fqi In Model.Options
#<label for="#fqi.Id">#fqi.Text</label>
#<input type="radio" name="#fqi.Name" id="#fqi.Id" value="#fqi.Value" checked="#fqi.Checked"/>
Next
Generates:
<div class="ui-radio">
<label class="ui-btn ui-radio-off ui-corner-left ui-btn-up-d" for="rb-yes_8e3b50fa-5d47-4d42-8c0c-dba8f840fedb" data-theme="d">
<span class="ui-btn-inner ui-corner-left">
<span class="ui-btn-text">Yes</span>
</span>
</label>
<input id="rb-yes_8e3b50fa-5d47-4d42-8c0c-dba8f840fedb" type="radio" checked="False" value="Yes" name="8e3b50fa-5d47-4d42-8c0c-dba8f840fedb">
</div>
<div class="ui-radio">
<label class="ui-btn ui-radio-off ui-corner-right ui-controlgroup-last ui-btn-up-d" for="rb-no_8e3b50fa-5d47-4d42-8c0c-dba8f840fedb" data-theme="d">
<span class="ui-btn-inner ui-corner-right ui-controlgroup-last">
<span class="ui-btn-text">No</span>
</span>
</label>
<input id="rb-no_8e3b50fa-5d47-4d42-8c0c-dba8f840fedb" type="radio" checked="False" value="No" name="8e3b50fa-5d47-4d42-8c0c-dba8f840fedb">
</div>
But I cant get this code right:
#For Each fqi In Model.Options
#Html.LabelFor(Function(m) m.CurrentValue, fqi.Text)
#Html.RadioButtonFor(Function(m) m.CurrentValue, New with {.value = fqi.Value, .name=fqi.Name, .checked=fqi.Checked})
Next
It is rendering as:
<div class="ui-radio">
<div class="ui-radio">
<label class="ui-btn ui-radio-off ui-input-text ui-corner-left ui-btn-up-d" for="Questions_1__CurrentValue" data-theme="d">
<span class="ui-btn-inner ui-corner-left">
<span class="ui-btn-text">
<span class="ui-btn-inner">
</span>
</span>
</label>
<label class="ui-btn ui-radio-off ui-input-text ui-corner-right ui-controlgroup-last ui-btn-up-d" for="Questions_1__CurrentValue" data-theme="d">
<span class="ui-btn-inner">
<span class="ui-btn-text">
<span class="ui-btn-inner ui-corner-right ui-controlgroup-last">
</span>
</span>
</label>
<input id="Questions_1__CurrentValue" type="radio" value="{ value = No, name = 8e3b50fa-5d47-4d42-8c0c-dba8f840fedb, checked = False }" name="Questions[1].CurrentValue">
</div>
<input id="Questions_1__CurrentValue" type="radio" value="{ value = Yes, name = 8e3b50fa-5d47-4d42-8c0c-dba8f840fedb, checked = False }" name="Questions[1].CurrentValue">
</div>

Resources