Flexible Attributes addon support

[tsrplatelayer]

Thanks - now I'll have a go at getting the colums better spaced.

I dont understand why it is 'br+input+label+br'
perhaps you could enlighten me please.

[tsrplatelayer]

Initially I had all radio buttons in a single column to the right of the 'available dates' name.

I used your mod to override the 'br' - and found IE and FF respond differently.
IE leaves all the radio buttons in a block to the right of the attribute name.
FF moves all the radio buttons to the left under the attribute name, still all in a block

This can be seen athttp://www.freight-stop-shop.co.uk/t...products_id=83

I prefer the FF layout, with that there is the room I need for 6 columns - which is what I am trying to achieve.

I tried to give the 'label' items a 'width' (also tried 'min-width'), in order to get 6 radio buttons per line but that had no effect.

I tried to override the override in order to get a 'br' after every 6radio buttons that didnt work

I currently have the following css.

#wAttrib-8 .optionName {margin-top: -0.2em; margin-right: 4.5em;} /* note aligns text with label */
#wAttrib-8 br+input+label+br {clear:both; display:none;} /* takes out <br /> and makes buttons next o each other */
/* #attrib-8-13 {display: none;}  note hides the radio button on the first one */
#wAttrib-8 input+label {width:10em; background:yellow;} /* make the columns the same width */
#attrib-8-19+label+br {display:block; } /* turn <br /> on again */

After a couple of hours trying - nuff - time for a beer.

ANy help for a depressed old man would be appreciated.

[gjh42]

I don't know how much I can help with IE CSS bugfixing... which version of IE are you using? I have to run now - will check back in a day or two.

[gjh42]

br+input+label+br

This means "a break following a label following an input following a break". The first br is there so that the radiobuttons don't ride up next to the first "select" label.


Add !important to your stylesheet to force this rule to overrule the generic one:

#attrib-8-19+label+br {display:block !important; } /* turn <br /> on again */

[tsrplatelayer]

Thanks for the explanation.

After a lot of trying I failed to find a way with the classess and ids available to get the layout I wanted.

In the end I saved the served page locally and messed with it until I found a way to get it to work. Take a look at
http://www.freight-stop-shop.co.uk/t...products_id=83
I found that the simplest solution was to add

<div id="....">........</div> around each radio button.

I did this by hacking the code in attributes.php as follows

switch ($products_options_names->fields['products_options_images_style']) {

case '0':
$tmp_radio .= '<div id="wDivAttrib-'.$products_options_names->fields['products_options_id'] . '-' . $products_options_value_id.'" >'.zen_draw_radio_field('id[' . $products_options_names->fields['products_options_id'] . ']', $products_options_value_id, $selected_attribute, 'id="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '"') . '<label class="attribsRadioButton zero" for="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '">' . $products_options_details . '</label><br /></div>' . "\n";
break;

case '1':
$tmp_radio .= '<div id="wDivAttrib-'.$products_options_names->fields['products_options_id'] . '-' . $products_options_value_id.'" >'.zen_draw_radio_field('id[' . $products_options_names->fields['products_options_id'] . ']', $products_options_value_id, $selected_attribute, 'id="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '"') . '<label class="attribsRadioButton one" for="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '">' . ($products_options->fields['attributes_image'] != '' ? zen_image(DIR_WS_IMAGES . $products_options->fields['attributes_image'], '', '', '' ) . '  ' : '') . $products_options_details . '</label><br /></div>' . "\n";
break;

case '2':
$tmp_radio .= '<div id="wDivAttrib-'.$products_options_names->fields['products_options_id'] . '-' . $products_options_value_id.'" >'.zen_draw_radio_field('id[' . $products_options_names->fields['products_options_id'] . ']', $products_options_value_id, $selected_attribute, 'id="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '"') . '<label class="attribsRadioButton two" for="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '">' . $products_options_details . ($products_options->fields['attributes_image'] != '' ? '<br />' . zen_image(DIR_WS_IMAGES . $products_options->fields['attributes_image'], '', '', '' ) : '') . '</label><br /></div>' . "\n";
break;

this abt line 232 - what do you think - can you see any problems with that?

I then used the following CSS

#attrib-8-13{display: none;}  /* note hides the radio button on the first one */

/* March */
#wDivAttrib-8-14,#wDivAttrib-8-15,#wDivAttrib-8-16,#wDivAttrib-8-17,#wDivAttrib-8-18,#wDivAttrib-8-19 {
width:8.5em; float:left; }

(some lines omitted - duplicates of above for other buttons)

/* First day in month  - to start on new line */
#wDivAttrib-8-14,#wDivAttrib-8-20,#wDivAttrib-8-26,#wDivAttrib-8-32,#wDivAttrib-8-38,#wDivAttrib-8-44,#wDivAttrib-8-50 {
clear:both;	}

It looks greate in FF and in IE 9 (64bit) under Win 7(64bit)
but on IE9 (32 bit) under win 7 (32bit) its a bit odd - although on XP with IE 8 its fine.

I would appreciate some feedback on how it appears for other users. It should be multiple columns across the whole width. On my odd on it is every button next to the previous in the right hand half of the window.

[tsrplatelayer]

Just booted my wifes computer WIn7(32bit) + IE9(32bit) - looks OK on that one - weird - probably one of the addons I have interfering.

[tsrplatelayer]

Turning on 'compatibility view' in my IE9 fixed it - dont know why it is required.

This may mean that the code hack wasnt required - however
adding the div wrapper made the CSS so much cleaner and simpler.

[gjh42]

I don't know why you couldn't make it work. The rule described in post 95 made it work exactly as desired when I tested it on your site in Firefox Web Developer, starting a new line after attribute 8-19.

[tsrplatelayer]

Indeed it did, but not in IE (at least not on the pc Iwas using). As I said turning on compatibility mode resolved some isues and may have made the code hack unnecessary. However since discovering that turning compatibility on helped I havent taken the step of going bac to pre-hack

The CSS for post-hack is much simpler, there being no need for the long '+' sequences and no need to turn br off and on again.
I just hid one div to hide the first entry, and added the float and clear to the divs to get entries alongside or on a new line.

I could not find a way of getting the width of the button+label defined even in FF, pre-hack but again this was easy with the new divs post hack.

[tsrplatelayer]

Ok - I have taken the time to go back to pre-hack.
The website now - should you care to look - uses the following css

#wAttrib-8 .optionName {margin-top: -0.2em; margin-right: 4.5em;} /* note aligns text with label */
#wAttrib-8 br {display:none;} /*turn off All br on this set of buttons */
#attrib-8-13, #attrib-8-13+label {display:none;} /* hide first button and label */
#attrib-8-13+label+br {display:block !important; } /* turn this br on again */
#attrib-8-30+label+br {display:block !important; } /* turn this br on again */
#attrib-8-34+label+br {display:block !important; } /* turn this br on again */
#attrib-8-41+label+br {display:block !important; } /* turn this br on again */
#attrib-8-46+label+br {display:block !important; } /* turn this br on again */

It works - almost - I cannot find a way to align the buttons for equal column width the 'label' does not seem to respond to 'width'settings.

It is the same in both FF and IE.