Willkommen, Gast
Angemeldet bleiben:

THEMA:

Radio Group Alignment 1 Jahr 8 Monate her #233389

  • Autor
  • junpaglin
  • Offline
  • Senior Breezer
  • Senior Breezer
  • Beiträge: 108
  • Dank erhalten: 0
Hi, I have a radio group element in my form and selected to wrap selection to columns. I would like to apply some CSS to the layout. Please see attached sample. How can I accomplish this? Thank you.
Anhänge:

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

Radio Group Alignment 1 Jahr 8 Monate her #233396

  • mihaela
  • Offline
  • Developer
  • Developer
  • Beiträge: 3128
  • Karma: 105
  • Dank erhalten: 415
Hello,

Since radio group options Titles are just a text-node, setting this the way you want requires to wrap the text node in a div and then apply the styling.

Here are instructions how the get the Titles aligned as you want:

Navigate to your form's Advanced options > More options > Scripts and in the Initialization script section set Type to Custom.

In the code area below put the code similar to this one:
function ff_formname_init()
{
jQuery(document).ready(function () {

 jQuery('#bfGroupLabel1946').contents().filter(function(){return this.nodeType === 3}).wrap( "<div class='newlabels'></div>" );
jQuery('#bfGroupLabel1946_1').contents().filter(function(){return this.nodeType === 3}).wrap( "<div class='newlabels'></div>" );
jQuery('#bfGroupLabel1946_2').contents().filter(function(){return this.nodeType === 3}).wrap( "<div class='newlabels'></div>" );


jQuery('.newlabels').css('padding-left', '15px');
    });

} // ff_formname_init
NOTE: In the code above you have to replace formname with the Name of your form.
Furhermore you have to replace bfGroupLabel1946, bfGroupLabel1946_1 and bfGroupLabel1946_2 with the correct id's of radio group options that you can get by inspection the form.

Let me know whether you've managed to make this work for your form.

Regards,

Mihaela

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

Radio Group Alignment 1 Jahr 8 Monate her #233398

  • Autor
  • junpaglin
  • Offline
  • Senior Breezer
  • Senior Breezer
  • Beiträge: 108
  • Dank erhalten: 0
Thanks Mihaela for your suggestion. Will test it out.

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

Radio Group Alignment 1 Jahr 8 Monate her #233406

  • Autor
  • junpaglin
  • Offline
  • Senior Breezer
  • Senior Breezer
  • Beiträge: 108
  • Dank erhalten: 0
Your suggestion worked! The radio labels are now left aligned. Just one more question. How do I add line space between the button paragraph selections?

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

Radio Group Alignment 1 Jahr 8 Monate her #233412

  • mihaela
  • Offline
  • Developer
  • Developer
  • Beiträge: 3128
  • Karma: 105
  • Dank erhalten: 415
Hello again,

Great! I'm glad that the suggested solution worked,

To add a line space between the button paragraph selections, add this like of code:
jQuery('.newlabels').after("<br />");

So the whole code should look similar to this:
function ff_formname_init()
{
jQuery(document).ready(function () {

 jQuery('#bfGroupLabel1946').contents().filter(function(){return this.nodeType === 3}).wrap( "<div class='newlabels'></div>" );
jQuery('#bfGroupLabel1946_1').contents().filter(function(){return this.nodeType === 3}).wrap( "<div class='newlabels'></div>" );
jQuery('#bfGroupLabel1946_2').contents().filter(function(){return this.nodeType === 3}).wrap( "<div class='newlabels'></div>" );


jQuery('.newlabels').css('padding-left', '15px');
jQuery('.newlabels').after("<br />");
    });

} // ff_formname_init

Let me know whether it works as you wanted.

Regards,

Mihalea

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

Radio Group Alignment 1 Jahr 8 Monate her #233425

  • Autor
  • junpaglin
  • Offline
  • Senior Breezer
  • Senior Breezer
  • Beiträge: 108
  • Dank erhalten: 0
All is well now Mihaela. Thanks for the assistance.

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

  • Seite:
  • 1
  • 2
  • 3
Moderatoren: ForumSupport
Ladezeit der Seite: 0.058 Sekunden

Angebot

Sommer Special! Alle Mitgliedschaften zum Sonderpreis!

Prio Support, alle Extensions und alle Templates in einem Paket.

Hier geht's zur Bestellung

Crosstec hilft sparen!

Falls Sie neu bei Crosstec sind aber bereits einen Formulargenerator bei einem anderen Hersteller gekauft haben, dann bekommen sie von uns einen Rabatt von 25% auf unsere 1-Jahres und Pro-Mitgliedschaften

Wie Sie an den Rabatt kommen?

Schreiben Sie uns einfach eine kurze Email mit beigelegten Kaufbeleg (z.B. PayPal Quittung) an sales@crosstec.org.

Wir unterstützen die Joomla Community

Crosstec unterstützt weltweit alle offiziellen Joomla! User Groups und Organisatoren von Joomla! Days die bei Joomla.org registriert sind.

Falls das auf dich zutrifft und du eines unserer Produkte brauchst, schreib uns eine kurze Email an info@crosstec.org und du bekommst eine Flatrate-Mitgliedschaft geschenkt!