FoxInCloud
wBSwidth
Gravatar is a globally recognized avatar based on your email address. wBSwidth
  Vincent H.
  All
  May 13, 2022 @ 11:54pm

Hi Thierry,

Setting HTML properties from the VFP IDE is really handy !

Some small imperfections with wBSwidth:

  • Not present with checkboxes
  • Doesn't work with radio buttons, treeviews or containers

Thanks in advance

Gravatar is a globally recognized avatar based on your email address. re: wBSwidth
  FoxInCloud Support - Thierry N.
  Vincent H.
  May 17, 2022 @ 02:48am

Hi Vincent,

This requires some deep digging into the code and design… will get back to you soon

Gravatar is a globally recognized avatar based on your email address. re: wBSwidth
  FoxInCloud Support - Thierry N.
  Vincent H.
  May 20, 2022 @ 02:15am

Hi Vincent,

So far FoxInCloud uses .wBSwidth and .wBSheight to decide whether to add a sizing class on controls that support it (eg. form-control-lg); namely Editbox, Combobox, Listbox, Spinner, Textbox, Commandbutton.

So yes, it's not present and/or not working on other controls.

I guess you would expect the size of the column where the control lies to enlarge or shrink based on .wBSwidth.

The algorithm does not do that because it can't decide which other column(s) should also resize to keep the total column count to the maximum of 12 supported by Bootstrap.

You need to play with the control width in .Init():

procedure ControlToEnlarge.Init()
if thisForm.wBSlHTMLgen
  this.width = this.width + 20
endif
endproc

procedure ControlToShrink.Init()
if thisForm.wBSlHTMLgen
  this.Left = this.Left + 20 && do not forget! controls must not overlap horizontally
  this.width = this.width - 20
endif
endproc

Gravatar is a globally recognized avatar based on your email address. re: wBSwidth
  Vincent H.
  FoxInCloud Support - Thierry N.
  May 20, 2022 @ 02:28am

OK, thanks for the explanation.

But for a radio button (where the wBSwidth property exists), this should change the font size right ?

Gravatar is a globally recognized avatar based on your email address. re: wBSwidth
  FoxInCloud Support - Thierry N.
  Vincent H.
  May 20, 2022 @ 02:40am

As you may have noticed, we never change the font size directly (using the CSS attribute font-size), we only use additional classes supplied by Bootstrap.

As we have no way to change the size of the radio button itself (rendered by Bootstrap using an image: background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e")), changing the font size only (eg. by adding the fs-5 CSS class to the label) looks pretty odd:

Gravatar is a globally recognized avatar based on your email address. re: wBSwidth
  Vincent H.
  FoxInCloud Support - Thierry N.
  May 20, 2022 @ 02:50am

Not always. Please, look at these two versions (2d is with font-size: smaller)

But of course I can do it "manually"

Gravatar is a globally recognized avatar based on your email address. re: wBSwidth
  FoxInCloud Support - Thierry N.
  Vincent H.
  May 20, 2022 @ 03:08am

However we need to stick to the Bootstrap guide lines, and not play with CSS attribute 'font-size'.

Adding an fs-* class to the containing div seems to work:

<div class="form-check fs-3">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
  <label class="form-check-label" for="flexRadioDefault1">
    Default radio
  </label>
</div>
<div class="form-check fs-3">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked="">
  <label class="form-check-label" for="flexRadioDefault2">
    Default checked radio
  </label>
</div>
</div>

We will reconsider this sizing issue.

Update: Bootstrap only offers upsizing font size, not down sizing

Gravatar is a globally recognized avatar based on your email address. re: wBSwidth
  Vincent H.
  FoxInCloud Support - Thierry N.
  May 20, 2022 @ 03:11am

Yes, Thanks.

Do you plan a new version of FiC ?

Gravatar is a globally recognized avatar based on your email address. re: wBSwidth
  FoxInCloud Support - Thierry N.
  Vincent H.
  May 20, 2022 @ 03:15am

We first need to find a safe algorithm and test cases to do that…

Note: Bootstrap only offers upsizing font, not down sizing

Gravatar is a globally recognized avatar based on your email address. re: wBSwidth
  FoxInCloud Support - Thierry N.
  Vincent H.
  May 20, 2022 @ 03:53am

Just double checked : For checkbox, optiongroup and optionbutton, you just need to add the desired 'fs-*' CSS class in .wCSSclassAdd to size both the text and control.

You can define your own custom fs-* classes in xxx.css to suit your downsizing needs; eg.:

.fs-7 {
    font-size: .75rem!important;
}
Gravatar is a globally recognized avatar based on your email address. re: wBSwidth
  Vincent H.
  FoxInCloud Support - Thierry N.
  May 20, 2022 @ 04:45am

Yes, thanks Thierry

© 1996-2022