Form Wizard checkbox/radio list items = horizontal

This forum is only for questions or discussions about working with the mojoPortal source code in Visual Studio, obtaining the source code from the repository, developing custom features, etc. If your question is not along these lines this is not the right forum. Please try to post your question in the appropriate forum.

Please do not post questions about design, CSS, or skinning here. Use the Help With Skins Forum for those questions.

This forum is for discussing mojoPortal development

This forum is only for questions or discussions about working with the mojoPortal source code in Visual Studio, obtaining the source code from the repository, developing custom features, etc. If your question is not along these lines this is not the right forum. Please try to post your question in the appropriate forum.

You can monitor commits to the repository from this page. We also recommend developers to subscribe to email notifications in the developer forum as occasionally important things are announced.

Before posting questions here you might want to review the developer documentation.

Do not post questions about design, CSS, or skinning here. Use the Help With Skins Forum for those questions.
This thread is closed to new posts. You must sign in to post in the forums.
11/9/2012 5:10:25 PM
Gravatar
Total Posts 215

Form Wizard checkbox/radio list items = horizontal

MP: 2.3.9.3   Anyone know if there's a way to style a form built with FormWizard so that the checkbox and radio button list items flow horizontally instead of vertically?

Here's a sample form: http://sharpe.proactivedesign.net/request-a-free-quote-for-pipe-bending-or-handrails.aspx
Client would like the checkboxes to flow horizontally so that the form doesn't require as much scrolling. I agree that might be nice.

It looks like these lists are rendered in a table which probably makes any kind of CSS solution out of the question.

Ideas?

11/10/2012 11:16:58 AM
Gravatar
Total Posts 18439

Re: Form Wizard checkbox/radio list items = horizontal

Hi Eric,

You should be able to control it from theme.skin by adding this:

<asp:CheckBoxList runat="server" SkinID="FormWizard"

/>

you can then specify properties and values supported by CheckBoxList such as RepeatDirection, RepeatColumns (which I think only works when rendering as a table or RepeatLayout which allows you to make it render as a list or spans etc, then you could apply CSS.

Hope that helps,

Joe

11/11/2012 5:35:58 PM
Gravatar
Total Posts 215

Re: Form Wizard checkbox/radio list items = horizontal

Thanks Joe, that pointed me in the right direction. For anyone else looking to do this here's what I did to make the checkbox list flow horizontally. The list renders as UL instead of table.

As Joe pointed out add this to the theme.skin in your current skin. The SkinID is the part I didn't catch at first and needed so it applies to the FormWizard module. Touch the web.config so the change takes effect.
<asp:CheckBoxList  runat="server" SkinID="FormWizard" RepeatLayout="unorderedlist"/>

I then gave my form a custom CSS class called "QuoteForm" in this case. Then add some CSS to your stylesheet like below and you'll have a horizontal checkbox or radio button list.

.QuoteForm ul { list-style: none; }
.QuoteForm li { display:block; float:left; margin-left:8px; }

 

JOE: I wonder if the default behavior of the checkbox list should render as a UL instead of table? It seems more flexible and users wouldn't have to modify the theme.skin file? I suppose you could even get really fancy someday and offer a setting with checkbox/radio lists for "layout direction".

 

 

11/12/2012 8:44:49 AM
Gravatar
Total Posts 18439

Re: Form Wizard checkbox/radio list items = horizontal

"JOE: I wonder if the default behavior of the checkbox list should render as a UL instead of table? It seems more flexible and users wouldn't have to modify the theme.skin file? I suppose you could even get really fancy someday and offer a setting with checkbox/radio lists for "layout direction."

Well its not always a good idea to change defaults in products that have already shipped because it may change the existing layout and force people who don't know much CSS to try to solve a layout problem that they did not have before the change. Also we still support .NET 3.5 and the RepeatLayout property of CheckboxList is new as of .NET 4, it doesn't work in .NET 3.5.

If Form Wizard Pro was a new product and we did not support .NET 3.5 I probably would make that the default if I were implementing it today and it had not shipped already.

Best,

Joe

11/12/2012 8:55:54 AM
Gravatar
Total Posts 215

Re: Form Wizard checkbox/radio list items = horizontal

I figured that would be an issue. I can imagine that the most frustrating aspects of being the architect of such a large and complex system like this is the legacy support and trying not to break existing client sites after upgrades. Which you do great with by the way, every upgrade for me has went smooth (and I'm talking 60+ sites now and at least a dozen upgrades).

No worries, thanks for the explanation and your time.

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