Reduce amount of padding / space on widget

Julia Howells
Giga Guru

We have a widget that is calling a table which displays the results , however, the titles are very far apart:find_real_file.png

We'd like it to look more like another widget we have:

find_real_file.png

As you can see here, the space between each line is much closer together. 

I've adjusted the CSS padding (see code below) but it didn't change anything. Ideas?

 

.panel {
position: relative;
}

.panel-heading i {
  cursor: pointer;
  position: absolute;
  padding: 0px;
  top: 0px;
  right: 0px;
  cursor: pointer;
}

.disabled-filter {
	color: #A0A0A0;
}

.list-group-item.ng-enter {
  transition: all 1s;
  -webkit-transition: all 1s;

  background-color: #c0dcfa;
}

.list-group-item.ng-enter-active {
  background-color: #fff;
}

.hide-x-overflow {
  overflow-x: hidden;
}

.translated-html > p {
  margin: 0px;
  padding: 0px;
}

IMG {
  max-width: 320px;
  max-height: 240px;
}

IMG.img-sm {
  max-height: 40px;
  max-width: 40px;
}

.filter-box {
  margin-top: 1px;
}

.panel-footer {
  .number-shown-label {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 16pt;
    display: inline-block;
  }

  a {
    color: inherit;
  }
}

.list-group-item > a {
	display: inline-block;
}
2 REPLIES 2

Tobias Persson
Tera Contributor

Hi Julia,

maybe there are more HTML elements around the paragraph (<p>) element that have a padding themselves. Have you inspected the elements in your browser? That way you can see which element is causing that unwanted padding/margin.

In Chrome you can see computed styles like this:
find_real_file.png

 

Hi Tobias,

Yes, I have - find_real_file.png 

If I change this padding to '0', it displays correctly on the widget I want to fix, but messes up all the other widgets on the page (makes them way too close together).