Service Portal Widget Column spacing

Sean Carvalho
Giga Expert

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:

find_real_file.png

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:

find_real_file.png

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;
}
1 ACCEPTED SOLUTION

Sean Carvalho
Giga Expert

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.

find_real_file.png

 

View solution in original post

7 REPLIES 7

Chavan AP
Tera Guru

hi there,

 

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

 

find_real_file.png

 

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

 

find_real_file.png

 

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

 

find_real_file.png

 

 

 

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

 

find_real_file.png

 

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

Regards,

Ajay Chavan

My Community Articles

LinkedIn

 

Glad I could help! If this solved your issue, please mark it as ✅ Helpful and ✅ Accept as Solution so others can benefit too.*****Chavan A.P. | Technical Architect | Certified Professional*****

Sean Carvalho
Giga Expert

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.

find_real_file.png

 

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?

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.