Page 1 of 1

Formbuilder probleem met CSS

Posted: Sat Dec 08, 2012 2:40 pm
by rayring
Op de volgende website wil ik graag het formulier uitlijnen met CSS
Ik heb al van alles geprobeerd zoals css classes met de velden mee te geven en CSS code toe te voegen aan de stylesheet maar krijg het niet netjes

Ik wil graag dat onderstaande velden naast elkaar komen te staan:

Uw naam *
Straat en huisnr:*
Postcode:*
Woonplaats:*
Uw telefoonnummer
Mobiel:*
Uw email adres*


En dan de velden hieronder ==> naast de velden hierboven

Branche*
Uw branche niet in de lijst? vul hier in:
Aantal kramen:
Elektriciteit:*
Ja
Nee
Indien grondplaats vermeld aantal M2


En dat hier de rest van het formulier verder gaat in de volledige breedte:

Hieronder vindt u een overzicht van onze marktlijst selecteer een markt (meerdere keuzes mogelijk) om deze te reserveren... etc...

Het lukt me maar niet om dit zo voor elkaar te krijgen, wie kan me helpen :-[

Het gaat om dit formulier: http://goo.gl/X36Af

Re: Formbuilder probleem met CSS

Posted: Sat Dec 08, 2012 3:05 pm
by Rolf

Re: Formbuilder probleem met CSS

Posted: Mon Dec 10, 2012 6:30 pm
by rayring
Bedankt Rolf, ik heb geprobeerd de velden naast elkaar te krijgen maar helaas is dit niet gelukt wanneer ik met bijv. float en margins werk dan worden de velden gecropped, ik kom er niet uit... nog iemand suggesties of een sjabloon wat iemand nu al gebruikt voor zijn formulieren.. :-[

Re: Formbuilder probleem met CSS

Posted: Mon Dec 10, 2012 6:35 pm
by timdebuurman
Zo te zien staat je formulier in een table.
Dat is toch niet standaard?

Als de velden nu in die table-cellen staan, gebeurt er natuurlijk niet veel als je een class toevoegt en die probeert te stylen.

Re: Formbuilder probleem met CSS

Posted: Mon Dec 10, 2012 6:46 pm
by rayring
timdebuurman wrote:Zo te zien staat je formulier in een table.
Dat is toch niet standaard?

Als de velden nu in die table-cellen staan, gebeurt er natuurlijk niet veel als je een class toevoegt en die probeert te stylen.
Nee dat klopt dat is niet slim... in eerste instantie was ik wel met het standaardsjabloon aan het proberen, daarna heb ik 'm weer op tables gezet... Ik ga het nog eens proberen..

Re: Formbuilder probleem met CSS

Posted: Mon Dec 10, 2012 7:31 pm
by rayring
Pfff schiet mij maar lek... heb de styles aangemaakt meer krijg de velden niet naast elkaar zal het wellicht fout doen maar....waar..

Form ziet er nu zo uit:

Image

Gebruikte sjabloon:

Code: Select all

{* DEFAULT FORM LAYOUT / pure CSS *}
{literal}
<__script__ type="text/javascript">
function fbht(htid)
	{
		var fbhtc=document.getElementById(htid);
		if (fbhtc)
			{
			if (fbhtc.style.display == 'none')
				{
				fbhtc.style.display = 'inline';
				}
			else
				{
				fbhtc.style.display = 'none';
				}
			}
}
</__script>
{/literal}
{$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}&nbsp;{$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->helptext != ''}&nbsp;<a href="javascript:fbht('{$entry->field_helptext_id}')"><img src="modules/FormBuilder/images/info-small.gif" alt="Help" /></a>
					<span id="{$entry->field_helptext_id}" style="display:none" class="fbr_helptext">{$entry->helptext}</span>{/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}
Gebruikte styling

Code: Select all

.column {
    float:left
    width: 400px;
    position: relative;
}

.columnclear {
    float:left top;
    width: 400px;
    margin-left: 250px;
    margin-top: -50px;
    position: relative;
}

.marktlijst {
    float:left;
    margin-top: 20px;
}

.clear {clear:both}
label {display:block}

Re: Formbuilder probleem met CSS

Posted: Mon Dec 10, 2012 7:54 pm
by timdebuurman
Ik wil je er best even mee helpen.

Als je mij de broncode wilt sturen, dus zonder de tables en even duidelijk uitlegt wat je precies wilt (je uitleg daarover vond ik nog niet echt duidelijk) dan zal ik wel de styles ervoor maken.

Re: Formbuilder probleem met CSS

Posted: Tue Dec 11, 2012 7:07 am
by rayring
timdebuurman wrote:Ik wil je er best even mee helpen.

Als je mij de broncode wilt sturen, dus zonder de tables en even duidelijk uitlegt wat je precies wilt (je uitleg daarover vond ik nog niet echt duidelijk) dan zal ik wel de styles ervoor maken.
Top ik stuur je een PM!