0

I have a content type. For two fields I am using horizontal tab item . those two fields Section_grid_image and section_grid_image_path are displayed one after another so I have used hook_form_alter and added custom CSS.

function displayor_form_alter(&$form, &$form_state, $form_id) {

//Load CSS 
$form['#attached']['css'][drupal_get_path('module', 'displayor') . '/form.css'] = array();


if ($form['#id'] == 'section-node-form'){ //contenttype-node-form

   $form['field_section_grid_image']['#prefix'] = '<div id="leftcolumn">';
   $form['field_section_grid_image']['#suffix'] = '</div>';
   //where field_test is your file upload field


   $form['field_section_grid_image_path']['#prefix'] = '<div id="rightcolumn"> OR';
   $form['field_section_grid_image_path']['#suffix'] = '</div>';
   //where field_test is your file upload field
 }
}

CSS

#leftcolumn{
width: 400px;  
float: left;
}

#rightcolumn{
 width: 600px;
 margin-left: 200px;
}

#innercolumn{
 width: 500px;
}

My alignment is getting like this: enter image description here

I want the fields and OR to be displayed in a line.

How to do this.

EDIT: Got the answer.Below CSS did the trick.

function displayor_form_alter(&$form, &$form_state, $form_id) {

//Load CSS 
$form['#attached']['css'][drupal_get_path('module', 'displayor') . '/form.css'] = array();


if ($form['#id'] == 'section-node-form'){ //contenttype-node-form

   $form['field_section_grid_image']['#prefix'] = '<div id="leftcolumn">';
   $form['field_section_grid_image']['#suffix'] = '</div>';
   //where field_test is your file upload field


   $form['field_section_grid_image_path']['#prefix'] = '<div id="rightcolumn"><span class="or">(OR)</span>';
   $form['field_section_grid_image_path']['#suffix'] = '</div>';
   //where field_test is your file upload field
 }
}

CSS

#leftcolumn, 
#rightcolumn,
#orseperator
 {
   float: left;
   margin-right: 77px;
   padding: 10px;
 }
 .or
  { left: 382px;
   margin-right: 25px;
   margin-top: 1px;
   position: absolute;
   top: 76px;
  }

1 Answer 1

0

Why dont you just do the following:

   $form['field_section_grid_image']['#suffix'] = '</div><div> OR';

   $form['field_section_grid_image_path']['#prefix'] = '</div><div id="rightcolumn">';
9
  • hm its not working. Alignment is not in the same line.
    – Cindrella
    Oct 25, 2012 at 9:42
  • Your going to probably have to float those divs if you havent or set them to inline.
    – Alex Gill
    Oct 25, 2012 at 12:37
  • Float the divs. Also tried displaying inline. Its not working
    – Cindrella
    Oct 25, 2012 at 13:11
  • Whats your output if its not the following? <div id="leftcolumn"></div><div>OR</div><div id="rightcolumn"></div>
    – Alex Gill
    Oct 25, 2012 at 13:15
  • 1
    Take a look at this jsfiddle.net/s3gcM, thats what your aiming for.
    – Alex Gill
    Oct 25, 2012 at 13:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.