Time element not displaying correctly

[achartier]

As you can see here: http://prntscr.com/599x2o the minutes are displaying outside of the container box.

You can log in at my ALG-Mexico site, go to the Social menu and choose facility booking. Try any of the time elements on this page.

J2.5.22, Fabrik 3.2 and latest github.

 

[troester]

This seems to be an issue with your Joomla template, did you try a standard Joomla one (beez, protostar...).

BTW: there has been a security update, latest Joomla2.5 is 2.5 27

 

[achartier]

Thanks Troester, but as I am J2.5 I do not have protostar and of course Beez is not a bootstrap template so the form will not render if I try and assign the template to the menu item.

I will do the J update.

 

[troester]

You can install protostar also in J!2.5.

 

[achartier]

What source did you use for the 2.5 version. I tried couple of options. One sort of worked, this is what I now see: http://prntscr.com/59fn2g

Maybe I should try whatever Protostar you used?

 

[achartier]

Is there any chance you can take a look at the site and see if anything obvious jumps out at you that I can take back to the template people?

 

[achartier]

Having now changed my template to Bootstrap 2 instead of BS3 the symptoms have changed. I attach 2 screenshots. This is on J3. First shows the date/time element where you can see the size of the icons are much bigger than the entry box, and the time icon box is empty. The second shows the time selector open.

Any thoughts on how to correct these?

 

[troester]

It seems your Joomla template is BS2 but not exactly the Joomla one. Not sure if this is only CSS or also functionality (JS), so maybe you'll get additional issues.
CSS can be "reset" but...
Maybe it's easier to switch to a compatible Joomla template (I can't suggest one, we are working only with customized Protostar).

 

[achartier]

Thanks Troester. I am rather invested in the YJSG framework for my site. It would be a significant effort to move to another template but if you have one in mind I will take a look.

My site is very close, it just needs a few tweaks to get it perfect.

 

[troester]

I had a look, but it's really a problem with your Joomla template, there are so many general styles set which must be re-done,
icon classes are missing...

Maybe you can switch to Protostar for your Fabrik sites only.

Custom CSS for the time picker (to reset your template CSS)
.fbDateTime p {
margin: 0;
}
.fbDateTime {
line-height: 1.6em;
}

 

[achartier]

Unfortunately I have fabrik forms & tables spread out throughout the site. I cannot assign protostar to the fabrik pages as I will then lose my menus etc.

Would you be able to point out specific items as examples that are missing/incorrect so I could go back to the template developer and see if they can assist? I can then do some screen grabs of the form on this template and on Protostar to show the differences.

You also mentioned another template possibility?

 

[achartier]

I think I see what is happening with the icons. The template is attempting to re-class the <i class="icon-xxx> tags to use font-awesome icons. This is seen with the calendar icon, but it seems they did not cover the clock icon. I inserted the FA code for the clock and got that working.

And here is what the template developer replied to my posting to include the clock reclass:

dont use icon class , use fa , icon class is depreciated and yjsg comes with fontawesome 3 and 4
fa-clock-o:

Stuck in the middle again.

 

[achartier]

I tried my form using the Protostar template. I expected to get my form borders and such back but did not. Is it supposed to look like this with F3.2 and J3?

 

[troester]

Yes, this is the simple F3.2 form look.
To get something like the F3.0 default legend you can add

#$form legend{
    background-color: #c0c0c0;
    border-bottom: 1px solid #B7B7B7;
    color: #777777;
    font-weight: bold;
    text-shadow: 0 1px 0 #FFFFFF;
    padding-left:10px;
    background: -moz-linear-gradient(center top , #F3F3F3, #D7D7D7) repeat scroll 0 0 #E7E7E7;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#D7D7D7', endColorstr='#F3F3F3'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#F3F3F3),
        to(#D7D7D7) );
    background-image: -ms-linear-gradient(top, #F3F3F3, #D7D7D7);
}

to custom_css.php (no idea if this special IE stuff is still necessary).

 

[achartier]

Thanks Troester. I will have to think about which I prefer, I am not against the new simple look, it just surprised me.

 

[cheesegrits]

As mentioed on another thread, the icon thing hasn't been deprecated in the Bootsrap that ships with J!. I know these guys want to hurry up and have all the sexy stuff in BS 3 ... but they still need to support what J! ships with.

As you say, caught in the middle.

-- hugh

 

[achartier]

I added the following css to my custom.css file and that solved the clock icon problem for me.

.icon-clock:before{
content: "\f017";
}