Virtuemart Support :: Topic: Custom Field drop downs wider ? (1/1)

Welcome, Guest

TOPIC: Custom Field drop downs wider ?

Custom Field drop downs wider ? 11 years 3 months ago #2413

Richard	Hi. Can you tell me how to make the Custom Field widths a bit wider to accommodate the dates ? i have attached a screenshot to explain. basically i need this field to be wide enough in the category view and the product view (screenshot) www.tridentmedical.co.uk/shop/trident-courses/tactical-medicine-fpos-intermediate-detail Attachment TM-screenshot.jpg not found thanks!
	Last Edit: 11 years 3 months ago by Richard. The topic has been locked.

Custom Field drop downs wider ? 11 years 2 months ago #2434

Support

Hi,

Attachment Pasted_Image_2_14_13_5_10_PM.gif not found

So, you need to find the PHP file where that element is being generated and change the

style="width:100px !important"

with:

style="width:150px !important"

(increasing 100px to 150px would be enough for your case)

So open this PHP file:
ROOT/plugins/vmcustom/stockable/stockable.php (this is a Virtuemart Core file)

And find this LINE:

$html .= JHTML::_('select.genericlist', $option,$optionName ,'class="attribute_list customfield_id_'.$js_suffix.'" style="width:100px !important;"','value','text',reset($options),'selectoptions'.$i,false)."</div>\n";

And change it with this:

$html .= JHTML::_('select.genericlist', $option,$optionName ,'class="attribute_list customfield_id_'.$js_suffix.'" style="width:150px !important;"','value','text',reset($options),'selectoptions'.$i,false)."</div>\n";

BUT BE AWARE, THIS FILE: ROOT/plugins/vmcustom/stockable/stockable.php
is a Virtuemart Core file, so when you update your Virtuemart, that file will be restored back to original settings, so you should make the same change again.

Regards.
Forum Support.

The topic has been locked.

Custom Field drop downs wider ? 11 years 2 months ago #2527

Andy Connell

Thats handy to know, but I have a similar question in addition to Richards initial question.

In your demo page here you have stockable variants that all show up nice & neat under specific titles.

Are you using 2 different custom fileds? & how are you just showing the dropdown with no option to the left?

I have set up a product with stockable varainats as in your tutorial (All working fine) but the the way it is displayed inside the puremart theme looks a bit messy at the moment.

I am using one custom field with 2 options (one for size & one for option/flavour). Nut I want the dropdowns to be displayed a bit neater & ideally like your example.

Thanks in advance

Attachments:

ScreenShot...9.34.png (40KB)

The topic has been locked.

Custom Field drop downs wider ? 11 years 2 months ago #2545

Support

In the DEMO page you have provided. They are not "Custom Field with Stockable Variants" but they are regular "Cart Variant" type custom fields.

Yes, you might right about how it looks with "Custom Field with Stockable Variants", but this is what it is.
In your screenshot,

Size and Options = The title of the custom field.
Size = the title of 1st variable
Color = the title of 2nd variable.
Size and Options = is the description of custom field.

Eveerything looks normal in your screenshot. Because only the title of the custom field gets the grey background. Not the name of the variable. Some people say: We don't need the title of custom field at all, the name of the variations are enough. Which is your case, but some people ask the opposite ;) so in result, we leave as how it is with the original Virtuemart.

If you look here:
www.flexiblewebdesign.com/virtuemart-2-template-puremart/index.php?option=com_virtuemart&view=productdetails&virtuemart_product_id=46&virtuemart_category_id=6

This DEMO product uses the "Custom Field with Stockable Variants" type custom field and the layout exactly same as your screenshot.

But you can do this, give it a shot.

Open this CSS file:
ROOT/templates/<yourjoomlatemplate>/html/com_virtuemart/assets/css/flexibleVM2Global.css

And add this CSS rule:

div.product-field.product-field-type-E span.product-fields-title {
display:none;
}
div.product-field.product-field-type-E span.product-field-display {
     display: block;
     margin-top: -15px;
}
 
div.product-field.product-field-type-E span.product-field-display div div span {
     background: none repeat scroll 0px 0px #EBEBEB;
     margin: 5px 0px;
     padding: 3px;
     text-align: left;
}
div.product-field.product-field-type-E span.product-field-desc {
margin-top:5px;
display:inline-block;	
}
div.product-field.product-field-type-E span.product-field-display div div {
	width:auto !important;
}
div.product-field.product-field-type-E span.product-field-display div div span {
	width:100% !important;
}

These CSS codes, will remove the Custom Field's title and put the Variations names in the grey background boxes.

So;

Instead of this:

Attachment ScreenShot2013-02-21at2.08.43AM.png not found

you will get this:

Attachment ScreenShot2013-02-21at2.08.19AM.png not found

It is always good to do these things with only using CSS. Because modifying PHP files (with no exception) is not good. And custom fields are generated by Virtuemart Core files.

Regards.
Forum Support.

Last Edit: 11 years 2 months ago by Support.

The topic has been locked.

Custom Field drop downs wider ? 11 years 2 months ago #2550

Andy Connell	Absolutely Excellent reply! Thanks for that & I'll give it a go today.
	The topic has been locked.

Custom Field drop downs wider ? 11 years 2 months ago #2566

Support	I have tried those CSS lines. They work perfectly just like how you see in the screenshots. Case solved. Topic is closed for forum clearance purposes. Regards. Forum Support
	The topic has been locked.