Explode All Immigration Form Boxes

Phil “the Podcast King” Brown and I are talking at the 2015 Immigration Summit on better file management for immigration lawyers.  As part of our preparation, a lawyer explained how the Canadian Citizenship and Immigration Web site worked and why it was cumbersome for lawyers, paralegals, and clients alike.

Note:  this hack happens only on YOUR computer and has no impact on CIC’s sites, servers, etc.  If you just want to implement the fix, jump down here.

The short version is that each form in the online MyCIC portal displays only the question you are currently answering.  The remainder of the form is hidden, using the CSS display:none style, until you move on to the next element.  This is not horrible from a usability standpoint but it’s a disaster if you want to print off your work.  When you use the CTRL-P key combination or the Print button on the form itself, it only prints the visible elements.  Anything subject to display:none is still hidden.

Using Stylish and Identifying the Element

Fortunately, anything you can do with CSS can be undone using Stylish.  It is a free extension for Google Chrome and Mozilla Firefox browsers.  The trick was to find out how to undo the style that said display:none and change it to display:block.  Once that’s in a Stylish script, it can be invoked (invisibly) every time the browser hits the CIC site.

That’s pretty straight forward.  What wasn’t so straight forward is that the CSS in the CIC forms looks kludgy.  The form elements that are displayed and hidden are identified by:

div.ui-accordion-content

Normally, that’s what you’d refer to in your Stylish script and be done.  But the display:none is in a separate style=”” attribute.  That means it overrides the Stylish style.  If you use Firebug or Firefox’s Inspect Element, you’ll see that display:none is attributed to element.style and is inline.

Shows the element.style inline style that you can't impact using a normal CSS style.

Shows the element.style inline style that you can’t impact using a normal CSS style.

I was flummoxed as to the answer until I saw some other people with a similar question.  The answer is to add !important after your normal style.  This will force your style to override the style=”” attribute.

In the case of the CIC page, this is how the style looks for Stylish:

div.ui-accordion-content { display: block !important;}

How Does a Legal Pro Use This?

**UPDATED**  Chrome and Firefox treat the code differently.  Fix is included below

First, install Stylish in your Google Chrome and Mozilla Firefox Web browser.  Then create a new style (open your add-ons or extensions, choose Stylish, and click the Write Style button).  Then,

IF YOU ARE USING FIREFOX, paste this in:

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain(“cic.gc.ca”)
{
      div.ui-accordion-content { display: block !important;}
}

OR

IF YOU ARE USING CHROME, paste just this line:

      div.ui-accordion-content { display: block !important;}

You should only paste one or the other into your Stylish window.  Name your style (I called mine CIC – it doesn’t matter what you call it) and save it. Here’s a quick video to show you how:

Then go over to a CIC form and you should see it with all the questions exploded open.  If you don’t, let me know which form and I’ll be happy to take a look.

Are you from Citizenship and Immigration Canada?  If so, you could add make this a default when someone clicks your Print button, expanding all the content of a form.  That’d be a nicer solution all around.

2 thoughts on “Explode All Immigration Form Boxes

  1. Hi David,

    I am trying to use the style you provided but it is not working. I have followed your steps, and can’t seem to figure it out. Are you able to assist?

    Kind regards,
    KPMG Law

    • Thanks for letting me know about the problem using the script on Google Chrome, Rachel. And thanks for helping figure out the fix! Nice to know it’ll save you time.

Comments are closed.