How do I have several elements on a single line, rather than below each other?

Status
Not open for further replies.
R

RuthC

New Member
My client doesn't like the popup calendar as a date field (as it starts with todays date which isn't so helpful if you were born in the 1960's!!) and I am trying to do it a different way by having DD/MM as dropdowns, and YYYY as a text field.

My question is, how do I get these to be in a line (just these three elements) rather than below each other?

Answers on a postcard.... or just reply here or email me at <email removed due to spam>. The form in question is at http://www.lucasmortgages.co.uk/latest/mortgage-enquiry-form.html
 
hi

First of all you will need to update to the latest code from the SVN, details of how to get these files are found in the link in my signature.

Once you have updated your fabrik files from the SVN, you will need to create a custom template for the form. To do this copy the folder

components/com_fabrik/views/form/tmpl/default

and rename it to

components/com_fabrik/views/form/tmpl/mortgage


If you view the source of your form you will see that each element and label are encase inside a div

<div class="fb_element" id="fb_element_1">...</div>

We can apply css styles to these elements by editing the css file: components/com_fabrik/views/form/tmpl/mortgage/template.css


The "1" in "fb_element_1" refers to element's id. So say your three date elements had ids of 1,2 & 3 you need to add the following to the bottom of the template.css file:

Code: 
#fb_element_1 .fabrikLabel,
#fb_element_2 .fabrikLabel,
#fb_element_3 .fabrikLabel{
float:left;
}

#fb_element_1 .fb_element,
#fb_element_2 .fb_element,
#fb_element_2 .fb_element{
width:32%;
float:left;
clear:none;
}
 
Re: How do I have several elements on a single line, rather than below each othe

I am definitely confuzzled now. Please be aware I have very little coding knowledge.

When I view the source of my form I don't see what you state, I see

Code: 
<div class="fb_element"> <div class="fabrikLabel" id="fb_el_jos_fabrik_formdata_1___day_text"><label for="jos_fabrik_formdata_1___day"><span class="editlinktip"><span onmouseover="return overlib('Day', CAPTION, 'DD', BELOW, RIGHT);" onmouseout="return nd();">DD</span></span></label></div>

Code: 
<div class="fb_element"> <div class="fabrikLabel" id="fb_el_jos_fabrik_formdata_1___month_text"><label for="jos_fabrik_formdata_1___month"><span class="editlinktip"><span onmouseover="return overlib('Month', CAPTION, 'Month', BELOW, RIGHT);" onmouseout="return nd();">MMM</span></span></label></div>

Code: 
<div class="fb_element"> <div class="fabrikLabel alphanumeric notempty" id="fb_el_jos_fabrik_formdata_1___year_text"><label for="jos_fabrik_formdata_1___year"><span class="editlinktip"><span onmouseover="return overlib('Year', CAPTION, 'Year', BELOW, RIGHT);" onmouseout="return nd();">YYYY</span></span></label></div>

Am I to assume, therefore, that I need to put the following in the CSS file:

Code: 
}
#fb_el_jos_fabrik_formdata_1___day_text .fabrikLabel,
#fb_el_jos_fabrik_formdata_1___month_text .fabrikLabel,
#fb_el_jos_fabrik_formdata_1___year_text .fabrikLabel,{
float:left;
}

#fb_el_jos_fabrik_formdata_1___day_text .fb_element,
#fb_el_jos_fabrik_formdata_1___month_text .fb_element,
#fb_el_jos_fabrik_formdata_1___year_text .fb_element,{
width:32%;
float:left;
clear:none;
}

NB I am assuming this is incorrect, as it does not work :p

I have also tried:

Code: 
}
#fb_element_1___day_text .fabrikLabel,
#fb_element__1___month_text .fabrikLabel,
#fb_element__1___year_text .fabrikLabel,{
float:left;
}

#fb_element__1___day_text .fb_element,
#fb_element__1___month_text .fb_element,
#fb_element__1___year_text .fb_element,{
width:32%;
float:left;
clear:none;
}

to no avail.

Sorry for my infuriating lack of leet coding skills but would really appreciate slightly more assistance if possible.

Cheers

Ruth
 
Hi,

must I change also the "template.php" ?
in <div class="fb_element" id="fb_element_<?php echo $element->int;?>">
by <div class="fb_element" id="fb_element_1">

Is the same think in tmpl/mint where
<tr class="fb_element" id="fb_element_<?php echo $element->int;?>">

Pirina
 
must I change also the "template.php" ?
in <div class="fb_element" id="fb_element_<?php echo $element->int;?>">
by <div class="fb_element" id="fb_element_1">
Click to expand...

no when the template is rendered the <?php echo $element->int;?> is replaced with 1 for the first element, then 2 for the second element and so on.

Is the same think in tmpl/mint where
<tr class="fb_element" id="fb_element_<?php echo $element->int;?>">
Click to expand...

yes thats the same

Cheers
Rob
 
Hi Rob,

I just copied your exemple in my form template. Don't want to work.
What is wrong ?

Thanks,
Pirina
 
Re: How do I have several elements on a single line, rather than below each othe

Hi Rob

The files had not overwritten - now I've done this the id's are 17/18/19 and I entered the following in the template.css file as instructed:

Code: 
#fb_element_17 .fabrikLabel,
#fb_element_18 .fabrikLabel,
#fb_element_19 .fabrikLabel{
float:left;
}

#fb_element_17 .fb_element,
#fb_element_18 .fb_element,
#fb_element_19 .fb_element{
width:32%;
float:left;
clear:none;
}

No joy! Please advise what I am doing wrong, I believe I've followed your instructions to the letter :(
 
Re: How do I have several elements on a single line, rather than below each othe

Hi Rob,

Any news on this problem? I would really like to get it sorted out as it's the last thing on my list for this website's form!

Kind Regards,

Ruth Cheesley
 
Re: How do I have several elements on a single line, rather than below each othe

I think the second group may need to be like this:

#fb_element_17,
#fb_element_18,
#fb_element_19
{
width:32%;
float:left;
clear:none;
}

... without the .fb_element class name. I may be wrong, but I think appending the class name to a by-id selector will only match descendents within the specified entity which have the matching class. And because the fb_element class is associated with those id entities themselves, not with a descendent, it won't match anything.

The other group should be OK, as the fabrikClass entities are descendents of the specified id's.

However, even if this CSS works, I don't think it'll quite do what you want, but at least its a start.

Let me know

-- hugh
 
Re: How do I have several elements on a single line, rather than below each othe

Many thanks Hugh! They are at least on the same line now (woohoo!) although hugely spaced out, and I would like to have them with a label that says Date of Birth (at the moment each element has a label e.g. DD/MMM/YYYY). I am suprised this has not come up before!

Is there not any way that this could be grouped into one element that allows for multiple fields - an alternative "date" field that doesn't use the calendar popup? Most forms I see online use this type of date field for DOB, rather than a calendar style.

Many thanks for your help :)

Kind Regards,

Ruth Cheesley
 
Is there not any way that this could be grouped into one element that allows for multiple fields - an alternative "date" field that doesn't use the calendar popup? Most forms I see online use this type of date field for DOB, rather than a calendar style.
Click to expand...

not in the current 1.0.x versions, in 2.0 we are introducing a plugin architecture for elements, which would allow you (or someone else) to write a relatively small amount of code to create this element type

Cheers
rob
 
Re: How do I have several elements on a single line, rather than below each othe

There's probably some more CSS stuff you can do to improve the way it looks. Do you have FireFox with FireBug loaded? If so, this makes it very easy to experiment with CSS, as you can play around and test and change stuff on the fly on your page.

-- hugh
 
Status
Not open for further replies.

Useful links

  • Create a Fabrik Account (Downloads)
  • Create a Forum Account
  • Fabrik Wiki
  • Fabrik 4 Changelog /Install /Upgrade
    • We are in need of some funding.
    More details.

    Thank you.

    Members online

    No members online now.
    Total: 197 (members: 0, guests: 197)
    Back
    Top