Responsive RocketTheme - Responsive Forms
-
-
- Steve Amerige
- Sr. Rocketeer
- Posts: 243
- Thanks: 2
-
I love the responsive design of RocketTheme templates. What I'm looking to discover is what forms work within RocketTheme responsive templates that are responsive as well.
- Is K2 content responsive?
- RSForm!Pro says it is responsive, but I think they just do some simplistic wrapping. There is nothing sophisticated such as changing a complex form based on size, for example:
- wide desktop: multiple columns, multiple groups of related functionality
- mobile: the responsive Javascript shows one form group at a time, perhaps with an accordion widget, to progress through the entire form.
- Others?
-
The following users have thanked you: Scott Nailon
- Steve Amerige,
Server Science Incorporated
Server Leasing | Web Software Development | User Experience & Graphic Design
Managed Services, Website, Java, and Source-Code Hosting
The above is just for illustration to show that responsive design and the layout choices that are used based on screen size is difficult code.
The form code should, of course, allow for custom PHP code to process the requests (ideally with Ajax coding, not at "submit" time).
I'm looking for what is today's "best recommendation" for having forms inside of RocketTheme responsive templates. What's your thoughts? -
-
-
- cdavis411
- Preeminent Rocketeer
- Posts: 17787
- Thanks: 882
- personally I use rs forms pro but I do not use the responsive form layout I use the xhtml and then add the media queries as needed to make it work. I am unaware of anything that is good out of the box at this point.
- Last Edit: 10 years 5 months ago by cdavis411. Reason: fixed typo :)
-
The following users have thanked you: Glenn E Curtis, Scott Nailon, Kamel Shaath
-
-
-
- Scott Nailon
- Jr. Rocketeer
- Posts: 40
- Thanks: 0
- Rocket Themes
-
Hi Glen, I am also using Rocket Theme + RS Forms and my forms are pretty ugly really.
I am pushing them for answers in their support area right now. They went into my demo page ( www.profitplatform.com.au ) and tweaked the Responsive version of their forms with the following code:
<style type="text/css">
.formResponsive .formHorizontal .formControls {
margin-left: 10px !important;
margin-right: 15px !important;
}
.formResponsive .formHorizontal .formControlLabel{
text-align: left !important;
}
.formResponsive input, .formResponsive textarea {
width: 100% !important;
}
</style>
Do you have any other recommendations in this area? My graphic designer is totally annoyed with the forms on our sites because they are ugly on an ipad or smaller monitor.... it is causing us a lot of friction! - Sites By Design
www.sitesbydesign.com.au
MB: 0413 099 279
-
-
-
- cdavis411
- Preeminent Rocketeer
- Posts: 17787
- Thanks: 882
-
@scott
you may want to add this into the style tags you mentioned above:body .formResponsive .formHorizontal .rsform-block, body .formResponsive .formHorizontal p.formDescription, body .formResponsive select, .formResponsive textarea, body .formResponsive input[type="text"], body .formResponsive input[type="password"] {margin: 0 inherit;}
or You can create a file using a simple text editor for custom css and name it using this format: templatefolder-custom.css (e.g., rt_diametric_responsive-custom.css). For this issue add this to the custom CSS fileMore Info here: www.gantry-framework.org/documentation/j...custom_stylesheet.mdbody .formResponsive .formHorizontal .rsform-block, body .formResponsive .formHorizontal p.formDescription, body .formResponsive select, .formResponsive textarea, body .formResponsive input[type="text"], body .formResponsive input[type="password"] {margin: 0 inherit;}
-
-
-
- Scott Nailon
- Jr. Rocketeer
- Posts: 40
- Thanks: 0
- Rocket Themes
-
Even after everything you have told me and all that RS Forms have told me I am still having issues...
profitplatform.com.au/
Now my Text Boxes are all out and over the place.... is there anything more I should know about? a different way of doing things maybe? - Sites By Design
www.sitesbydesign.com.au
MB: 0413 099 279
-
-
-
- Terp
- Elite Rocketeer
- Posts: 1720
- Thanks: 23
-
Scott Nailon wrote:
Even after everything you have told me and all that RS Forms have told me I am still having issues...
profitplatform.com.au/
Now my Text Boxes are all out and over the place.... is there anything more I should know about? a different way of doing things maybe?
Are you trying to get the checkboxes aligned like this?
Attachment has been deleted
-
-
-
- Scott Nailon
- Jr. Rocketeer
- Posts: 40
- Thanks: 0
- Rocket Themes
-
Yes thats a lot more like it
- Sites By Design
www.sitesbydesign.com.au
MB: 0413 099 279
-
-
-
- Terp
- Elite Rocketeer
- Posts: 1720
- Thanks: 23
-
Scott Nailon wrote:
Even after everything you have told me and all that RS Forms have told me I am still having issues...
profitplatform.com.au/
Now my Text Boxes are all out and over the place.... is there anything more I should know about? a different way of doing things maybe?
...probably not the best solution, but if you opened up your .../com_rsform/assets/css/front.css file and removed/commented out the float reference from the following block, everything lines up and plays nicely together:
.formResponsive .formHorizontal .formControlLabel { /* float: left; */ width: 140px; padding-top: 5px; text-align: right;
I'd remove the fixed width, too.
-
-
-
- Scott Nailon
- Jr. Rocketeer
- Posts: 40
- Thanks: 0
- Rocket Themes
-
Thanks man
- Sites By Design
www.sitesbydesign.com.au
MB: 0413 099 279
-
-
-
- cdavis411
- Preeminent Rocketeer
- Posts: 17787
- Thanks: 882
-
here is another option: You can create a file using a simple text editor for custom css and name it using this format: templatefolder-custom.css (e.g., rt_diametric_responsive-custom.css). For this issue add this to the custom CSS fileMore Info here: www.gantry-framework.org/documentation/j...custom_stylesheet.md
.rt-sidebar-surround .formResponsive .formHorizontal .formControlLabel {float: none;} .rt-sidebar-surround .formResponsive input[type="radio"], .rt-sidebar-surround .formResponsive input[type="checkbox"] {width: 10% !important;margin-top: 5px;} .rt-sidebar-surround .formResponsive input[type="radio"] + label, .rt-sidebar-surround .formResponsive input[type="checkbox"] + label {float: none;margin-top: 0;} -
The following users have thanked you: deiahil
-
Time to create page: 0.067 seconds