Form Wizard Pro: CSS Classes

This is a forum to suggest new features for mojoPortal. 

This thread is closed to new posts. You must sign in to post in the forums.
11/24/2010 2:43:01 PM
Gravatar
Total Posts 2239

Form Wizard Pro: CSS Classes

Hi Joe,

Would you mind adding some CSS classes to the WebFormControl.ascx file in the next version of FWP?

Here's what I came up with, if it helps at all.

<div class="settingrow">
  <portal:mojoButton ID="btnSaveForm" runat="server" CausesValidation="False" />
  <portal:mojoButton ID="btnExportForm" runat="server" CausesValidation="false" CssClass="exportform" />
  <span class="importoptions">
    <NeatUpload:InputFile ID="file" Style="width: 220px; height: 23px" runat="server" CssClass="forminput NormalTextBox"/>
    <NeatUpload:ProgressBar ID="progressBar" runat="server">
      <mp:SiteLabel ID="SiteLabel2" runat="server" ConfigKey="CheckProgressText"></mp:SiteLabel>    </NeatUpload:ProgressBar>
    <portal:mojoButton ID="btnImportForm" runat="server" ValidationGroup="upload" CssClass="importformbutton"/>
    <portal:mojoButton ID="btnImportQuestion" runat="server"  ValidationGroup="upload" CssClass="importquestionbutton"/>
  </span>
  <asp:RegularExpressionValidator ID="regexFile" ControlToValidate="file" Display="Dynamic"
      EnableClientScript="True" runat="server" ValidationGroup="upload" />
  <asp:RequiredFieldValidator ID="reqFile" runat="server" ControlToValidate="file"
      Display="Dynamic" ValidationGroup="upload" /></div>

With CSS applied to these classes, the rendered markup would look like this:

>The idea is to separate the import functionality from the save and Export buttons without requiring any changes by current users of the product.>

The CSS to get the above rendering is:

.formwizard .importoptions{display: block; margin: 5px;padding: 5px; background-color: #ddd; border: 1px solid #bbb;}
.formwizard .importoptions .NormalTextBox {display: block; margin: 0 0 5px 5px;}
.formwizard .importoptions .importformbutton.ui-button,
.formwizard .importoptions .importquestionbutton.ui-button {padding: 0.2em;}

Thanks,
Joe D.

2/24/2011 11:32:41 AM
Gravatar
Total Posts 1203
Proud member of the mojoPortal team

Help support mojoPortal!
Add-on modules

Re: Form Wizard Pro: CSS Classes

Hi Joe, I'm bumping this thread for a somewhat related request. We'd really like to be able to assign a custom CSS class at the question level. This way, we could have an input CSS class like "zipcode", and use the following to make all Form Wizard Pro zip code input fields an appropriate size:

.qtext .zipcode {width:75px;}

Thanks,

Jamie

4/25/2011 1:14:12 PM
Gravatar
Total Posts 18439

Re: Form Wizard Pro: CSS Classes

Hi Jamie,

Sorry for the long delay in responding to this one, I've had it starred in my inbox for a long time intending to reply after I look into the feasibility.

I've added this in my project tracker and I don't see any problem with implementing this for the next release of Form Wizard Pro. I've already added the changes Joe requested.

Best,

Joe

4/25/2011 1:34:32 PM
Gravatar
Total Posts 1203
Proud member of the mojoPortal team

Help support mojoPortal!
Add-on modules

Re: Form Wizard Pro: CSS Classes

Awesome, thank you Joe!

5/12/2011 11:42:18 AM
Gravatar
Total Posts 18439

Re: Form Wizard Pro: CSS Classes

fyi, I just released Form Wizard Pro 2.6 which has a bunch of new features including support for custom per question CSS classes.

You must sign in to post in the forums. This thread is closed to new posts.