Image Size in WebDBResponsiveGrid

WEB TMS WEB Core
1

I am playing around with the WebDBResponiveGrid component in the Webstore Demo provided with your Web Core Components.

In the demo you provide some sample code to build the Item Template by adding in the description, price and image. I would like to see a slightly larger picture in the Grid. I found some examples of some html tags (height,width) that appear to work. However, I cannot seem to increase the size of the image beyond a certain point. It looks like the html changes work as the image will decrease in size with lower values but will not increase the size above 200(ish).

I increased the values of the WebDBResponsiveGrid.options ItemWidthMin and ItemHeight properties. However, the image does not increase proportionally.

Following is the original code with the changes I tried commented out. Is there anyway to increase the size of the image in the WebDBResponsiveGrid.Options.ItemTemplate beyond a certain value?

  WebDBResponsiveGrid1.Options.ItemTemplate := ''
   + '<span class="item-name">(%Name%)</span>'
   + '<i class="material-icons" style="float:right;">add</i>'
   + '<br><span class="item-price">€ (%Price%)</span>'
   + '<br><span class="item-name">(%Description%)</span>'
   + '<br><img class="imgitem" src="img/(%Picture%)">'
//   + '<br><img class="imgitem" src="img/(%Picture%)" style="height:100px;width:100px;">'
//   + '<br><img class="imgitem" src="img/(%Picture%)" height="100";">'
   ;
  WebDBResponsiveGrid1.Options.ItemWidthMin := 400;
  WebDBResponsiveGrid1.Options.ItemHeight := 480;
2

CSS Class imgitem is set for the image:

        .imgitem
        {
            max-width: 195px;
            max-height: 180px;
            padding-top: 5px;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }

so, I suggest to make changes to this CSS class.

When I change this to:

        .imgitem
        {
            max-width: 295px;
            max-height: 280px;
            padding-top: 5px;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }

image size increases over 200...

3

Thanks Bruno.

I made the changes to the CSS class and I can now increase the size of the image in WebDBResponiveGrid.

1 Like