Product Attribute Aligment

Is there an easy way to left align the attributes up as you can see on the link below I have tried to space with ". . ." but is still looks scruffy.

Thanks in advance

Steve

http://smtest-com.domain-ref.http.boron.lon.periodicnetwork.com/products/90-bride-groom-champagne-flute-with-logo.aspx

I am providing you a general solution I use for form alignment. I don't know if its the best way but it works for me.

The basic idea is dividing your Form as though it is a table but using div. First you take a wrapper then break it into rows. Then break the rows again in multiple columns using the

width:value;

and

float:left;

Here is the sample code:

Styles:

<style>
     #div-form {}
     .form-row { width:500px; }
     .left-column { width:200px; text-align:left; float:left; } 
     .right-column { width:298px; text-align:left; float:left; }
</style>

Html:

<div id="div-form">
  <div class="from-row">
    <div class="left-column">
      *&nbsp;Please Select Logo
    </div>
    <div class="right-column">
      <select name="select" id="29">
        &nbsp;
        <option value="65">Bride &amp; Groom in Love Heart [+&pound;3.50]</option>
        &nbsp;
        ................
                                ...............
        <option value="234">Pair of Champagne Glasses</option>
        &nbsp
      </select>
    </div>
  </div>
  <div class="from-row">
    <div class="left-column">
      *&nbsp;Brides Name
    </div>
    <div class="right-column">
      <input name="name" type="text" id="30" />
    </div>
  </div>
</div>

I sort of understand were what you mean, but as thge page is produce dynamically and in C, I am a VBer, would you be so kind as to point out were I would put the div statments, I have included all the code for ProductAttributes.ascx.cs

Thanks Again in advance

Steve

Off to have a look see if I can do it


//------------------------------------------------------------------------------
// The contents of this file are subject to the nopCommerce Public License Version 1.0 ("License"); you may not use this file except in compliance with the License.
// You may obtain a copy of the License at  https://www.nopcommerce.com/License.aspx.
//
// Software distributed under the License is distributed on an "AS IS" basis, WITHOUT WARRANTY OF ANY KIND, either express or implied.
// See the License for the specific language governing rights and limitations under the License.
//
// The Original Code is nopCommerce.
// The Initial Developer of the Original Code is NopSolutions.
// All Rights Reserved.
//
// Contributor(s): _______.
//------------------------------------------------------------------------------

using System;
using System.Collections;
using System.Collections.Generic;
using System.ComponentModel;
using System.Configuration;
using System.Data;
using System.Text;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using NopSolutions.NopCommerce.BusinessLogic;
using NopSolutions.NopCommerce.BusinessLogic.Configuration.Settings;
using NopSolutions.NopCommerce.BusinessLogic.Directory;
using NopSolutions.NopCommerce.BusinessLogic.Localization;
using NopSolutions.NopCommerce.BusinessLogic.Products;
using NopSolutions.NopCommerce.BusinessLogic.Products.Attributes;
using NopSolutions.NopCommerce.BusinessLogic.Tax;
using NopSolutions.NopCommerce.Common.Utils;
using System.Globalization;

namespace NopSolutions.NopCommerce.Web.Modules
{
    public partial class ProductAttributesControl : BaseNopUserControl
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            CreateAttributeControls();
        }

        public void CreateAttributeControls()
        {
            var productVariant = ProductManager.GetProductVariantById(this.ProductVariantId);
            if (productVariant != null)
            {
                this.phAttributes.Controls.Clear();
                var productVariantAttributes = productVariant.ProductVariantAttributes;
                if (productVariantAttributes.Count > 0)
                {
                    StringBuilder adjustmentTableScripts = new StringBuilder();
                    StringBuilder attributeScripts = new StringBuilder();

                    this.Visible = true;
                    foreach (var attribute in productVariantAttributes)
                    {
                        var divAttribute = new Panel();
                        var attributeTitle = new Label();
                        if (attribute.IsRequired)
                            attributeTitle.Text = "<span>*</span> ";

                        //text prompt / title
                        string textPrompt = string.Empty;
                        if (!string.IsNullOrEmpty(attribute.TextPrompt))
                            textPrompt = attribute.TextPrompt;
                        else
                            textPrompt = attribute.ProductAttribute.Name;

                        attributeTitle.Text += Server.HtmlEncode(textPrompt);
                        attributeTitle.Style.Add("font-weight", "bold");

                        //description
                        if (!string.IsNullOrEmpty(attribute.ProductAttribute.Description))
                            attributeTitle.Text += string.Format("<br /><span>{0}</span>", Server.HtmlEncode(attribute.ProductAttribute.Description));

                        bool addBreak = true;
                        switch (attribute.AttributeControlType)
                        {
                            case AttributeControlTypeEnum.TextBox:
                            //CD BY SM DOES NOT PUT DROPDOWN ON SEPERATE LINE
                            case AttributeControlTypeEnum.DropdownList:
                                {
                                    addBreak = false;
                                }
                                break;
                            default:
                                break;
                        }
                        if (addBreak)
                        {
                            attributeTitle.Text += "<br />";
                        }
                        else
                        {
                            attributeTitle.Text += "&nbsp;&nbsp;&nbsp;";
                        }
                        divAttribute.Controls.Add(attributeTitle);
                        phAttributes.Controls.Add(divAttribute);

                        string controlId = string.Format("{0}_{1}", attribute.ProductAttribute.ProductAttributeId, attribute.ProductVariantAttributeId);
                        switch (attribute.AttributeControlType)
                        {
                            case AttributeControlTypeEnum.DropdownList:
                                {
                                    var ddlAttributes = new DropDownList();
                                    ddlAttributes.ID = controlId;
                                    divAttribute.Controls.Add(ddlAttributes);
                                    ddlAttributes.Items.Clear();

                                    if (!attribute.IsRequired)
                                    {
                                        ddlAttributes.Items.Add(new ListItem("---", "0"));
                                    }
                                    var pvaValues = attribute.ProductVariantAttributeValues;

                                    adjustmentTableScripts.AppendFormat("{0}['{1}'] = new Array(", AdjustmentTableName, ddlAttributes.ClientID);
                                    attributeScripts.AppendFormat("$('#{0}').change(function(){{{1}();}});\n", ddlAttributes.ClientID, AdjustmentFuncName);

                                    bool preSelectedSet = false;
                                    foreach (var pvaValue in pvaValues)
                                    {
                                        string pvaValueName = pvaValue.Name;
                                        if (!this.HidePrices &&
                                            (!SettingManager.GetSettingValueBoolean("Common.HidePricesForNonRegistered") ||
                                            (NopContext.Current.User != null &&
                                            !NopContext.Current.User.IsGuest)))
                                        {
                                            decimal priceAdjustmentBase = TaxManager.GetPrice(productVariant, pvaValue.PriceAdjustment);
                                            decimal priceAdjustment = CurrencyManager.ConvertCurrency(priceAdjustmentBase, CurrencyManager.PrimaryStoreCurrency, NopContext.Current.WorkingCurrency);
                                            if(priceAdjustmentBase > decimal.Zero)
                                            {
                                                pvaValueName += string.Format(" [+{0}]", PriceHelper.FormatPrice(priceAdjustment, false, false));
                                            }
                                            adjustmentTableScripts.AppendFormat(CultureInfo.InvariantCulture, "{0},", (float)priceAdjustment);
                                        }
                                        var pvaValueItem = new ListItem(pvaValueName, pvaValue.ProductVariantAttributeValueId.ToString());
                                        if (!preSelectedSet && pvaValue.IsPreSelected)
                                        {
                                            pvaValueItem.Selected = pvaValue.IsPreSelected;
                                            preSelectedSet = true;
                                        }
                                        ddlAttributes.Items.Add(pvaValueItem);
                                    }
                                    adjustmentTableScripts.Length -= 1;
                                    adjustmentTableScripts.Append(");\n");
                                }
                                break;
                            case AttributeControlTypeEnum.RadioList:
                                {
                                    var rblAttributes = new RadioButtonList();
                                    rblAttributes.ID = controlId;
                                    divAttribute.Controls.Add(rblAttributes);
                                    rblAttributes.Items.Clear();

                                    var pvaValues = attribute.ProductVariantAttributeValues;
                                    bool preSelectedSet = false;
                                    foreach (var pvaValue in pvaValues)
                                    {
                                        string pvaValueName = pvaValue.Name;
                                        if (!this.HidePrices &&
                                            (!SettingManager.GetSettingValueBoolean("Common.HidePricesForNonRegistered") ||
                                            (NopContext.Current.User != null &&
                                            !NopContext.Current.User.IsGuest)))
                                        {
                                            decimal priceAdjustmentBase = TaxManager.GetPrice(productVariant, pvaValue.PriceAdjustment);
                                            decimal priceAdjustment = CurrencyManager.ConvertCurrency(priceAdjustmentBase, CurrencyManager.PrimaryStoreCurrency, NopContext.Current.WorkingCurrency);
                                            if(priceAdjustmentBase > decimal.Zero)
                                            {
                                                pvaValueName += string.Format(" [+{0}]", PriceHelper.FormatPrice(priceAdjustment, false, false));
                                            }
                                            adjustmentTableScripts.AppendFormat(CultureInfo.InvariantCulture, "{0}['{1}_{2}'] = {3};\n", AdjustmentTableName, rblAttributes.ClientID, rblAttributes.Items.Count, (float)priceAdjustment);
                                            attributeScripts.AppendFormat("$('#{0}_{1}').click(function(){{{2}();}});\n", rblAttributes.ClientID, rblAttributes.Items.Count, AdjustmentFuncName);
                                        }
                                        var pvaValueItem = new ListItem(Server.HtmlEncode(pvaValueName), pvaValue.ProductVariantAttributeValueId.ToString());
                                        if (!preSelectedSet && pvaValue.IsPreSelected)
                                        {
                                            pvaValueItem.Selected = pvaValue.IsPreSelected;
                                            preSelectedSet = true;
                                        }
                                        rblAttributes.Items.Add(pvaValueItem);
                                    }
                                }
                                break;
                            case AttributeControlTypeEnum.Checkboxes:
                                {
                                    var cblAttributes = new CheckBoxList();
                                    cblAttributes.ID = controlId;
                                    divAttribute.Controls.Add(cblAttributes);
                                    cblAttributes.Items.Clear();

                                    var pvaValues = attribute.ProductVariantAttributeValues;
                                    foreach (var pvaValue in pvaValues)
                                    {
                                        string pvaValueName = pvaValue.Name;
                                        if (!this.HidePrices &&
                                            (!SettingManager.GetSettingValueBoolean("Common.HidePricesForNonRegistered") ||
                                            (NopContext.Current.User != null &&
                                            !NopContext.Current.User.IsGuest)))
                                        {
                                            decimal priceAdjustmentBase = TaxManager.GetPrice(productVariant, pvaValue.PriceAdjustment);
                                            decimal priceAdjustment = CurrencyManager.ConvertCurrency(priceAdjustmentBase, CurrencyManager.PrimaryStoreCurrency, NopContext.Current.WorkingCurrency);
                                            if (priceAdjustmentBase > decimal.Zero)
                                                pvaValueName += string.Format(" [+{0}]", PriceHelper.FormatPrice(priceAdjustment, false, false));
                                            adjustmentTableScripts.AppendFormat(CultureInfo.InvariantCulture, "{0}['{1}_{2}'] = {3};\n", AdjustmentTableName, cblAttributes.ClientID, cblAttributes.Items.Count, (float)priceAdjustment);
                                            attributeScripts.AppendFormat("$('#{0}_{1}').click(function(){{{2}();}});\n", cblAttributes.ClientID, cblAttributes.Items.Count, AdjustmentFuncName);
                                        }
                                        var pvaValueItem = new ListItem(Server.HtmlEncode(pvaValueName), pvaValue.ProductVariantAttributeValueId.ToString());
                                        pvaValueItem.Selected = pvaValue.IsPreSelected;
                                        cblAttributes.Items.Add(pvaValueItem);
                                    }
                                }
                                break;
                            case AttributeControlTypeEnum.TextBox:
                                {
                                    var txtAttribute = new TextBox();
                                    txtAttribute.Width = SettingManager.GetSettingValueInteger("ProductAttribute.Textbox.Width", 300);
                                    txtAttribute.ID = controlId;
                                    divAttribute.Controls.Add(txtAttribute);
                                }
                                break;
                            case AttributeControlTypeEnum.MultilineTextbox:
                                {
                                    var txtAttribute = new TextBox();
                                    txtAttribute.ID = controlId;
                        

All done, thank you for the nice tip

Steve