× Form Help

Elements width

  • burato
  • Topic Author
  • Offline
  • Fresh Boarder
  • Fresh Boarder
  • Posts: 4
  • Thank you received: 0

burato created the topic: Elements width

Hello,

As you can see in the attachment, I have a section (Display type: all in a row) with 3 elements.


I would like to choose the size of these elements.
Example:
"Quantity" with 20% or 20px
"Product Description" with 50% or 20px
"Brand" with 30% or 30px

www.nutrifazcestas.com.br/v2/index.php/p...cestaspersonalizadas
*page 3 of the form



I also would like to replicate this setting to the other sections below "line2" "line3" etc.

Still within this page I would like to implement the option to add section as seen in this example.
crosstec.org/en/downloads/free/form-apps...ows-dynamically.html


And I would also like to leave the layout of my form similar to this one. Can I download this template?
crosstec.org/breezingformsdemo/index.php...e-forms-feature.html
#236448
Attachments:
  • mihaela
  • Away
  • Administrator
  • Administrator
  • Posts: 2727
  • Karma: 93
  • Thank you received: 369

mihaela replied the topic: Elements width

Hello,

Please try the following solution to get the look that you want.

Please go to form's Advanced properties > More options > Scripts and in the Initialization script set Type to Custom.

In the code area below put the following code:
function ff_FORMNAME_init()
{

for(var i=453;i<467;i++) {
if( i % 3 == 0) { jQuery( "#bfElemWrap"+i ).css( "width", "10%" ); }
if( i % 3 == 1) { jQuery( "#bfElemWrap"+i ).css( "width", "50%" ); }
if( i % 3 == 2) { jQuery( "#bfElemWrap"+i ).css( "width", "30%" ); }

}
} // ff_FORMNAME_init
NOTE: In the code above you have to replace FORMNAME with the name of your form.

Let me know whether this worked.

Regards,

Mihaela
#236478
  • burato
  • Topic Author
  • Offline
  • Fresh Boarder
  • Fresh Boarder
  • Posts: 4
  • Thank you received: 0

burato replied the topic: Elements width

Hey Mihaela, thanks for your reply.

I followed your instructions but it did not work as can be seen in the attachment. Also I would like the user to add new fields and that these fields already come in the layout 10% 50% 40% on the same line.

#236483
Attachments:
  • mihaela
  • Away
  • Administrator
  • Administrator
  • Posts: 2727
  • Karma: 93
  • Thank you received: 369

mihaela replied the topic: Elements width

Hello,

This solution should apply only to existing elements and it is important that none of the elements is for example recreated or moved.

That is why this solution isn't the most appropriate one.

What I would suggest in your case is that, instead of creating a section for each line (3 elements), you create 3 sections, one for each column. Then you would put all the "Quantidate" elements in the first section, "Descritption" elements in the second and so on.
Here are the instructions on how to achieve that crosstec.org/en/support/online-documenta...two-column-form.html .

Let me know whether you have managed to do so. Afterward, I will give you instructions on how to set the column widths.

Regards,

MIhaela
#236495
  • burato
  • Topic Author
  • Offline
  • Fresh Boarder
  • Fresh Boarder
  • Posts: 4
  • Thank you received: 0

burato replied the topic: Elements width

Hi,

As you can see, this is not the best solution because when the site is visited on the mobile and the function "mobile forms" and "Force Mobile Forms" are activated, column 1 will always be displayed first after the second and so on.

I am sending two screenshots. One before that would be the way I want to show when the visitor uses a cell phone and an image after the changes following your suggestion.

I believe you can have a better solution.

Attachment not found


Attachment not found

#236551
  • mihaela
  • Away
  • Administrator
  • Administrator
  • Posts: 2727
  • Karma: 93
  • Thank you received: 369

mihaela replied the topic: Elements width

Hello,

You are right, it wouldn't be displayed properly on mobile.

What you could do is you could go to form's Advanced properties > More options > Form pieces and in the Before Form section set Type to Custom and paste the code similar to below:
echo '<style>
@media (min-width: 992px) {

#bfQuickModeSection51165 {
    width: 18% !important;
}

 #bfQuickModeSection15498 {
    width: 48% !important; 
}

#bfQuickModeSection42607 {
    width: 28% !important; 
}

}
</style>';
NOTE: in the code above, you have to replace "bfQuickModeSection51165" with the ID of a section for the first column, "bfQuickModeSection15498" with the ID of a section for the second column and "bfQuickModeSection42607" with the ID of a section for the third column.

That way the widths will be applied only for desktops.

Furthermore, this way in mobile version widths will be regular but the elements will still be displayed in order that you do not want. Because first it will be section1, then section2 etc.

The only way I see it right now to have it both on mobile and desktop as you want is to leave elements outside of sections as it is now and to do as suggested in this code, but element by element.
Unfortunately, there isn't a simpler way.

Regards,

Mihaela
#236554
Moderators: ForumSupporttomeperica
Time to create page: 0.692 seconds

New Icon Packs Category!

Crosstec is now offering icon packs.

If you are a paying subscriber, icon packs are automatically added to your account.

Check out our icon packs page!

Live Support Chat Opened!

Join our Discord chat here to receive live support and talk directly to the team!

Summer Sale!

50% discount on all of our extension subscription plans, templates and icon packs!

Get Your Subscription Here

News and Updates

Get informed about new downloads, updates and more in our News and Updates newsletter.

All Extensions Subscription

Get 1 year access to all of our current and future products and 1 year of professional support -- 99 for just 49! (Summer Sale)

No support per domain or website installation limits! Includes all of our current and future Joomla!® extensions, Joomla!® templates for the duration of your membership. This means, by purchasing an All Extensions Subscription you'll have it all covered!

Get it from here

3rd Party Discount - 25% Off

We help you to keep your costs under control. If you are a new member and purchased a form building tool from a different form vendor, then you'll get a 25% discount on our subscription plans.

How to receive the discount:

Send us a quick email to sales@crosstec.org with a proof of purchase (for example a paypal receipt), await payment instructions and enjoy your membership!

Live Support Chat Opened!

Join our Discord chat here to receive live support and talk directly to the team!

Community Reward

Help us to create new extensions and plugins! With only $5 you help us a lot and get unlimited download access to all of our products, professional support and even more. Get your reward now!

Read More Here