Language selection

Government of Canada / Gouvernement du Canada

Search

Field flow alternatives

Find styling alternatives for field flow.

Increased font size

Increases the font size of Field flow elements following visual update in 2019.

By adding the .gc-font-2019 class to your .wb-fieldflow element, you will get the same result as shown below.

Notes

  • If you are using Field flow with the goal of adding dynamic content to the page through AJAX (as shown in the example below) and you are hoping to get the increased font size on your injected content, you are highly recommended to use the technique shown in the advanced examples which showcases the "container" configuration and gives more details about it.
  • If you are using your own form element and have Field flow inside of it, as shown in the advanced examples, you can also try adding the .gc-font-2019 class to your form element as well so you can test having all (or almost all) of your form's content with increased font size.

Choose content to be ajaxed?

  • Set 3 - Use container: $("#ajaxPanel .panel-body")
  • Set 4 - Use container: $("#ajaxPanel .panel-body")

id="ajaxPanel" Aside panel, for example

(To illustrate container option)

<div class="wb-fieldflow gc-font-2019">
		<p>Choose content to be ajaxed?</p>
		<ul>
			<li data-wb-fieldflow='{"action": "ajax", "url": "ajax/ajax-3.html", "container": "#ajaxPanel .panel-body"}'>Set 3 - Use container: $("#ajaxPanel .panel-body")</li>
			<li data-wb-fieldflow='{"action": "ajax", "url": "ajax/ajax-4.html", "container": "#ajaxPanel .panel-body"}'>Set 4 - Use container: $("#ajaxPanel .panel-body")</li>
		</ul>
	</div>
	<section id="ajaxPanel" class="panel panel-primary mrgn-tp-md">
		<header class="panel-heading">
			<h3 class="panel-title"><code>id="ajaxPanel"</code> Aside panel, for example</h3>
		</header>
		<div class="panel-body">
			<p>(To illustrate <code>container</code> option)</p>
		</div>
	</section>

Larger inputs with GC Checkboxes and radio

Leverages the GC Checkboxes and radio design pattern to deliver larger inputs.

By adding the "gcChckbxrdio":true configuration to your data-wb-fieldflow data attribute, you will get the same result as shown below.

Note

This pattern will render larger text by default. You can still use the .gc-font-2019 class if you want surrounding elements to display in a larger font size, for example the submit button, as demonstrated in the Increased font size section.

Large checkboxes

Choose content to be ajaxed:

  • (Set 1) Nunc sed mauris id nisi molestie porta at quis erat.
  • (Set 2) Vestibulum pretium tortor vel facilisis sodales.
  • (Set 3) Nunc sit amet dui ut justo efficitur dapibus.
  • (Set 4) Praesent at purus ut turpis sollicitudin aliquam.
  • (Set 5) Sed eget dui ac nunc mattis consequat in a ex.
<div class="wb-fieldflow" data-wb-fieldflow='{"renderas":"checkbox", "gcChckbxrdio":true}'>
		<p>Choose content to be ajaxed:</p>
		<ul>
			<li data-wb-fieldflow="ajax/ajax-1.html">(Set 1) Nunc sed mauris id nisi molestie porta at quis erat.</li>
			<li data-wb-fieldflow="ajax/ajax-2.html">(Set 2) Vestibulum pretium tortor vel facilisis sodales.</li>
			<li data-wb-fieldflow="ajax/ajax-3.html">(Set 3) Nunc sit amet dui ut justo efficitur dapibus.</li>
			<li data-wb-fieldflow="ajax/ajax-4.html">(Set 4) Praesent at purus ut turpis sollicitudin aliquam.</li>
			<li data-wb-fieldflow="ajax/ajax-5.html">(Set 5) Sed eget dui ac nunc mattis consequat in a ex.</li>
		</ul>
	</div>

Large radio buttons

Choose content to be ajaxed:

  • (Set 1) Nunc sed mauris id nisi molestie porta at quis erat.
  • (Set 2) Vestibulum pretium tortor vel facilisis sodales.
  • (Set 3) Nunc sit amet dui ut justo efficitur dapibus.
  • (Set 4) Praesent at purus ut turpis sollicitudin aliquam.
  • (Set 5) Sed eget dui ac nunc mattis consequat in a ex.
<div class="wb-fieldflow" data-wb-fieldflow='{"renderas":"radio", "gcChckbxrdio":true}'>
		<p>Choose content to be ajaxed:</p>
		<ul>
			<li data-wb-fieldflow="ajax/ajax-1.html">(Set 1) Nunc sed mauris id nisi molestie porta at quis erat.</li>
			<li data-wb-fieldflow="ajax/ajax-2.html">(Set 2) Vestibulum pretium tortor vel facilisis sodales.</li>
			<li data-wb-fieldflow="ajax/ajax-3.html">(Set 3) Nunc sit amet dui ut justo efficitur dapibus.</li>
			<li data-wb-fieldflow="ajax/ajax-4.html">(Set 4) Praesent at purus ut turpis sollicitudin aliquam.</li>
			<li data-wb-fieldflow="ajax/ajax-5.html">(Set 5) Sed eget dui ac nunc mattis consequat in a ex.</li>
		</ul>
	</div>

Inline large checkboxes

Choose content to be ajaxed:

  • Set 1
  • Set 2
  • Set 3
  • Set 4
  • Set 5
<div class="wb-fieldflow" data-wb-fieldflow='{"renderas":"checkbox", "inline":true, "gcChckbxrdio":true}'>
		<p>Choose content to be ajaxed:</p>
		<ul>
			<li data-wb-fieldflow="ajax/ajax-1.html">Set 1</li>
			<li data-wb-fieldflow="ajax/ajax-2.html">Set 2</li>
			<li data-wb-fieldflow="ajax/ajax-3.html">Set 3</li>
			<li data-wb-fieldflow="ajax/ajax-4.html">Set 4</li>
			<li data-wb-fieldflow="ajax/ajax-5.html">Set 5</li>
		</ul>
	</div>

Inline large radio buttons

Choose content to be ajaxed:

  • Set 1
  • Set 2
  • Set 3
  • Set 4
  • Set 5
<div class="wb-fieldflow" data-wb-fieldflow='{"renderas":"radio", "inline":true, "gcChckbxrdio":true}'>
		<p>Choose content to be ajaxed:</p>
		<ul>
			<li data-wb-fieldflow="ajax/ajax-1.html">Set 1</li>
			<li data-wb-fieldflow="ajax/ajax-2.html">Set 2</li>
			<li data-wb-fieldflow="ajax/ajax-3.html">Set 3</li>
			<li data-wb-fieldflow="ajax/ajax-4.html">Set 4</li>
			<li data-wb-fieldflow="ajax/ajax-5.html">Set 5</li>
		</ul>
	</div>

Page details

Report a problem on this page
Date modified: