- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎10-22-2019 10:35 AM
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;
}
Solved! Go to Solution.
- Labels:
-
Service Portal
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎11-14-2019 12:55 PM
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.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎10-22-2019 01:03 PM
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
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎11-14-2019 12:55 PM

- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎04-20-2020 03:17 PM
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?
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎04-23-2020 05:57 AM
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.