Remove From My Forums

How can I align strings added as listbox items?

Question

User588019485 posted

I have a listbox where I want to display a list of names concatenated price . The problem is that when the name exceeds a certain length, the price gets pushed to the right. I have tried some code but it doesnt not seems to work properly. Below is my code

        public String stringName(string name,decimal price,int vendorid)
        {
            if (name.Length > 30)
                return name.Substring(0, 30) + _priceFormatter.FormatShippingPrice(Convert.ToDecimal(Nop.Plugin.Data.Import.Classes.Common.GePriceAftertMarkup(price.ToString(), vendorid)), true);
            else
                return name.PadRight(30 - name.Length) + _priceFormatter.FormatShippingPrice(Convert.ToDecimal(Nop.Plugin.Data.Import.Classes.Common.GePriceAftertMarkup(price.ToString(), vendorid)), true);
        }

        /// <summary>
        /// 
        /// </summary>
        /// <param name="subcatid"></param>
        /// <returns></returns>
        [HttpPost]
        public ActionResult LoadProducts(int subcatid)
        {
            try
            {
                int[] subcategoryid = new int[1];
                subcategoryid[0] = subcatid;

                model.ProductList = _productService.SearchProducts(
                    storeId: _storeContext.CurrentStore.Id,
                    categoryIds: subcategoryid,
                    orderBy: ProductSortingEnum.CreatedOn).ToList();

                List<CS_Product> Products = new List<CS_Product>();

                foreach (var item in model.ProductList)
                {
                    Products.Add(new CS_Product() { ID = item.Id, Name = stringName(item.Name, item.Price,item.VendorId)  });
                }

                return Json(new { ok = true, data = Products, message = "ok" });
            }

            catch (Exception ex)
            {
                return Json(new { ok = false, message = ex.Message });
            }
        }

Wednesday, October 2, 2013 2:49 AM

Answers

User1508394307 posted

Your code seems to be fine to me but the problem is in the listbox which is not designed for this thing.

Instead, you can try to use a scrollable div

<div id="" style="overflow-y: scroll; height:400px;">
...
</div>

where inside ... you can add table or a div-based grid

Complete example

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
 <style type="text/css">
   #table {
		width: 230px;
        overflow-y: scroll; height:100px;
        border: 1px solid #e3e7e7;
		}

    #table p {
		clear: both;
		width: 100%;
		margin: 0;
		}
    #table span {
		float: left;
		}
	#table span.col1 {
		width: 150px;
		}

	#table span.col2 {
		width: 50px;
		}
</style>
</head>
<body>
<div id="table">
  <p><span class="col1">item1</span><span class="col2">price</span></p>
  <p><span class="col1">item2</span><span class="col2">price</span></p>
  <p><span class="col1">item3</span><span class="col2">price</span></p>
  <p><span class="col1">item4</span><span class="col2">price</span></p>
  <p><span class="col1">item5</span><span class="col2">price</span></p>
  <p><span class="col1">item6</span><span class="col2">price</span></p>
  <p><span class="col1">item7</span><span class="col2">price</span></p>
  <p><span class="col1">item8</span><span class="col2">price</span></p>
</div>
</body>
</html>

http://jsbin.com/aciCEkO/1/edit

Moreover, using following style

#table span.col1 {
  width: 150px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

you will not need to truncate string in the code, css will automatically overflow the long text with ... ellipses. See demo at the above link.

Hope this helps.

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Wednesday, October 2, 2013 3:08 AM

Answered by:

How can I align strings added as listbox items?

Question

Answers