Kann ich die Höhe und Breite der horizontalen Optionsfelder ändern?

Hallo, wie kann ich beim " Horizontale Radio Buttons" die Höhe und die Breite auf max. per CSS ändern?

HI Ümit,

Thanks for reaching out to Jotform Support. Our German Support agents are busy helping other Jotform users right now, so I'll try to help you in English using Google Translate, but you can reply in whichever language you feel comfortable using. Or, if you'd rather have support in German, let us know and we can have them do that. But, it might take a while until they're available again.

Now, coming back to your question, since you are using a widget first we will need to make sure that the widget is covering full width. We can do this by Injecting CSS Codes into your form. Let me walk you through it:

1. First, copy this code:

iframe {

width: 100% !important;

}

2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3. Now, in the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.

The next step will be adding custom CSS code to the widget. Let me show you how:

1. Click on the Button Radios widget, then click on the Wand icon to open its settings.

2. In the menu on the left side of the page, under the Custom CSS section, add the below CSS code.

/*For width*/

div#radios {

width: 100% !important;

}



.radios input+label {

width: 138px !important;

}



/*For Height*/

.wrapperButtonRadio,

.radios input+label {

height: 55px !important;

}

Here's the cloned version of the form that you can test, and here's what the result will look like:

Note that the CSS code might not work on all forms, if you are working on a specific form share the Form URL, and we will provide you with the tailored CSS code.

Give it a try and let us know if you have any other questions.

Vielen Dank!!!

Letzte Frage:

Wie bekomme ich den Text (+70 €) in die nächste Zeile?

Also Dass oben 2000 km steht und darunter (+70 €) ?

Kann ich das damit machen?

label {

 max-width: 200px;

 display: inline-block;

 white-space: normal;

}

Hi Ümit,

Unfortunately, it is not possible to move the currency to the next line even with CSS overwriting using before and after pseudo-elements. This is because of how the widget was structured, as it utilizes multiple spans that already contain the same content. See the screenshot below:Overwriting it via CSS will require extensive coding to ensure that other elements are not affected by the changes. The best workaround we can suggest is that, if you're embedding the form on websites, you have a developer modify the HTML structure of the widget using custom JavaScript code. This way, the span can be fixed to be inlined much faster and easier.

We don't provide custom form creation or designing services, but you're welcome to work with a third party who may be able to help you. You can check out our Jotform Solutions Partner Directory for a list of consultants who've asked to be included. 

You can get in touch with the right Solutions Partner for you by sorting them by location, type of service, industry, language support, or partner tier. Just fill out the contact form for the Jotform partner you'd like to work with, so they can make the necessary preparations to help you.

Keep in mind, though, that these parties operate independently of Jotform, so we assume no responsibility or liability for their work or their actions. 

Let us know if you have any other questions.