Forums

[attachment=0]fieldset.png[/attachment]
Hi,
in my form layout I create a container / fieldset and there I will show the textarea with is 90%
The rows I set 12 and the colums I want to set per css

.Chronoform textarea {
    border: 3px solid #ddd;
    box-sizing: border-box;
    margin: 20px;
    padding: 20px;
    width: 90%;
}

...it don't works
How must I do it?
Thanks for your help!
Maggie

Hi Maggie,

90% of what exactly?

The class of the form is .chronoform, not .Chronoform

Bob

Hi Bob,
I want to bring up the textarea width 90% of the website.

Maggie

Hi Maggie,

Then you will need to make sure that all of the containing divs are also set to allow that width. The 90% applies to the parent div, not to the website.

Have you corrected your CSS?

Bob

Hi Bob,
html

<fieldset id="chronoform-container-38" class="chronoform-container-38">

css

fieldset.chronoform-container-38{
 	background-color: #990000;
        margin-left: 2%;
        width: 90%;
}

css don't respond

Hi Maggie,

Please check with your browser web developer tools to see exactly what is being applied. You may need to add CSS to any wrapping tags and/or use !important to get the width set.

Bob

:( there is only the css fieldset aktiv and my fieldset class is not indexed

Hi Maggie,

That sounds unlikely. Please post a link to the form so I can take a quick look.

Bob

Hi Bob,
the wrapping is now 90% 😀 (the plugin 'System - JCH Optimize' disturbed
but the textarea 'width:90%' is crossed out

textarea.mitteilung {
    background-image: url("http://wiki.selfhtml.org/mediawiki/images/9/9e/Talbruecke_poehl.jpg");
    background-size: auto 500px;
    float: left;
    margin-left: 2%;
    width: 90%;
}

Hi Maggie,

Then please try width: 90% !important;

Bob

Thanks Bob,
the input field ist the key
.gcore-input ist this the special chronoforms class?
can I combinate with my class in the textarea?

.gcore-input {
    float: left;
    background-color:#999900;
    width: 90%;
}

Hi Maggie,

There are several classes that ChronoForms uses. Using your browser web developer tools you can see the HTML and decide which one(s) are most useful to you. The whole form is in a div with a class .gbs3 so often this is useful.

Bob

:oops: sorry Bob, may I ask once more
html the textarea must have a width 90%

<fieldset id="chronoform-container-38" class="chronoform-container-mitteilung">
<legend>Ihre Mitteilung</legend>
<div id="ftr-mit" class="gcore-line-tr gcore-form-row">
<div id="ftd-mit" class="gcore-line-td">
<div id="fin-mit" class="gcore-display-table gcore-input">
<textarea id="mit" class="mitteilung" data-tooltip="" data-load-state="" data-wysiwyg="0" style="" title="" cols="" rows="12" placeholder="" name="mitteilung"></textarea>
</div>
</div>
</div>

css style to expand the width to 90%, but all input-fields in the form are now width 90% and thats wrong

.gcore-input {
    float: left;
    background-color:#999900;
    width: 90%;
}

[attachment=0]inputfield.png[/attachment]

How can I bring the .gcore-input only to the fieldset chronoform-container-38?
I'm sure you have a solution - thanks for your help
Maggie

Hi Maggie,

Please post a link to the form so I can take a quick look.

Bob

Hi Bob,
it is on my local server 😟
Maggie

...the formular code is:

<h4>Nehmen Sie Kontakt mit uns auf</h4><fieldset class="chronoform-container-address" id="chronoform-container-26">
					<legend>Meine Kontaktdaten</legend><div class="gcore-line-tr gcore-form-row" id="ftr-firma"><div class="gcore-line-td" id="ftd-firma"><label for="firma" class="gcore-label-left">Firma</label>
<div class="gcore-display-table gcore-input" id="fin-firma"><input name="firma" id="firma" value="" placeholder="" class=" validate['required']" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" /></div></div></div><div class="gcore-line-tr gcore-form-row" id="ftr-titel"><div class="gcore-line-td" id="ftd-titel"><label for="titel" class="gcore-label-left">Titel</label>
<div class="gcore-display-table gcore-input" id="fin-titel"><input name="titel" id="titel" value="" placeholder="" class="" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" /></div></div></div><div class="gcore-line-tr gcore-form-row" id="ftr-vorname"><div class="gcore-line-td" id="ftd-vorname"><label for="vorname" class="gcore-label-left">Vorname</label>
<div class="gcore-display-table gcore-input" id="fin-vorname"><input name="vorname" id="vorname" value="" placeholder="" class="" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" /></div></div></div><div class="gcore-line-tr gcore-form-row" id="ftr-name"><div class="gcore-line-td" id="ftd-name"><label for="name" class="gcore-label-left">Nachname</label>
<div class="gcore-display-table gcore-input" id="fin-name"><input name="name" id="name" value="" placeholder="" class="" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" /></div></div></div><div class="gcore-line-tr gcore-form-row" id="ftr-strasse"><div class="gcore-line-td" id="ftd-strasse"><label for="strasse" class="gcore-label-left">Strasse Nr.</label>
<div class="gcore-display-table gcore-input" id="fin-strasse"><input name="strasse" id="strasse" value="" placeholder="" class="" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" /></div></div></div><div class="gcore-line-tr gcore-form-row" id="ftr-ort"><div class="gcore-line-td" id="ftd-ort"><label for="ort" class="gcore-label-left">PLZ Ort</label>
<div class="gcore-display-table gcore-input" id="fin-ort"><input name="ort" id="ort" value="" placeholder="" class="" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" /></div></div></div><div class="gcore-line-tr gcore-form-row" id="ftr-telefon"><div class="gcore-line-td" id="ftd-telefon"><label for="telefon" class="gcore-label-left">Telefon</label>
<div class="gcore-display-table gcore-input" id="fin-telefon"><input name="telefon" id="telefon" value="" placeholder="" class="" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" /></div></div></div><div class="gcore-line-tr gcore-form-row" id="ftr-fax"><div class="gcore-line-td" id="ftd-fax"><label for="fax" class="gcore-label-left">Fax</label>
<div class="gcore-display-table gcore-input" id="fin-fax"><input name="fax" id="fax" value="" placeholder="" class="" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" /></div></div></div><div class="gcore-line-tr gcore-form-row" id="ftr-email"><div class="gcore-line-td" id="ftd-email"><label for="email" class="gcore-label-left">E-Mail</label>
<div class="gcore-display-table gcore-input" id="fin-email"><input name="email" id="email" value="" placeholder="" class=" validate['required','email']" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" /></div></div></div><div class="gcore-line-tr gcore-form-row" id="ftr-dropdown14"><div class="gcore-line-td" id="ftd-dropdown14"><label for="dropdown14" class="gcore-label-leftmore">Bitte kontaktieren Sie uns per </label>
<div class="gcore-display-table gcore-input" id="fin-dropdown14"><select name="dropdown14" id="dropdown14" size="" class="" title="" style="" data-load-state="" data-tooltip="">
<option value="E-Mail">E-Mail</option>
<option value="Telefon">Telefon</option>
<option value="Briefpost">Briefpost</option>
</select></div></div></div></fieldset><fieldset class="chronoform-container-themen" id="chronoform-container-24">
					<legend>Ich interessiere mich für folgende Themen</legend><div class="gcore-line-tr gcore-form-row" id="ftr-checkbox15"><div class="gcore-line-td" id="ftd-checkbox15"><label for="checkbox15" class="gcore-label-right">Energieeffizienz-Beratung</label>
<div class="gcore-display-table gcore-input" id="fin-checkbox15"><input name="checkbox15" id="checkbox15" value="1" class="" title="" style="" data-load-state="" data-tooltip="" type="checkbox" /></div></div></div>

<div class="gcore-line-tr gcore-form-row" id="ftr-checkbox16"><div class="gcore-line-td" id="ftd-checkbox16"><label for="checkbox16" class="gcore-label-right">Fördermittel-Beratung</label>
<div class="gcore-display-table gcore-input" id="fin-checkbox16"><input name="checkbox16" id="checkbox16" value="1" class="" title="" style="" data-load-state="" data-tooltip="" type="checkbox" /></div></div></div>

<div class="gcore-line-tr gcore-form-row" id="ftr-checkbox17"><div class="gcore-line-td" id="ftd-checkbox17"><label for="checkbox17" class="gcore-label-right">Druckluftanlagen-Optimierung</label>
<div class="gcore-display-table gcore-input" id="fin-checkbox17"><input name="checkbox17" id="checkbox17" value="1" class="" title="" style="" data-load-state="" data-tooltip="" type="checkbox" /></div></div></div>

<div class="gcore-line-tr gcore-form-row" id="ftr-checkbox18"><div class="gcore-line-td" id="ftd-checkbox18"><label for="checkbox18" class="gcore-label-right">Gebäude-Energieberatung</label>
<div class="gcore-display-table gcore-input" id="fin-checkbox18"><input name="checkbox18" id="checkbox18" value="1" class="" title="" style="" data-load-state="" data-tooltip="" type="checkbox" /></div></div></div>

<div class="gcore-line-tr gcore-form-row" id="ftr-checkbox19"><div class="gcore-line-td" id="ftd-checkbox19"><label for="checkbox19" class="gcore-label-right">Energiebedarfsausweis</label>
<div class="gcore-display-table gcore-input" id="fin-checkbox19"><input name="checkbox19" id="checkbox19" value="1" class="" title="" style="" data-load-state="" data-tooltip="" type="checkbox" /></div></div></div></fieldset><fieldset class="chronoform-container-mitteilung" id="chronoform-container-38">
					<legend>Ihre Mitteilung</legend><div class="gcore-line-tr gcore-form-row" id="ftr-mit"><div class="gcore-line-td" id="ftd-mit"><div class="gcore-display-table gcore-input" id="fin-mit"><textarea name="mitteilung" id="mit" placeholder="" rows="12" cols="" class="mitteilung" title="" style="" data-wysiwyg="0" data-load-state="" data-tooltip=""></textarea></div></div></div><div class="gcore-line-tr gcore-form-row" id="ftr-captcha"><div class="gcore-line-td" id="ftd-captcha"><div class="gcore-subinput-container-wide" id="fitem"><label for="captcha1" class="gcore-label-left">Sicherheitscode</label>
<div class="gcore-input-container gcore-display-table gcore-input" id="fin-captcha1"><input placeholder="" size="8" class=" validate['required']" title="" style="" type="text" name="captcha" id="captcha1" /></div></div>
<div class="gcore-subinput-container-wide" id="fitem1"><div class="gcore-input-container gcore-display-table gcore-input" id="fin-captcha2">{captcha_img}</div></div></div></div><div class="gcore-line-tr gcore-form-row" id="ftr-submit6"><div class="gcore-line-td" id="ftd-submit6"><div class="gcore-display-table gcore-input" id="fin-submit6"><input name="submit6" id="submit6" type="submit" value="absenden" class="" style="" data-load-state="" /></div></div></div></fieldset>

Hi Maggie,

Then you need to use more specific CSS selectors to identify the elements that you want the CSS to apply to. You can usually use the element ids to do that.

I can’t help without seeing the form as it is likely that your template CSS is involved here.

Bob

Hi Bob,
I'll try it 🙂
Maggie