How to make the box in a TWebCheckbox larger with Bootstrap 5.2.3

WEB TMS WEB Core
1

I am using a TWebCheckbox in a web core application with Bootstrap. What do i need to do to make the tick box larger?
And how can I set the checkbox label font size, italic etc. I have the ElementFont set to efProperty, but the font doesn't change at runtime.

Thanks,
Paul

2

These are the settings to have your TWebCheckBox fully bootstrap styled:

image
image1084×721 64.5 KB

In order to increase the checkbox size, you'll need to extend the bootstrap style and apply this extended CSS to the TWebCheckBox.ElementButtonClassName

See:

3

If I add the following CSS to my html file, what do I need to put in each of the ...ClassName properties?

Thanks.

<style>
    .form-check {
        display: flex;
        align-items: center;
    }
    .form-check label {
        margin-left: 10px;
        font-size: 18px;
        font-weight: 500;
        font-style: italic;
    }
    .form-check .form-check-input[type=checkbox] {
        border-radius: .25em;
        height: 50px;
        width: 50px;
    }
    .form-check .form-check-input[type=radio] {
        border-radius: 100%;
        height: 50px;
        width: 50px;
    }
    .form-switch .form-check-input[type=checkbox] {
        border-radius: 2em;
        height: 50px;
        width: 100px;
    }
</style>
4

"form-check label" for ElementLabelClassName
"form-check form-check-input" for ElementButtonClassName

5

Thanks Bruno. It's not quite working as far as the label is concerned.

The gap between the checkbox and the label is too large, and it doesn't seem to matter what font size I set, it stays the same as in the image below. I also can't get it to set the label to italic.

Any ideas?

image

6

Did you try to change this value in the CSS:

margin-left: 10px;

7

Yes I did, but as with the font-size, nothing seems to change.

8

What browser do you use? Did you try other browsers?
Please isolate and provide a sample source project with which I can see what exactly you do and with which I can reproduce this.

9

Hi Bruno,

I was using Chrome, but have now also tried Firefox and Edge. All showed the same behavior.

I have attached a small project that shows the issue.
Checkbox.zip (1.6 MB)

Thanks,
Paul

10

Setting ElementLabelClassName to 'form-check-label' removes the gap.

11

Yes it does, but none of the style settings are working. The label isn't italic. And if you change the font size or the margin left, nothing changes.

Could you please check this out and see if you see the same that I'm seeing here?
Thanks.

12

This isn't related to TMS WEB Core, this is basic CSS knowledge and normally not within the scope of our support services.
With attached project, italic is applied.

image
CheckBoxEx.zip (53.1 KB)

13

Thanks Bruno. Much appreciated, it's looking good now.