WAB Custom Bookmark Help

[TownOfGroton]

I'm working on customizing the Bookmark widget in WAB for developer. So far in the bookmark widget I was able to figure out how to get rid of add and delete function from the widget.  What I’m trying to do now is to get rid of the extra white space on the bottom of the widget (were the red X is in the picture attached).  I would like the images to fill up the whole area in the widget. What line of coding / file needs to be change to get this functionality that I’m looking for?

Thank you in advance!

[RobertScheitlin__GISP]

Jenna,

   in the bookmark widgets css/style.css make these changes (add line 6 and 12 and comment out/delete 11):

.jimu-widget-bookmark .play-section{
  overflow: hidden;
  margin-top: 20px;
  position: absolute;
  bottom: 0;
  display: none;
}
.jimu-widget-bookmark .bookmark-list{
  position: absolute;
  top: 60px;
  /*bottom: 35px;*/
  bottom: 0;
  width: 100%;
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[TownOfGroton]

Hi Robert,

Thank for replying so fast.  My style.css is different then yours. I tried adding yours coding to my existing css file and nothing changed.  Here's my coding.

@import url("../common.css");

.jimu-widget-bookmark{
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.jimu-widget-bookmark .add-section,
.jimu-widget-bookmark .filter-section{
  position: relative;
  height: 30px;
  margin-top: 7px;
  overflow: visible;
}
.jimu-widget-bookmark .add-section{
  display: none;
}
.jimu-widget-bookmark .clear-btn{
  float:right;
  margin-top: 2px;
}
.jimu-widget-bookmark .input-bookmark-name,
.jimu-widget-bookmark .input-filter-bookmark-name{
  position: absolute;
  left: 0;
  top: 0;
  width: 99.2%;
}
.jimu-widget-bookmark .btn-add{
  position: absolute;
  right: 0px;
  top: 0px;
  bottom: 0px;
  width: 30px;
  z-index: 2;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  background-color: #d9dde0;
  cursor: pointer;
}
.jimu-widget-bookmark .btn-add:hover,
.jimu-widget-bookmark .btn-filter:hover{
  background-color: #b7b7b7;
}
.jimu-widget-bookmark .btn-filter .jimu-center-img{
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  background-image: url(images/filter.png);
}
.jimu-widget-bookmark .btn-remove .jimu-center-img{
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  background-image: url(images/remove.png);
}
.jimu-widget-bookmark .btn-filter{
  position: absolute;
  right: 0px;
  top: 0px;
  bottom: 0px;
  width: 30px;
  z-index: 2;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  background-color: #d9dde0;
  cursor: pointer;
}
.jimu-widget-bookmark .btn-add .jimu-center-img{
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  background-image: url(images/add.png);
}
.jimu-widget-bookmark .jimu-state-error{
  margin-top: 4px;
  visibility: hidden;
}
.jimu-widget-bookmark .play-section{
  overflow: hidden;
  margin-top: 20px;
}
.jimu-widget-bookmark .jimu-btn{
  float: none;
  margin: auto;
  width: 150px;
}

.FoldableTheme.green .jimu-widget-bookmark .btn-add{
  background-color: #80dbc5;
}

.FoldableTheme.cyan .jimu-widget-bookmark .btn-add{
  background-color: #d5d5d4;
}

.jimu-rtl .jimu-widget-bookmark .btn-add{
  left: 1px;
  right: auto;
}

[RobertScheitlin__GISP]

Jenna,

  What version of WAB are you using?

[TownOfGroton]

I'm using Web AppBuilder Version 1.2.

[RobertScheitlin__GISP · Accepted solution]

Jenna,

  Well that's an old one.  So in that version you need to adjust the resize function of the Widget.js (line 3):

    resize: function(){
      var box = html.getMarginBox(this.domNode);
      var listHeight = box.h - 37 - 21;// - 61;

      //fix for IE8
      if(listHeight < 0){
        listHeight = 0;
      }
      html.setStyle(this.bookmarkListNode, 'height', listHeight + 'px');
      if(this.bookmarkList){
        this.bookmarkList.resize();
      }
    },‍‍‍‍‍‍‍‍‍‍‍‍‍

[TownOfGroton]

PREFECT!!!  THANK YOU ROBERT!!

[BabatopeAdebajo]

Jenna,

It seems you're missing that part in your bookmark css\style.css, except you had deleted it unknowingly?

Try add it into your style.css and reference it in your html

Baba