In the image i ve groupbox and radiobuttons graphics problem at left side on run time. At the rigth, on design time, good aspect !
How solve it ? with elementclassname formatting ?
In this case, there are a few element classes you can work with.
- ElementLabelClassName
- ElementButtonClassName
- ElementGroupClassName
- ElementClassName
When using a new control with multiple classes, I find it helpful to just explore a little bit by adding their names as classes and seeing where they show up in the final rendered HTML. So in this case, adding LABEL, BUTTON, GROUP and CLASS as classes to each of those properties. Then looking at the HTML/CSS in the dev tools (hitting F12 in Chrome for example) you can readily see where they are added and have a better idea of what needs to be adjusted.
For your situation, it looks like the radio buttons could use a bit of top padding, and it turns out that the buttons+labels are linked to the ElementClassName property, so adding pt-3 to that property might be what you need.
Sometimes the element you want to change isn't accessible through a property though, such as adjusting the title of the radio button group. In this case, you might try adding custom CSS entries, particuarly if they are used many times. So you could add a class like RadioGroup to the ElementGroupClassName and then in your CSS file add something like this (note the period before RadioGroup):
.RadioGroup > legend {
font-size: 10px;
background: white;
margin-top: -10px;
margin-left: 5px;
width: fit-content !important;
border: 1px solid black;
padding: 2px;
}
Then, adding RadioGroup as a class to the ElemengGroupClassName property of any other TWebRadioGroup controls will automatically pickup the same styling. Not really bootstrap anymore at that point, but gets you more control over things. Keep in mind bootstrap is there to help you get started, not necessarily the complete solution for everything.
Hi andrew, now seems go better but how increase font of elements ?
... and for groupbox at bottom i tried to use ElementClassName "card" but not solve caption problem. Have a solution for that ?
Thx
You can use the bootstrap classes fs-1, fs-2, fs-3, fs-4, fs-5 and fs-6 to adjust the font size of the elements (biggest to smallest). As a reminder, the Bootstrap 5 cheatsheet has these on it and many other things you can do with fonts as well, such as changing the style to bold or italics, for example.
If you find you don't like the bootstrap sizes and want something different, or if you want to change the font itself entirely, you might be better off using the custom CSS approach where you can directly set the styles for each element separately.
WebCore adds classes by default (bootstrap classes) to the properties of controls when you add them to your form, and generally adds classes that work well by default. But if you're not all that familiar with bootstrap classes in general (and I'm one of those people!) then it might be an idea to spend time reading up on the Bootstrap 5 Documentation about what things like card actually do and whether it is of any benefit to you.
Personally, I tend to revert to using CSS a lot of the time rather than bootstrap when there are elements that I use a lot. And then use the bootstrap classes to nudge things around a bit when they are off in some places. But there are many different ways to solve all of these problems, and having a good understanding of how bootstrap works will make things a lot easier for you I'm sure.