closed resolvedI edited the class-form-generator.php file as others have, and still need some fine tuning.
I am seeing this with the updated look.
I need it to look like the version I created on the right, with all fields padded correctly for mobile & desktop.
Here is the current desktop view.
Thanks!
-Jimmy
Hi Peter!
It fixed some of the issue but not all.
Here is all the custom CSS I have in the theme, wanted to post it here to see if there might be a conflict.
h1.logo {
padding-top: 0px;
padding-bottom: 0px;
}
#main .main-title {
display: none;
}
#main .container {
padding-top: 10px;
padding-bottom: 10px;
}
#footer #portfoliobox-3 .news-time {
display: none;
}
#top.page-id-25 .post-entry-129,#top.page-id-25 .post-entry-130 {
margin-top: 10px;
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
.site-phone-num {
display: inline-block;
position: relative;
font-size: 1.04em;
top: -115px;
right: -103px;
}
}
@media only screen and (max-width: 479px) {
.site-phone-num {
display: inline-block;
position: relative;
font-size: 1.1em;
top: -125px;
right: -25px;
}
}
fieldset h3 {
font-size: 1.15em;
}
.ajax_form .textare_label {
top: -5px;
left: 0%;
margin-left: 0px;
}
.ajax_form p {
padding: 0 0 5px 0;
}
.form-allowed-tags{
display:none;}
.ajax_form #element_avia_message{
margin-top: 22px;
}
Let me know as it's still appearing incorrectly.
Thanks!
-Jimmy
Updated Custom CSS to this. (adjusted padding)
h1.logo {
padding-top: 0px;
padding-bottom: 0px;
}
#main .main-title {
display: none;
}
#main .container {
padding-top: 10px;
padding-bottom: 10px;
}
#footer #portfoliobox-3 .news-time {
display: none;
}
#top.page-id-25 .post-entry-129,#top.page-id-25 .post-entry-130 {
margin-top: 10px;
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
.site-phone-num {
display: inline-block;
position: relative;
font-size: 1.04em;
top: -115px;
right: -103px;
}
}
@media only screen and (max-width: 479px) {
.site-phone-num {
display: inline-block;
position: relative;
font-size: 1.1em;
top: -125px;
right: -25px;
}
}
fieldset h3 {
font-size: 1.15em;
}
.ajax_form .textare_label {
top: -25px;
left: 0%;
margin-left: 0px;
}
.ajax_form p {
padding: 0 0 5px 0;
}
.form-allowed-tags{
display:none;}
.ajax_form #element_avia_message{
margin-top: 30px;
}
I like the way that looks now all I need is help to move the drop down title over field, and the button issue.
Thanks so much for your help!
Nick
Moderator
Hi,
Please make a backup and open up class-form-generator.php located in /framework/php/ directory and find lines 236-238 which look like
$this->elements_html .= "<p class='".$p_class."' id='element_$id'>";
$this->elements_html .= ' <select name="'.$id.'" class="select '.$element_class.'" id="'.$id.'">'.$select.'</select><label for="'.$id.'">'.$element['label'].$required.'</label>';
$this->elements_html .= "</p>";and change them to look like
$this->elements_html .= "<p class='".$p_class."' id='element_$id'>";
$this->elements_html .= ' <label for="'.$id.'">'.$element['label'].$required.'</label><select name="'.$id.'" class="select '.$element_class.'" id="'.$id.'">'.$select.'</select>';
$this->elements_html .= "</p>";You can also add this css to change the width of the select box to make it equal to the other fields
select, .ajax_form .select, .entry-content select, .mobileMenu
{
min-width: 230px;
}Thanks,
Nick
For flexibility the business needed I had to go the route of check boxes. (Ability to select any/all number of features)
I need them to appear in that format (if possible), along with a description above them. (Why is there no option for a title for the check boxes?)
It should also appear the same on desktop.
Please let me know, thanks!
Devin
Moderator
Hi emoshun,
With that level of customization it would be a lot more beneficial to use something like Gravity forms or on a basic level Contact Form 7.
You're expanding into the realm of complete customization of the class form which is a bit beyond the scope of what we are generally able to offer through support.
Regards,
Devin
Nick
Moderator
Hi,
For checkboxes you can try something like this. I only styled the 2 top boxes since I didn't know if you want to go that route. That's just for mobile screen,
@media only screen and (max-width: 479px) {
#element_avia_used_car_sales {
top: -34px;
right: -140px;
}
#element_avia_new_car_sales {
top: 14px;
}}and for the other screen sizes
@media only screen and (min-width: 480px) {
.ajax_form .input_checkbox {
top: -13px;
right: -20px;
}
#element_avia_used_car_sales {
top: -15px;
right: -140px;
}
.ajax_form .input_checkbox {
top: -13px;
right: -20px;
}}Thanks,
Nick
This topic has been closed to new replies.
Please start by registering an account for this forum here
Create a new thread and tell me what problems you are encountering and what you want to know.
There is no step 3 :)
We try to answer all questions within a day, monday-friday.
