MachForm Community Forums » MachForm 2

1. lukestempien
   Member

   Hello,

   Is it possible to edit the form css so that the guidelines are always displayed under their respective fields instead of displaying as a hover popup?

   Posted 16 years ago #
2. 

   redityo

   Yes it's possible, try to search this section in your CSS form :

   #main_body form .guidelines
   {
   	background:#f5f5f5;
   	border:1px solid #e6e6e6;
   	color:#444;
   	font-size:80%;
   	left:100%;
   	line-height:130%;
   	margin:0 0 0 8px !important;
   	padding:8px 10px 9px;
   	position:absolute;
   	top:0;
   	visibility:hidden; /* change it to visible */
   	width:42%;
   	z-index:1000;
   }

   Change "visibility" value to "visible" like this

   visibility:visible;

   ---

   MachForm Support

   Posted 16 years ago #

3. lukestempien
   Member

   I tried that and it works to a degree, but oddly enough only for a few seconds. After about two seconds, the form automatically expands to fit the column i have it in and and these guidelines get pushed out of view. If the guidelines could be displayed under their forms that would solve the problem. I was able to get that accomplished with the following code

   #main_body form .guidelines
   {
   	background:#f5f5f5;
   	border:1px solid #e6e6e6;
   	color:#444;
   	font-size:80%;
   	line-height:130%;
   	margin:0 0 0 8px !important;
   	padding:8px 10px 9px;
   	position:inline;
   	top:0;
   	visibility:visible;
   }

   However again they're only under for a second before something automatically enlarges the form to fit the space. If you're not sure what I'm on about it actually doesn't snap in IE 6 and I don't mind taking a few screenshots.

   Posted 16 years ago #
4. 

   redityo

   Hmmm .. I test it in IE 6 and FF3, it's work fine with me. However if you want to move the guidelines bellow your field, try to replace those section with :

   #main_body form .guidelines
   {
   	background:#f5f5f5;
   	border:1px solid #e6e6e6;
   	color:#444;
   	font-size:80%;
   	left:100%;
   	line-height:130%;
   	/*margin:0 0 0 8px !important;*/
   	padding:8px 10px 9px;
   	/*position:absolute;*/
   	top:0;
   	visibility:visible;
   	width:42%;
   	/*z-index:1000;*/
          clear:both;
   }

   ---

   MachForm Support

   Posted 16 years ago #

5. lukestempien
   Member

   Hi,
   Thanks again for your speedy response. So I tried your modified code again and same problem. It could be something in my existing stylesheet I suppose, but it's unusual how it kicks in after a few seconds - is there something in the javascript that would cause that by any chance? The form is @ https://www.gigglesandgrub.ca/donate/ - interestingly enough it looks sort of okay in IE 6, but not in FF 3, IE 7 or Safari.

   Kind regards,

   Posted 16 years ago #
6. 

   redityo

   Hmmm I see .. try to add "display:block !important" to your CSS form. It should be like this :

   #main_body form .guidelines
   {
   	background:#f5f5f5;
   	border:1px solid #e6e6e6;
   	color:#444;
   	font-size:80%;
   	left:100%;
   	line-height:130%;
   	/*margin:0 0 0 8px !important;*/
   	padding:8px 10px 9px;
   	/*position:absolute;*/
   	top:0;
   	visibility:visible;
   	width:42%;
   	/*z-index:1000;*/
          clear:both;
          display: block !important;
   }

   ---

   MachForm Support

   Posted 16 years ago #

7. lukestempien
   Member

   That cracked it, thank you very much for your time, very much appreciated.

   Posted 16 years ago #

RSS feed for this topic

Reply

You must log in to post.