topic Re: WAB Custom Bookmark Help in Web AppBuilder Custom Widgets Questions

WAB Custom Bookmark Help

TownOfGroton — Thu, 17 Nov 2016 13:44:15 GMT

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!

Re: WAB Custom Bookmark Help

RobertScheitlin__GISP — Sun, 12 Dec 2021 10:34:07 GMT

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

Re: WAB Custom Bookmark Help

TownOfGroton — Thu, 17 Nov 2016 14:56:36 GMT

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

Re: WAB Custom Bookmark Help

RobertScheitlin__GISP — Thu, 17 Nov 2016 15:09:06 GMT

Jenna,

What version of WAB are you using?

Re: WAB Custom Bookmark Help

TownOfGroton — Thu, 17 Nov 2016 15:16:06 GMT

I'm using Web AppBuilder Version 1.2.

Re: WAB Custom Bookmark Help

BabatopeAdebajo — Thu, 17 Nov 2016 15:18:53 GMT

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

Re: WAB Custom Bookmark Help

RobertScheitlin__GISP — Sun, 12 Dec 2021 10:34:10 GMT

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

Re: WAB Custom Bookmark Help

TownOfGroton — Thu, 17 Nov 2016 15:43:03 GMT

PREFECT!!! THANK YOU ROBERT!!