Service Portal Widget Column spacing

[Sean Carvalho]

Hello!

I'm working on creating a custom widget that displays certain catalog items in a grid of 4 columns and two rows.
This picture I saw is my inspiration:

I have the grid and tabs but for some reason my bootstrap columns do not have the default 30px "gutter" or spacing between them. This is what mine looks like currently:

I've tried manually messing with margins and padding but if I add margins the columns are too wide it seems and it rearranges the "iPhone 5" onto the next line. Is there something different about the way ServiceNow is using Bootstrap 3?

Here is the HTML:

<h1 class="tabHeading" align="center">What can we help you find?</h1>
<div class="container">
  <!-- Tab Row -->
  <div class="row.display-flex">
    <ul class="nav nav-pills nav-justified">
      <li class="active"><a data-toggle="tab" href="#popular">Popular</a></li>
      <li><a data-toggle="tab" href="#software">Software</a></li>
      <li><a data-toggle="tab" href="#hardware">Hardware</a></li>
      <li><a data-toggle="tab" href="#services">Services</a></li>
    </ul>

    <!-- Tab Content Start -->
    <div class="tab-content">

      <!-- Popular Tab Content -->
      <div id="popular" class="tab-pane fade in active equal">
        <div class="col-md-3 panel panel-default" ng-repeat="item in data.popular">          

          <!-- Popular Items -->
          <div class="media">
            <div class="media-left">
              <a href="#">
                <img class="media-object" src="NorcalOrangeIcon2.png" alt="OrangeIcon">
              </a>
            </div>
            <div class="media-body">
              <h4 class="media-heading">{{item.name}}</h4>
              {{item.short_description}}
            </div>
          </div>
        </div>
      </div> <!-- Popular content end -->

      <!-- Software Tab Content -->
      <div id="software" class="tab-pane fade">
        <h3>Software</h3>
        <p>Some content in software menu.</p>
      </div> <!-- Software content end -->

      <!-- Hardware Tab Content -->
      <div id="hardware" class="tab-pane fade">
        <h3>Hardware</h3>
        <p>Some content in hardware menu.</p>
      </div> <!-- Hardware content end -->

      <!-- Services Tab Content -->
      <div id="services" class="tab-pane fade">
        <h3>Hardware</h3>
        <p>Some content in hardware menu.</p>
      </div> <!-- services content end -->      

    </div> <!-- tab-content -->
  </div> <!-- Tab Row End-->
</div> <!-- Container -->

And here is my current CSS:

.nav-pills>li.active>a {
  background-color: $brand-primary;
}

.tabHeading {
  margin-bottom: 24px;
  color: $brand-primary;
}

.panel {
  padding: 1em;
}

.media { 
  position: relative;
  padding: 10px;
}

.row.display-flex {
  display: flex;
  flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

[Ajay_Chavan]

hi there,

want to adjust each widget to have more/less spacing, then

then an inspect will lead me to wanting to adjust the margin-bottom for the .panel class

as well as the the .col-xx-xx padding-left and padding-right values

by adding my own custom css stylesheet to my portal theme,

I can override/adjusting the css values of all of these to zero ,I can condense (or increase to expand) the view of the portal widgets

If this resolves your query, please mark my comments as correct  and helpful  .

Regards,

Ajay Chavan

My Community Articles

LinkedIn

[Sean Carvalho · Accepted solution]

Thanks for your suggestion, I wasn't able to fix this with margin because then the 12 wide bootstrap columns would spill onto the next line.

I did, however, get this working by cloning the baseline popular items widget and making adjustments that way.

[Troya1]

Awesome Sean!  

We are looking to do the same.  

I'm curious... are you showing the most frequently used catalog items for each of those categories?

[Sean Carvalho]

The "Popular Items" tab used the existing code from the baseline widget and does show the most used catalog items. The other tabs I'm just pulling all of the items from that single category.