locked
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);
                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