Posted 2 months ago #
Hello!
I'm not the savviest person when it comes to code, so I'm hoping this is easier than I think it is.
When I preview the form on my site, the text box goes along the entire page (My sheet is 1000px wide) so I'm left with this really long box. How do I go about making it only be a box of 200px wide, etc.? I know it's something to do with editing the css classes area in the field settings spot, but I can't seem to get anything to work.
Thank you!
Posted 2 months ago #
What version of Ninja Forms are you using? Everything beyond 2.0 does not set the width of these fields which means its being set by your theme. Its not hard to do but you do have to be comfortable editing code and file within your theme or a custom plugin. For people who are not comfortable with that or just want to make it a whole lot easier we created an extension to help: http://wpninjas.com/downloads/layout-styles/
Posted 2 months ago #
I'm using the latest version (just downloaded it yesterday)
I went through with firebug and found where it said the text input area was set to 100%... I changed it (through firebug) to 20% and it gave me the live time update, successfully doing what I wanted. However when I go into my css style sheet and actually change it and save it, it still doesn't do anything.
I will look into that extension in the mean time! Thanks!
Posted 2 months ago #
I'd have to see you form to see what might be going on there/
Posted 1 month ago #
How does the Custom CSS Classes in the field settings work?
Posted 1 month ago #
When you add a class it adds it directly to the form element that you assigned it to. That way you can assign some javascript or css to it for instance. it also adds it to the wrapping div but it adds "-wrap" to the div class so you can style it and it's contents with CSS.
Posted 1 month ago #
If I wanted to have the following CSS for text area:
textarea {
width:550px;
height:50px;
}
I tried making it a class in my CSS as such:
.ninjaTextArea textarea {
width:550px;
height:50px;
}
and adding .ninjaTextArea to Custom CSS Classes in the field settings but it did not take (I also tried using just ninjaTextArea without the .).
I also tried adding textarea {width:550px; height:50px;} to the Custom CSS Classes in the field settings but that didn't work either.
Any help would be appreciated.
Posted 1 month ago #
If the first thing you tried didn't work it's because your theme has some higher specificity that's overriding it.
In the second thing you tried it would have just been .ninjaTextArea because that the class that would have been applied to the textarea element as you've assigned it.
The third example wouldn't do anything because the field accepts a class name and not inline styling.
A link to the page where your form is located would also be helpful.
You must log in to post.
