Items Widget on Homepage

[Jay75]

Hello,

I want to place widget on Homepage but the visibility I got is something all are streched vertically. Can anyone guide me how to align one over the other .

Thanks and Regards,

Jay

[Shruti · Accepted solution]

Hi,

Please clone the OOB Recent and popular items widget and paste below HTML code

<div class="recent-widget">
  <div class="panel panel-default">
    <div class="panel-heading pad-bottom">
        <ul class="nav nav-tabs" style="border-bottom : 0px" role="tablist">
          <li class="item" id="tab-recent-items" ng-if="data.recentItems.length > 0" ng-click="c.changePanel('recent')" ng-keydown="c.switchTab($event, 'recent')" ng-attr-aria-controls="{{c.show_recent ? 'tabpanel-recent-items' : undefined}}" aria-selected="{{c.show_recent}}" role="presentation">
            <a ng-class="{'sc-tab-a' : c.show_recent}" href="#tab-recent-items" class="recent" ng-attr-tabindex="{{!c.show_recent ? '-1': undefined}}" role="tab">
              <span> ${My Recent Items} </span>
            </a>
          </li>  
          <li class="item" id="tab-popular-items" ng-keydown="c.switchTab($event, 'popular')" ng-click="c.changePanel('popular')" ng-attr-aria-controls="{{!c.show_recent ? 'tabpanel-popular-items' : undefined}}" aria-selected="{{!c.show_recent}}" role="presentation">
            <a ng-class="{'sc-tab-a' : !c.show_recent}" href="#tab-popular-items" class="popular" ng-attr-tabindex="{{c.show_recent ? '-1': undefined}}" role="tab">
              <span > ${Popular Items} </span>
            </a>
          </li>  
        </ul>
    </div>
    
 <div id="tabpanel-recent-items" class="panels-container" ng-if="c.show_recent" role="tabpanel" aria-labelledby="tab-recent-items">
	<span class="sr-only" role="heading" aria-level="2"> ${My Recent Items} </span>
   <ul role="list" aria-labelledby="tab-recent-items">
     <li ng-repeat="item in data.recentItems track by item.sys_id" role="listitem">
       <div class="panel-default item-card b">
         <a href="?id={{::item.page}}&sys_id={{::item.sys_id}}&referrer=recent_items" class="panel-body block height-100" onclick='window.GlideWebAnalytics.trackEvent("Service Catalog", "Recent Item", "Item Clicked");' aria-labelledby="sc_cat_item_{{::item.sys_id}}" aria-describedby="sc_cat_item_short_desc_{{::item.sys_id}}">
           <div>
             <h3 class="h4 m-t-none m-b-xs text-overflow-ellipsis" title="{{::item.name}}" id="sc_cat_item_{{::item.sys_id}}">{{::item.name}}</h3>
             <img ng-src="{{::item.picture}}" ng-if="::item.picture" class="m-r-sm m-b-sm item-image pull-left" alt="" aria-hidden="true"/>
             <div class="text-muted item-short-desc catalog-text-wrap" id="sc_cat_item_short_desc_{{::item.sys_id}}">{{::item.short_description}}</div>
           </div>
         </a>
       </div>
       <div class="panel-footer b">
         <a href="?id={{::item.page}}&sys_id={{item.sys_id}}&referrer=recent_items" class="pull-left text-muted" aria-label="${View Details} {{::item.name}}" onclick='window.GlideWebAnalytics.trackEvent("Service Catalog", "Recent Item", "Item Clicked");'>${View Details}</a>
         <span ng-if="data.showPrices && item.hasPrice" class="pull-right item-price font-bold">{{::item.price}}</span> &nbsp;
       </div>
     </li>
   </ul>
 </div>
    
 <div id="tabpanel-popular-items" class="panels-container" ng-if="!c.show_recent" role="tabpanel" aria-labelledby="tab-popular-items">
   <span class="sr-only" role="heading" aria-level="2"> ${Popular Items} </span>
   <ul role="list" aria-labelledby="tab-popular-items">
     <li ng-repeat="item in data.popularItems | orderBy: 'order' | limitTo: data.limit track by item.sys_id" role="listitem">
       <div class="panel-default item-card b">
         <a href="?id={{::item.page}}&sys_id={{::item.sys_id}}&referrer=popular_items" class="panel-body block height-100" onclick='window.GlideWebAnalytics.trackEvent("Service Catalog", "Popular Item", "Item Clicked");' aria-labelledby="sc_cat_item_{{::item.sys_id}}" aria-describedby="sc_cat_item_short_desc_{{::item.sys_id}}">
           <div>
             <h3 class="h4 m-t-none m-b-xs text-overflow-ellipsis" title="{{::item.name}}" id="sc_cat_item_{{::item.sys_id}}">{{::item.name}}</h3>
             <img ng-src="{{::item.picture}}" ng-if="::item.picture" class="m-r-sm m-b-sm item-image pull-left" alt="" aria-hidden="true"/>
             <div class="text-muted item-short-desc catalog-text-wrap" id="sc_cat_item_short_desc_{{::item.sys_id}}">{{::item.short_description}}</div>
           </div>
         </a>
       </div>
       <div class="panel-footer b">
         <a href="?id={{::item.page}}&sys_id={{item.sys_id}}&referrer=popular_items" class="pull-left text-muted" aria-label="${View Details} {{::item.name}}" onclick='window.GlideWebAnalytics.trackEvent("Service Catalog", "Popular Item", "Item Clicked");'>${View Details}</a>
         <span ng-if="data.showPrices && item.hasPrice" class="pull-right item-price font-bold">{{::item.price}}</span> &nbsp;
       </div>
     </li>
   </ul>
 </div>
   
    
</div>

[Jay75]

Hi StarK,

Thank you so much, Can I know how to remove these bullets from this widget.

Regards,

Jay