CSS: Decrease template component height

  • 1
  • Question
  • Updated 3 years ago
  • Answered
Since I'm not a developer, I'm struggling with some CSS...perhaps someone could lend a hand?

How do I decrease the height of the template component of some statistic boxes I would like to include at the top of a contact detail page. It's currently taking up a lot of screen space, and I would like to cut it down (see below):




This is my current template HTML:

<div class = "box"><div class = "nx-pagetitle-subtitle"> Age: </div>
<div class = "nx-pagetitle-maintitle"> {{age}}
</div>
</div>

And here is the box CSS:

.box{        padding: 8px;
        background-color: LightGrey; 
        border-width: 2px;
        border-color: Navy;
        height: 75px;
        margin: 4px;
        position: relative;
}



I tried decreasing the height in the box class, but just ended up with this:

 

Also, why is the padding larger on the blue Age box compared with the grey box? They are using the same template HTML and CSS Class...


Thanks in advance!
Photo of Conlan O'Rourke

Conlan O'Rourke

  • 3,280 Points 3k badge 2x thumb

Posted 3 years ago

  • 1
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
You were on the right track!  You just went too far.  Play with your height until you get what you are after. 

The blue box is different because its code is different.  Somewhere it is different.  An extra div, some difference in the css.  Somthing...

You might also use a Rich Text Component so that you don't have to do this in Code.   The tutorial we wrote originally (that had this code in it) has now been revamped so it uses the RTC instead of Divs in a Template with extra CSS code.   See here: http://help.skuidify.com/m/supercharge-your-ui/l/153540-highlighting-critical-data-using-wrappers-ri...  

(special bonus if you spot the reference to an early lunch.  Anna writes such good tutorials that I laugh out loud...) 
Photo of Irvin Waldman

Irvin Waldman, Champion

  • 9,006 Points 5k badge 2x thumb
Definitely check out the RTC.  But, if you need something quick, try this:

CSS
.box {    
    padding: 8px;
    background-color: #C6E1FF;
    border-color: #C6E1FF;
    /* background-color: #d3eaf2;
    border-color: #d3eaf2;*/
    border-width: 2px;
    height: 50px;
    margin: 4px;
    position: relative;
}
.nx-pagetitle-maintitle-2 {
    font-size: 12pt;
    font-weight: 700;
    padding: 0 6px 4px 0;
    float: left;
    clear: left;
}



HTML
<div class = "box"><div class = "nx-pagetitle-subtitle"> Age:</div>
<div class = "nx-pagetitle-maintitle-2"> 999</div>
</div>
(Edited)
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
If I didn't know better I'd say Irvin was trolling here.. 
Photo of Irvin Waldman

Irvin Waldman, Champion

  • 9,006 Points 5k badge 2x thumb
Well, not really.  I was feeling bad about not being able to contribute to the community and finally took a few minutes to "troll".  Ok, caught me!