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;
}

[Troya1]

Do you simply add the html tab code and copy/modify the code for each category.

[Gerrity]

Hi Sean,

Would you be willing to share your widget code for this?  Am really interested in your server script portions for the software and hardware tabs.

Any other reader, I'd like to replicate this if possible and have those tabs pull for the SC_category's of "hardware" and "software" if anyone could share how that's done it would be greatly appreciated.

Cheers!

[Trevor Muhl]

I discovered a quick solution to this. The default Service Portal has this CSS variable:

$grid-gutter-width: 15px !default;

When I added that to the CSS variables for a custom Service Portal, neighboring widgets immediately displayed the defined gutter width.

Before:

After:

With this solution, all widgets are kept on the same line. I experienced the same "spilling" issue while testing different margins.

Note: This also affects gutter spacing between form columns (and their form fields) in the Service Portal.