VirtueMart Forum

VirtueMart 2 + 3 + 4 => Templating & Layouts => Topic started by: codeice on January 24, 2012, 07:47:34 AM

Title: Alignment custom field drop down boxes
Post by: codeice on January 24, 2012, 07:47:34 AM
I have created a number of custom field drop down boxes (cart variant). However the text length varies in each thus causing the vertical alignment to be messy, attached image.
Using Firebug tells me that I am looking for "product-field-display" and have looked for ways of styling through the productdetails/tmpl/default.php file and .css files without luck and am obviously missing something!

Just want the boxes to align neatly - any suggestions?

Using JML 1.7.3 & VM2, stable

Thanks

[attachment cleanup by admin]
Title: Re: Alignment custom field drop down boxes
Post by: dimi2013 on January 10, 2013, 14:45:56 PM
this is how i solved it. You'll have to use FireBug to get the right ID #s

#customPlugin76dropcustom_drop {
   float:right!important;
   margin: 0 198px 10px 0px;
}
#customPlugin77dropcustom_drop {
   margin: 0 150px 10px 0;
}
#customPlugin78dropcustom_drop {
   margin-bottom: 10px;
}
Title: Re: Alignment custom field drop down boxes
Post by: PRO on January 10, 2013, 19:37:41 PM
you do not need to do by ID

set the label & the select to fixed widths
Title: Re: Alignment custom field drop down boxes
Post by: dimi2013 on January 10, 2013, 20:54:24 PM
That's cool. my solution also puts them on top of each other so they look more organized. Maybe combine both?
Title: Re: Alignment custom field drop down boxes
Post by: PRO on January 10, 2013, 21:25:11 PM
Quote from: dimi2013 on January 10, 2013, 20:54:24 PM
That's cool. my solution also puts them on top of each other so they look more organized. Maybe combine both?

For your solution, you will have to do it for EACH product because the ID is different.

I use this in

default_addtocart.php


   <?php // Product custom_fields
   if (!empty($this->product->customfieldsCart)) {  ?>
   <div class="product-options width50">
      <?php foreach ($this->product->customfieldsCart as $field)
      { ?><div class="width100 m4">
         <div class="width40" ><b><?php echo  JText::_($field->custom_title) ?></b></div>
         <div class="width59"><?php echo $field->display ?></div>
         </div><div class="wrap"></div>
         <?php
      }
      ?>
   </div>
   <?php }
?>


width40    is the label
width59   is the dropdown


[attachment cleanup by admin]
Title: Re: Alignment custom field drop down boxes
Post by: dimi2013 on January 10, 2013, 21:39:00 PM
Nice! so we're talking override?
Title: Re: Alignment custom field drop down boxes
Post by: PRO on January 10, 2013, 22:19:01 PM
Quote from: dimi2013 on January 10, 2013, 21:39:00 PM
Nice! so we're talking override?

yes

Title: Re: Alignment custom field drop down boxes
Post by: dimi2013 on January 10, 2013, 22:26:12 PM
thanks..i'm going to try this..