[OPGELOST] Form builder hulp met layout velden

Nederlandse ondersteuning voor CMS Made Simple

Moderator: velden

Post Reply
rayring
Forum Members
Forum Members
Posts: 166
Joined: Sun Nov 30, 2008 6:45 pm

[OPGELOST] Form builder hulp met layout velden

Post by rayring »

Hoi Allemaal,

Wie kan me helpen met het goed zetten van velden in mijn form.
Ik heb al diverse topics gelezen en met CSS en de templates gespeeld maar krijg niet het gewenste resultaat.
Image

Ik wil graag de velden met de rode puntjes erachter alignen (recht onder elkaar hebben.
De rest van de velden vind ik prima staan.

De template die ik gebruik is deze:

Code: Select all

{* DEFAULT FORM LAYOUT / pure CSS *}
{$fb_form_header}
{if $fb_form_done == 1}
	{* This first section is for displaying submission errors *}
	{if isset($fb_submission_error) && $fb_submission_error}
		<div class="error_message">{$fb_submission_error}</div>
		{if isset($fb_show_submission_errors) && $fb_show_submission_errors}
			<div class="error">
			<ul>
			{foreach from=$fb_submission_error_list item=thisErr}
				<li>{$thisErr}</li>
			{/foreach}
			</ul>
		</div>
		{/if}
	{/if}
{else}
	{* this section is for displaying the form *}
	{* we start with validation errors *}
	{if isset($fb_form_has_validation_errors) && $fb_form_has_validation_errors}
		<div class="error_message">
		<ul>
		{foreach from=$fb_form_validation_errors item=thisErr}
			<li>{$thisErr}</li>
		{/foreach}
		</ul>
		</div>
	{/if}
	{if isset($captcha_error) && $captcha_error}
		<div class="error_message">{$captcha_error}</div>
	{/if}

	{* and now the form itself *}
	{$fb_form_start}
	<div>{$fb_hidden}</div>
	<div{if $css_class != ''} class="{$css_class}"{/if}>
	{if $total_pages gt 1}<span>{$title_page_x_of_y}</span>{/if}
	{foreach from=$fields item=entry}
		{if $entry->display == 1}
        	{strip}
         	{if $entry->needs_div == 1}
            	<div
            	{if $entry->required == 1 || $entry->css_class != '' || $entry->valid == 0} class="
              		{if $entry->required == 1}required{/if}
              		{if $entry->css_class != ''} {$entry->css_class}{/if}
                    {if $entry->valid == 0} fb_invalid{/if}
              		"
            	{/if}
            	>
         	{/if}
         	{if $entry->hide_name == 0}
            	<label{if $entry->multiple_parts != 1} for="{$entry->input_id}"{/if}>{$entry->name}
            	{if $entry->required_symbol != ''}
               		{$entry->required_symbol}
            	{/if}
            	</label>
         	{/if}
         	{if $entry->multiple_parts == 1}
            	{section name=numloop loop=$entry->input}
               		{if $entry->label_parts == 1}
               			<div>{$entry->input[numloop]->input} {$entry->input[numloop]->name}</div>
               		{else}
               			{$entry->input[numloop]->input}
               		{/if}
               		{if isset($entry->input[numloop]->op) && $entry->input[numloop]->op}{$entry->input[numloop]->op}{/if}
            	{/section}
         	{else}
            	{if $entry->smarty_eval == '1'}{eval var=$entry->input}{else}{$entry->input}{/if}
         	{/if}
         	{if $entry->valid == 0} <--- {$entry->error}{/if}
         	{if $entry->needs_div == 1}
            	</div>
         	{/if}
         	{/strip}
     	{/if}
	{/foreach}
	{if $has_captcha == 1}
		<div class="captcha">{$graphic_captcha}{$title_captcha}<br />{$input_captcha}</div>
	{/if}
	<div class="submit">{$prev}{$submit}</div>
	</div>
	{$fb_form_end}
{/if}
{$fb_form_footer}
Wie kan me helpen met deze aanpassing.....
Last edited by rayring on Mon Jan 25, 2010 9:44 pm, edited 1 time in total.
Jos
Support Guru
Support Guru
Posts: 4019
Joined: Wed Sep 05, 2007 8:03 pm
Location: The Netherlands

Re: Form builder hulp met layout velden

Post by Jos »

Je kunt de label een vaste breedte geven in je css, dan ben je volgens mij al klaar
rayring
Forum Members
Forum Members
Posts: 166
Joined: Sun Nov 30, 2008 6:45 pm

Re: Form builder hulp met layout velden

Post by rayring »

Ik heb wat waarden in onderstaande CSS aangepast maar dit lijkt niet te werken kun je wellicht een voorbeeld van css code geven... dank..

Hier mijn form CSS

Code: Select all

.contactform{
	width: 100px;
                margin-left: 1.3em;
}
.contactform fieldset {
	border: 1px solid #666666;
	padding: 12px;
}

.contactform fieldset legend {
	font-weight: bold;
	padding: 8px 8px 8px 37px;
        margin-bottom: 1px;
	border:1px solid #003300;
	color:#006600;
	font-size:12px;
	text-align:right;
	background: #CCFF99 url(/images/cms/email_open.gif) no-repeat 2px center;
}

.contactform fieldset .CMSMStextfield label {
width: 12em;
float: left;
text-align: right;
margin-right: 0.5em;
display: block
}
.contactform div {
padding: 0.25em 0 0.25em 0;
}
.contactform div:hover {
	background: #CCFF99;
}
.contactform .CMSMStextfield input {
	color: #000000;
	background: #FFFFCC;
	border: 1px solid #333300;
	width: 250px;
}
.contactform div.required {
color: #CC0000;
}
.contactform fieldset .CMSMStextarea label {
width: 12em;
float: left;
text-align: right;
margin-right: 0.5em;
display: block
}
.contactform .CMSMStextarea textarea {
	color: #000000;
	background: #FFFFCC;
	border: 1px solid #333300;
	width: 250px;
}
.contactform textarea:focus {
	background: #FFFFFF;
}
.contactform .captcha {
	padding-left: 10px;
}
.contactform .captchapict {
	display: block;
	margin: 10px 10px 10px 0px;
}
.contactform .captcha input {
	color: #000000;
	background: #FFFFCC;
	border: 1px solid #333300;
	width: 195px;
	margin: 5px 5px 5px 0px;
}
.contactform input:focus {
	background: #FFFFFF;
}
.contactform .submit {
	padding-left: 10px;
}
.contactformR {
	width: 100%;
}
.contactformR fieldset {
	border: 1px solid #666666;
	padding: 12px;
}

.contactformR fieldset legend {
	font-weight: bold;
	padding: 8px 8px 8px 37px;
        margin-bottom: 10px;
	border:1px solid #003300;
	color:#006600;
	font-size:12px;
	text-align:right;
	background: #CCFF99 url(/images/cms/email_sent.gif) no-repeat 2px center;
}
.contactformR div {
padding: 0.25em 0 0.25em 0;
}
Jos
Support Guru
Support Guru
Posts: 4019
Joined: Wed Sep 05, 2007 8:03 pm
Location: The Netherlands

Re: Form builder hulp met layout velden

Post by Jos »

een link naar je formulier zou het helpen zwaar vergemakkelijken  ;)
User avatar
Rolf
Power Poster
Power Poster
Posts: 7825
Joined: Wed Apr 23, 2008 7:53 am
Location: The Netherlands
Contact:

Re: Form builder hulp met layout velden

Post by Rolf »

In de FB admin kun je onder Formulier Sjablonen kiezen voor: Sjabloon laden (oid)
Hier kun je kiezen voor een tabel vormgeving, waardoor alles mooi recht onder elkaar staat.

®
- + - + - + - + - + - + -
LATEST TUTORIAL AT CMS CAN BE SIMPLE:
Migrating Company Directory module to LISE
- + - + - + - + - + - + -
Image
Jos
Support Guru
Support Guru
Posts: 4019
Joined: Wed Sep 05, 2007 8:03 pm
Location: The Netherlands

Re: Form builder hulp met layout velden

Post by Jos »

Rolf wrote:Hier kun je kiezen voor een tabel vormgeving,
oeioeioei Rolf... wat zeg je nu dan  :o  ;D
User avatar
Rolf
Power Poster
Power Poster
Posts: 7825
Joined: Wed Apr 23, 2008 7:53 am
Location: The Netherlands
Contact:

Re: Form builder hulp met layout velden

Post by Rolf »

Jos wrote:
Rolf wrote:Hier kun je kiezen voor een tabel vormgeving,
oeioeioei Rolf... wat zeg je nu dan  :o   ;D
Ik beroep me op het feit dat ik de module niet heb gemaakt en dus niet verantwoordelijk kan worden gehouden voor enige programmeerkeuzes  :P
Lees hiervoor ook mijn disclaimer of neem contact op mijn advocaat.

;D ®
- + - + - + - + - + - + -
LATEST TUTORIAL AT CMS CAN BE SIMPLE:
Migrating Company Directory module to LISE
- + - + - + - + - + - + -
Image
User avatar
wpbremer
Power Poster
Power Poster
Posts: 455
Joined: Thu Nov 13, 2008 12:15 pm

Re: Form builder hulp met layout velden

Post by wpbremer »

rayring wrote:

Code: Select all


.contactform fieldset .CMSMStextfield label {
width: 12em;
float: left;
text-align: right;
margin-right: 0.5em;
display: block
}

en

.contactform fieldset .CMSMStextarea label {
width: 12em;
float: left;
text-align: right;
margin-right: 0.5em;
display: block
}

Beste Rayring,

ik heb zoals je weet (sinds zaterdag) er niet zo heel veel verstand van, maar missen er in bovenstaande achter "display: block" geen ";" ?

Misschien is dat de oplossing?
User avatar
stijlXpres
Forum Members
Forum Members
Posts: 137
Joined: Tue May 05, 2009 12:10 pm
Location: Raalte, the Netherlands

Re: Form builder hulp met layout velden

Post by stijlXpres »

@Rayring,

Ik heb verscheidene keren met hetzelfde 'probleem' te maken gehad. Onderstaand de CSS die ik gebruik om het zonder gebruik van tabellen voor mekaar te krijgen. Waarbij je uiteraard '.formulier' dient te vervangen door een door jou in FB meegegeven Class voor het bewuste formulier.

Code: Select all

.formulier label { display: inline; float: left; width: 270px; }
.formulier input { left: 270px; }
.formulier select { width: 175px; }
.formulier checkbox { left: 270px; }
Succes!

@wpbremer,

Aangezien de eigenschap 'display: block' de laatste is voor de betreffende Class, hoef je niet perse af te sluiten met een ';'
Neemt niet weg dat het wel handiger is om het gewoon consequent wel te doen...
Last edited by stijlXpres on Mon Jan 25, 2010 2:37 pm, edited 1 time in total.
User avatar
wpbremer
Power Poster
Power Poster
Posts: 455
Joined: Thu Nov 13, 2008 12:15 pm

Re: Form builder hulp met layout velden

Post by wpbremer »

stijlXpres wrote: @Rayring,

Ik heb verscheidene keren met hetzelfde 'probleem' te maken gehad. Onderstaand de CSS die ik gebruik om het zonder gebruik van tabellen voor mekaar te krijgen. Waarbij je uiteraard '.formulier' dient te vervangen door een door jou in FB meegegeven Class voor het bewuste formulier.

Code: Select all

.formulier label { display: inline; float: left; width: 270px; }
.formulier input { left: 270px; }
.formulier select { width: 175px; }
.formulier checkbox { left: 270px; }
Succes!

@wpbremer,

Aangezien de eigenschap 'display: block' de laatste is voor de betreffende Class, hoef je niet perse af te sluiten met een ';'
Neemt niet weg dat het wel handiger is om het gewoon consequent wel te doen...
Tnx weer wat geleerd.
rayring
Forum Members
Forum Members
Posts: 166
Joined: Sun Nov 30, 2008 6:45 pm

Re: Form builder hulp met layout velden

Post by rayring »

Super bedankt voor alle reacties ik ga eens even CSS aanpassen met de tip van StyleXpres en laat weten hoe het verloopt..

@Rolf ik heb inderdaad ook de template voor de "tabel vormgeving" gebruikt maar dan kwamen mijn tekst en mijn aanvinkbuttons niet mooi uit...
rayring
Forum Members
Forum Members
Posts: 166
Joined: Sun Nov 30, 2008 6:45 pm

Re: Form builder hulp met layout velden

Post by rayring »

;D ;D ;D Yes that did the trick!! ;D ;D ;D

Ik heb inderdaad verschillende CSS classes aangemaakt en deze voorzien van bijvoorbeeld:

Code: Select all

.Bedrijfsnaam label { 
display: inline; float: left; width: 110px; 
}
Het resultaat:

Image

Alleen nog 1 vraag hoe krijg ik captcha ook net in mijn grijze kader ??? zie hieronder:

Image

Iemand een idee ik zag wel deze code in CSS maar krijg het nog niet voor elkaar om de captch boven de "fieldset end" te krijgen..

Code: Select all

.contactform  .captcha {
	padding-left: 10px;
}
.contactform  .captchapict {
	display: block;
	margin: 10px 10px 10px 0px;
}
.contactform  .captcha input {
	color: #000000;
	background: #FFFFCC;
	border: 1px solid #333300;
	width: 195px;
	margin: 5px 5px 5px 0px;
}
Last edited by rayring on Mon Jan 25, 2010 8:16 pm, edited 1 time in total.
User avatar
stijlXpres
Forum Members
Forum Members
Posts: 137
Joined: Tue May 05, 2009 12:10 pm
Location: Raalte, the Netherlands

Re: Form builder hulp met layout velden

Post by stijlXpres »

Vreemd inderdaad, maar was mij nog nooit opgevallen, aangezien ik blijkbaar 'toevallig' steeds de achtergrond en border transparent heb gehouden. Heb het getest op een eigen site, en zie hetzelfde probleem.

Wat je zou kunnen doen is de achtergrond en border van de fieldset onzichtbaar maken:
.formulier fieldset { border: none; background: transparent; }
En vervolgens om het gehele formulier een div plaatsen met een achtergrond en kader naar keuze. Heb het niet getest, maar zou moeten werken...
Last edited by stijlXpres on Mon Jan 25, 2010 8:36 pm, edited 1 time in total.
User avatar
stijlXpres
Forum Members
Forum Members
Posts: 137
Joined: Tue May 05, 2009 12:10 pm
Location: Raalte, the Netherlands

Re: Form builder hulp met layout velden

Post by stijlXpres »

rayring wrote:
Ik heb inderdaad verschillende CSS classes aangemaakt en deze voorzien van bijvoorbeeld:

Code: Select all

.Bedrijfsnaam label { 
display: inline; float: left; width: 110px; 
}
Dat had je trouwens waarschijnlijk makkelijker kunnen doen. Je kunt in FB namelijk ook een compleet formulier een CLASS meegeven, en vervolgens voor het gehele formulier alles labels, inputs e.d. mbv CSS van styling voorzien.
rayring
Forum Members
Forum Members
Posts: 166
Joined: Sun Nov 30, 2008 6:45 pm

Re: Form builder hulp met layout velden

Post by rayring »

stijlXpres wrote: Vreemd inderdaad, maar was mij nog nooit opgevallen, aangezien ik blijkbaar 'toevallig' steeds de achtergrond en border transparent heb gehouden. Heb het getest op een eigen site, en zie hetzelfde probleem.

Wat je zou kunnen doen is de achtergrond en border van de fieldset onzichtbaar maken:
.formulier fieldset { border: none; background: transparent; }
En vervolgens om het gehele formulier een div plaatsen met een achtergrond en kader naar keuze. Heb het niet getest, maar zou moeten werken...
Ja dat werkt beter, super bedankt voor je hulp... het blijft een aandachtspunt dat CSS toch eens meer in verdiepen..  ;D
Post Reply

Return to “Dutch - Nederlands”