How can I align strings added as listbox items? RRS feed

  • 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);
                    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>
            public ActionResult LoadProducts(int subcatid)
                    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


  • 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;">

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

    Complete example

    <!DOCTYPE html>
    <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;
    <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>


    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