tooltip position

laurentmartin 14 Feb, 2013
It seems I am experiencing one bug of tooltip when two field are on the same row as the tooltip doesn't go on the proper position.

I have also another problem related to tool tip position when there is only one field: the tool tip is not located just after the field but far away from it.

I guess it comes from a problem of float, but i have absolutely no idea about how to solve this quickly.

If someone has an idea, welcome it.

Thanks
GreyHead 15 Feb, 2013
Hi laurentmartin,

I think that they behave oddly because Max has placed them with float:right; I think that there is a post here about re-formatting the single element one to make it closer to the input. I haven't seen the multi-row problem before. As you say it needs some work on the CSS.

Bob
laurentmartin 15 Feb, 2013
What do you suggest as float and CSS editing to correct this ?
Max_admin 17 Feb, 2013
Hi,

You may try to make it float left (and make sure the field itself is float left too) and add some margin left, I haven't touched the CSS since long time and the multi field per row feature has been added not too long ago, I will try to make some adjustments in the next release but I'm afraid that could break some forms dependent on the old css.

Regards,
Max
Max, ChronoForms developer
ChronoMyAdmin: Database administration within Joomla, no phpMyAdmin needed.
ChronoMails simplifies Joomla email: newsletters, logging, and custom templates.
laurentmartin 22 Feb, 2013
Hi Max,

I have tried to add float left both to the element and to the tooltip but still without any result (my capacity in CSS mught be also quite low actually).

Do you have any hint to propose ?

Thanks in advance for your help

Regards
EDIT:

I succeed to manage part of the problem by adding the following code in an action CSS:

.tooltipimg {
position:relative; float:left;
margin-left:0px;
top: 5px;
right: 20px;
}

.ccms_form_element input, textarea, input[type="file"]  {

padding: 4px !important; 
float:left; 
border: 1px solid #d3d3d3; 
margin-bottom: 3px;

}



.ccms_form_element input, radio, input[type="radio"]  {
padding: 4px !important; 
float:left; 
border: 1px solid #d3d3d3; 
margin-bottom: 3px;
}

.cfdiv_radio label {
width: auto;
margin-right: 22px;
}


However, there is still a problem when there are several field on the same row.

See the attachment. Any idea how to solve this?
Max_admin 24 Feb, 2013
H,

Try to use a "Custom element" for the multiple fields you have ? that solution should work fine I think, you may also try to use Firebug and inspect the tooltip element and try different css changes.

Regards,
Max
Max, ChronoForms developer
ChronoMyAdmin: Database administration within Joomla, no phpMyAdmin needed.
ChronoMails simplifies Joomla email: newsletters, logging, and custom templates.
laurentmartin 24 Feb, 2013
Hi,

You mean to declare the second select dropdown in a custom element instead of dragging a dropdown in the preview ?
Max_admin 02 Mar, 2013
Hello,

Sorry for the delay!

I mean to place the multi fields into a custom element, so that they are both into 1 element container.

Regards,
Max
Max, ChronoForms developer
ChronoMyAdmin: Database administration within Joomla, no phpMyAdmin needed.
ChronoMails simplifies Joomla email: newsletters, logging, and custom templates.
laurentmartin 17 Mar, 2013
Hi Max,

How to do this in an elegant way ?
Max_admin 17 Mar, 2013
Hi Lauren,

You can simply use the "instructions" text (small text below field) instead of the tooltip in this section, but there is no easy solution for this issue now, I'm already working on alternative layout code for forms generated in the wizard but this will come in a new major release hopefully soon.

Regards,
Max
Max, ChronoForms developer
ChronoMyAdmin: Database administration within Joomla, no phpMyAdmin needed.
ChronoMails simplifies Joomla email: newsletters, logging, and custom templates.
This topic is locked and no more replies can be posted.