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
Hi Vincent,
This requires some deep digging into the code and design… will get back to you soon
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
OK, thanks for the explanation.
But for a radio button (where the wBSwidth property exists), this should change the font size right ?
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:
Not always. Please, look at these two versions (2d is with font-size: smaller)
But of course I can do it "manually"
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
Yes, Thanks.
Do you plan a new version of FiC ?
We first need to find a safe algorithm and test cases to do that…
Note: Bootstrap only offers upsizing font, not down sizing
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;
}