WAB Custom Bookmark Help

747
7
Jump to solution
11-17-2016 05:44 AM
TownOfGroton
New Contributor III

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!

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

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();
      }
    },

View solution in original post

7 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

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
New Contributor III

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;
}

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Jenna,

  What version of WAB are you using?

0 Kudos
TownOfGroton
New Contributor III

I'm using Web AppBuilder Version 1.2.

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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
New Contributor III

PREFECT!!!  THANK YOU ROBERT!!

0 Kudos
BabatopeAdebajo
New Contributor III

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

0 Kudos