• Hello Fabrik Community

    Fabrik is now in the hands of the development team that brought you Fabrik for Joomla 4. We have recently transitioned the Fabrik site over to a new server and are busy trying to clean it up. We have upgraded the site to Joomla 4 and are running the latest version of Fabrik 4. We have also upgraded the Xenforo forum software to the latest version. Many of the widgets you might have been used to on the forum are no longer operational, many abandoned by the developers. We hope to bring back some of the important ones as we have time.

    Exciting times to be sure.

    The Fabrik 4.0 Official release is now available. In addition, the Fabrik codebase is now available in a public repository. See the notices about these in the announcements section

    We wish to shout out a very big Thank You to all of you who have made donations. They have really helped. But we can always use more...wink..wink..

    Also a big Thank You to those of you who have been assisting others in the forum. This takes a very big burden off of us as we work on bugs, the website and the future of Fabrik.

Calendar Field not algining

mrmcbobit

New Member
Hello all,

I've added the date function to a form and the field to select the date is on the far right of the form, leaving a huge gap between the label and the field.

I attempted to use firebug to figure with .css element was causing this but I was unable to tell, new to firebug. It appeared to be an inline style, but of course I'm just assuming here, I'm probably using it wrong.

If someone could point me in the right direction I'd be very grateful.

Fabrik version 3.0.5.172
Joomla 2.5.4
URL: http://foxent.us/index.php/contact-us/get-a-quote

Thanks,
Bob
 
It's your gantry Joomla template, it's setting ul li.date {text-align:right}

Add a file custom_css.php to your form's template folder (see the custom_css_example.php for details)
Try with

#{$view}_$c .fabrikElementContainer {
text-align:left;
}

This is what gantry.css does
ul li.date {
font-weight: bold;
letter-spacing: 1px;
list-style: none outside none;
margin: 0;
text-align: right;


}
so maybe you want to reset font-weight... , too
 
troester, thanks for the info. However I'll be the first to admit I'm a noob when it comes to CSS and making it work properly. With that said using what you laid out below and the reviewing the custom_css_example.php and the and the wiki on custom CSS, I still can't seem to make it work.

This is what I did:
Created custom custom_css.php with the below code and copied to: /com_fabrik/views/form/tmpl/default folder. Can you tell me what I'm doing wrong?

PHP:
<?php
 
/* BEGIN - Your CSS styling starts here */
#{$view}_$c .fabrikElementContainer {
text-align:left;
 
ul li.date {
font-weight: normal;
letter-spacing: 1px;
list-style: none outside none;
margin: 0;
}
 
/* END - Your CSS styling ends here */
";
?>

Nothing changed, not even the font weight.

The element name is quote_date, the ID is 12

Thanks,
Bob
 
Only change the part between
/* BEGIN - Your CSS styling starts here */

xxxx
}

/* END - Your CSS styling ends here */

You must leave the rest untouched.

Try with xxxx

#{$view}_$c .fabrikElementContainer {
text-align:left;
font-weight: normal;
}

or

#{$view}_$c ul li.date {
text-align:left;
font-weight: normal;
}
 
Here is my code now, the only changes I made was what you recommend but they didn't seem to work.

Code:
text/x-generic custom_css_example.phpPHP script text<?php/** * If you need to make small adjustments or additions to the CSS for a Fabrik * template, you can create a custom_css.php file, which will be loaded after * the main template_css.php for the template. * * This file will be invoked as a PHP file, so the view type and form ID * can be used in order to narrow the scope of any style changes.  You do * this by prepending #{$view}_$c to any selectors you use.  This will become * (say) #form_12, or #details_11, which will be the HTML ID of your form * on the page. * * See examples below, which you should remove if you copy this file. * * Don't edit anything outside of the BEGIN and END comments. * * For more on custom CSS, see the Wiki at: * * http://fabrikar.com/wiki/index.php/3.x_Form_Templates#Custom_CSS * */header('Content-type: text/css');$c = (int)$_REQUEST['c'];$view = isset($_REQUEST['view']) ? $_REQUEST['view'] : 'form';echo "/* BEGIN - Your CSS styling starts here */#{$view}_$c ul li.date {text-align:left;font-weight: normal;}/* END - Your CSS styling ends here */";?>

The XXX represents the new CSS code, right? Not sure what I'm doing wrong..

Thanks,
Bob
 
text/x-generic custom_css_example.phpPHP script text
Your code looks strange, your custom_css.php is loaded but empty; try
Code:
<?php
header('Content-type: text/css');
$c = (int)$_REQUEST['c'];
$view = isset($_REQUEST['view']) ? $_REQUEST['view'] : 'form';
echo "
/* BEGIN - Your CSS styling starts here */
#{$view}_$c ul li.date {text-align:left;font-weight: normal;}
/* END - Your CSS styling ends here */
";
?>
 
Perfect!!

Thank you so much.

I think I went the extreme on both accounts where I didn't take out enough on the first time and left in to much on the second.

Bob
 
We are in need of some funding.
More details.

Thank you.

Members online

Back
Top