Flexible Attributes addon support

I am trying to get my radio buttons to line up side by side and can't seem to get the right code in the .css file. This my css file

/attribute layout/
.wrapperAttribsOptions label {font-size: 1.0em;}/make "label" elements match other text/
h3#attribsOptionsText {display: none;}/hide the "Please Choose:" heading/
h4.optionName {font-size: 1.0em;}
.wrapperAttribsOptions+br.clearBoth {display: none;}/allow floated attributes to sit side by side if desired/
#wAttrib-6 {clear: left; float: left;}
#wAttrib-6 {float: left;}/this will sit beside #wAttrib-11/
#wAttrib-6 {float: left;}/this will sit on a new line/
/* #wAttrib-6 h4 {display: none;}
/* #wAttrib-6 h3 {font-size: 1em; font-weight: normal;}/make comments above attribute like standard text/
/* #wAttrib-35 .attribsOptions {display: none;}/for a read-only attribute to hide all but comments/

you can see the product here
readingglasses4less.com/index.php?main_page=product_info&cPath=1_15&products_id=67

Could you help please?

Add to your stylesheet

.wrapperAttribsOptions label+br {display: none;}

gjh42:

Add to your stylesheet

.wrapperAttribsOptions label+br {display: none;}

Sorry it's taken a while to respond - been away for a while.
Thanks for this. Worked a treat.

hi,
i've just installed Flexible Attributes and i can't get it to lay my checkboxes out horizontally. my code looks like this;

/attribute layout/
.wrapperAttribsOptions label {font-size: 1.0em;}/make "label" elements match other text/
h3#attribsOptionsText {display: none;}/hide the "Please Choose:" heading/
h4.optionName {font-size: 1.0em;}
.wrapperAttribsOptions+br.clearBoth {display: none;}/allow floated attributes to sit side by side if desired/
#wAttrib-129 {float: left;}
#wAttrib-130 {float: left;}/this will sit beside #wAttrib-11/
#wAttrib-131 {float: left;}
#wAttrib-132 {clear: left;}/this will sit on a new line/
#wAttrib-133 h4 {display: none;}
#wAttrib-15 h3 {font-size: 1em; font-weight: normal;}/make comments above attribute like standard text/
#wAttrib-35 .attribsOptions {display: none;}/for a read-only attribute to hide all but comments/

what am i doing wrong?!

sorry if i'm being really stupid!

url http://mitdts.co.uk/olive2/index.php?main_page=product_info&cPath=1_10&products_id=54

You have this rule which causes all of those checkboxes to each take the full page width:
stylesheet.css (line 507)

.attribImg {
margin: 0.3em 0;
width: 100%;
}

Change it to 33% or whatever works for you.

that worked a treat! thanks very much!

Can the "down arrow" on the attributes drop-down selection menu be customized? I'd like to use a better-looking arrow if at all possible.

If it can, that would not be related to Flexible Attributes. There might be a way to specify what that down arrow looks like, but it may also be under the control of the browser and not the code. I would advise researching HTML dropdown coding on the web.

gjh42:

If it can, that would not be related to Flexible Attributes. There might be a way to specify what that down arrow looks like, but it may also be under the control of the browser and not the code. I would advise researching HTML dropdown coding on the web.

Ah, bummer. Thanks!

nice addon

but with this addon, i get an issue of jquery radio button,

i have lots of radio type attributes which shoud be required before submit, they are "too many", so i don't use the default zencart radio required function, i use jquery to indentifier radio button checked true or false

without this addon, it works correct, but with this addon, it couldn't indentifier the radio button checked is true or false,

by the way, all the radio buttons are set to unchecked when first loading

what do i fix it?

inception:

nice addon

but with this addon, i get an issue of jquery radio button,

i have lots of radio type attributes which shoud be required before submit, they are "too many", so i don't use the default zencart radio required function, i use jquery to indentifier radio button checked true or false

without this addon, it works correct, but with this addon, it couldn't indentifier the radio button checked is true or false,

by the way, all the radio buttons are set to unchecked when first loading

what do i fix it?

i found the problem, but i don't know how to fix it

if you open the page, since the radio buttons are set to unchecked, even you click on the radio button, then click on "add to cart", you won't get any jquery error message

if you have an item in cart, click on this item to go back to the product info page, if the radio button value record is 20, even when you click on another radio choice, the item could be added to cart correctly, but the value is kept 20 to jquery before submitting the form. so if you make a jquery message box says "the value is: ", the displayed value wouldn't be correct, it's always 20

without this addon, everything goes correct

Does your jQuery mod affect any of the Flexible Attributes mod files? I have no idea how your custom code works, but I didn't change the characteristics of the attribute inputs, merely added some new and more detailed wrappers. Maybe there is some combination of classes/ids/elements that your mod depends on that has new parts inserted by Flexible Attributes.

sorry, that is an issue of my jquery
now it works correctly with this addon

Good to hear:)

Is there a way to customize the width of the drop down selection boxes on an individual basis? I tried adding this to my CSS, but it affects all of the drop-downs (not just attrib-1:

SELECT, INPUT attrib-1 {
width: 150px;
}

Thanks!

SELECT, INPUT attrib-1 applies to all "select" elements, not just attrib-1. It is apparently supposed to apply to "input" elements with a class or id of attrib-1, but without a . or # in front, that part is meaningless to CSS.

If you want it to apply to the attrib-1 dropdown, try this:

#attrib-1 {width: 8.5em}

Adjust to taste.

gjh42:

SELECT, INPUT attrib-1 applies to all "select" elements, not just attrib-1. It is apparently supposed to apply to "input" elements with a class or id of attrib-1, but without a . or # in front, that part is meaningless to CSS.

If you want it to apply to the attrib-1 dropdown, try this:

#attrib-1 {width: 8.5em}

> 
> Adjust to taste.

Perfect! Thanks!

I just updated this mod to incorporate the small changes for 1.3.9h. Should appear in the contributions section soon.

I got everything the way I wanted it to look on my localhost, but I am stuck on an issue on the live website... no matter what sort order I apply to the Option Names, they still always show up in the order they are currently listed on this page: http://tinyurl.com/87bxoxe

Any idea on what would cause this issue?

The order should be (as columns):

Juice Choices
Juice 1
Juice 2
Juice 3

Smoothie Choices
Smoothie Choice 1
Spacer 1
Spacer 2

Meal Replacement Bar Choices
Meal Bar 1
Meal Bar 2
Meal Bar 3

Meal Choices
Meal 1
Meal 2
Spacer 3

The only ones that should have "clear: left;" in this four-column layout should be Juice 1, Juice 2, and Juice 3, right?

Thanks!

The only ones that should have "clear: left;" in this four-column layout should be Juice 1, Juice 2, and Juice 3, right?Correct.

I haven't had much need to change attribute sort orders, but you may want to check out the Option Value Sorter (Update All Products' Attribute Sort Orders to match Option Value Default Sort Orders:) as well as the Option Name Sorter.