how do increase the widget icon and button size in dart controller app.

BrianEveritt1 — Wed, 06 Feb 2019 04:41:16 GMT

Trying increase the size of all the widget buttons and the text in the dart controller widget. I find where i can increase the size but the buttons don't continue out along the dart controller bar. instead i get a new scroll bar and they appear underneath.

Also how do i change the hover text that appears above the widget when i hover over it. There really should be more options to easily change all font sizes in regular WAB.

Re: how do increase the widget icon and button size in dart controller app.

RobertScheitlin__GISP — Sun, 12 Dec 2021 10:05:33 GMT

Brain,

It is a long list of changes to get the icons to be bigger:

1. The dart themes style.css I increased values by 20.

a. line 5 increased to 120.

b. line 18, 25 increased to 78

c. line 33 increased to 74

d. lines 44, 45, 52 and 53 increased to 64

e. lines 63, 68 and 69 increased to 32.

f. line 67 increased to 15

.dart-controller {
  position: absolute;
  bottom: 20px !important;
  width: 100%;
  height: 120px !important;
  white-space: nowrap;
  -webkit-transition: height 0.5s;
  -moz-transition: height 0.5s;
  -o-transition: height 0.5s;
  transition: height 0.5s;
  z-index: 101 !important;
}

.dart-controller-box {
  position: relative;
  /*margin: 0px 10px 0px 10px;*/
  padding: 0px 10px 0px 10px;
  height: 78px;
  display: inline-block;
  width: 100%;
}

.dart-controller-bar {
  position: relative;
  height: 78px;
  overflow: hidden;
  clear: none;
  /*float: left;*/
}

.dart-controller-container {
  position: relative;
  height: 74px;
  width: auto;
  overflow: visible;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}

.icon-node {
  float: left;
  width: 64px;
  height: 64px;
  margin: 5px;
  cursor: pointer;
}

.jimu-rtl .icon-node {
  float: right;
  width: 64px;
  height: 64px;
  margin: 5px;
  cursor: pointer;
}

.icon-node-active,
/*.icon-node:active,
.icon-node:focus,*/
.icon-node:hover {
  background-color: rgba(0, 0, 0, 0.25);
  border-radius: 32px;
}

.icon-node img {
  margin: 15px;
  width: 32px;
  height: 32px;
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

2. themes\DartTheme\widgets\DartController\Widget.js

a. line 42 increased to 74

Increasing the tooltip font size is not possible to my knowledge.

Re: how do increase the widget icon and button size in dart controller app.

BrianEveritt1 — Wed, 13 Feb 2019 04:33:13 GMT

thank you Robert! this helped a lot in understanding some other things I needed to change besides the icon image and height of the controller.

topic Re: how do increase the widget icon and button size in dart controller app. in Web AppBuilder Custom Widgets Questions

how do increase the widget icon and button size in dart controller app.

Re: how do increase the widget icon and button size in dart controller app.

Re: how do increase the widget icon and button size in dart controller app.