WSO2 GREG Service Registry Store is not styling assets in a consistent way

Question

I have 30+ asset instances being listed in my WSO2 Service Registry Store (v5.3.0) for one of my asset types. I've noticed that the styling of the asset blocks (image, description, version details) are not always displaying consistently and instead gaps appear on some of the rows (ie. I might get 6 complete asset blocks on the first row, 3 right aligned on the next, 1 right aligned on the next, another complete row of 6 on the next etc...). I'm assuming its to do with the styling (css) of the asset blocks. If I change the browser screen size by reducing it slightly then the asset blocks will readjust and whilst some of the gaps get filled, there are still spaces in the rows. Is anyone able to advise on what I might need to do to fix this styling issue? This occurs consistently in both Firefox (v50.0.2), Chrome (v55) and IE (v11).

The spacing appears to occur directly beneath the asset in a row that has the longest description (where all the descriptions are the same length then the spacing does not occur).

Thanks in advance.

Answer 1

Apparently, you are using G-Reg 530. I see that you have created a new asset type. As far as I understand you have overridden the assets-thumbnails.hbs or modified the file assets-thumbnails.hbs which is located in here(1). If so please change HTML portion of class ast-content with the following code.

<div class="ast-content">
                    <div class="ast-title padding">
                        <a class="ast-name truncate" href="{{tenantedUrl "/assets"}}/{{../type}}/details/{{../id}}" title="{{../name}}">{{../name}}</a>
                        {{#if overview_version}}
                            <span class="ast-ver">{{t "V"}}{{overview_version}}</span>fdsfds
                        {{/if}}
                    </div>
                    <div class="pull-left asset-rating-container">
                        <span class="asset-rating">
                            <div style="width:{{../ratingPx}}px"></div>
                        </span>
                    </div>
                    <div class="pull-right">
                        <div class="dropdown dropdown-asset-custom">

                        </div>
                    </div>
                    <div class="clearfix"></div>
                </div>

If you want to keep that description you have added to the asset listing page you have to go through major HTML and CSS revamp which very time consuming.

(1) - GREG_HOME/repository/deployment/server/jaggeryapps/store/extensions/app/greg-store-defaults/themes/store/partials/assets-thumbnails.hbs