Suggestion regarding input styling (chronoforms related)
-
-
- Alex G Rees
- Sr. Rocketeer
- Posts: 113
- Thanks: 0
-
I thought I'd post this to help anyone who encounters the same problem, but also in case Rockettheme might consider changing the way input styling works (to save me having to hack the core code!).
The current method of input styling checkboxes and radio buttons is to place the actual element -1000px right or left of the page.
This causes a problem with Chronoforms, which places error messages above the checkbox/radiobutton.
The solution I used was to edit gantry-inputs.js and replace the instances of e.setStyles({position:"absolute",left:"-1000px"}
and
e.setStyles({position:"absolute",right:"-1000px"}
With the following:
e.setStyles({visibility:"hidden",marginRight:"-20px"}
This doesn't seem to effect the functionality but it means that extensions like Chronoforms will work correctly. - Freshpage Web Design
-
-
-
- Who?
- Preeminent Rocketeer
- Posts: 25562
- Thanks: 613
- Joomla freelancer
- Thank you very much for this. I will make sure our devs see your suggestion
- Check my services at: Mihha-Vision
-
-
-
- watashi
- Jr. Rocketeer
- Posts: 32
- Thanks: 0
-
Hi,
I have the same issue inside JomSocial.
JomSocial team sends me to RocketTheme team.
The issue is clearly described on a screenshot (radio buttons are sent outside of screen, thanks to undesired "left: -10000;".)
dl.dropboxusercontent.com/u/56277935/Radio.jpg
If I modify gantry-inputs.js, will it be updated with the next update of Gantry?
In other words, is it a core hack and shall I introduce it after each upgrade?
Thank you.
-
-
-
- Who?
- Preeminent Rocketeer
- Posts: 25562
- Thanks: 613
- Joomla freelancer
-
Yes, this would surely be overwritten with each update. Better would be to find create css override in a custom css file
This is how you create a custom CSS file...
www.gantry-framework.org/documentation/j...custom_stylesheet.md
When we release upgrades template files will change and you will have to reapply all your changes again (that's if you can remember where they all are). If you keep your changes in a separate Custom CSS file you'll have no issues upgrading.
Check this to learn how to use Firebug to debug and customize templates
www.rockettheme.com/blog/coding/1767-bas...omizing-with-lesscss - Check my services at: Mihha-Vision
-
-
-
- watashi
- Jr. Rocketeer
- Posts: 32
- Thanks: 0
-
Hi Igor,
I appreciate your reply and support.
I can easily create customs CSS files (I have successfully done it in the past).
I have some basic knowledge of CSS, PHP etc.
However, I totally don't understand language of gantry-inputs.js.
Can you point out what exact wording shall I introduce into my custom css file to overcome the bug?
Thanks.
-
-
-
- Who?
- Preeminent Rocketeer
- Posts: 25562
- Thanks: 613
- Joomla freelancer
- As I wrote, you will have to use Firebug to find css definition you need to change and override it in custom css file. Forget about gantry-inputs.js completely and focus on finding that css using Firebug
- Check my services at: Mihha-Vision
-
Time to create page: 0.073 seconds