Jump to content


Photo

Custom Styling of TW3CheckBox

TW3CheckBox CSS

  • Please log in to reply
5 replies to this topic

#1 recursiveElk

recursiveElk
  • Members
  • 36 posts

Posted 22 June 2017 - 12:12 AM

Hi, Given that TW3CheckBox is made up of two components being : TW3CheckMark and TW3CheckBoxLabel, How would one go about styling this component? 

Can we set styles for the sub components and go from there? Just a bit confused by the cross over between CSS and SMS for this component.

 

Thanks!

 



#2 Nico Wouterse

Nico Wouterse
  • Moderators
  • 255 posts
  • LocationAustralia

Posted 22 June 2017 - 07:12 AM

components based on the native html checkbox element are notoriously difficult to style.

It used to be that browsers just displayed the standard checkbox no matter what styling had been applied.

 

You can style checkboxes basically 3 ways

 

- css only, starting with hiding the actual checkbox and then painstakenly re-styling it however you like

  see example https://paulund.co.u...boxes-with-cssĀ 

 

- write-your-own SMS component

  see checkbox component in http://forums.smartm...kbox#entry17428

 

- use the provided component in the rtl (which is what you were asking I guess)

 

Since both TW3Label and TW3CheckMark are 'publicly' accessible in the TW3CheckBox component :

  public
    property Label: TW3Label read FLabel;
    property CheckMark: TW3CheckMark read FMark;

 they can be styled like

  CheckBox1 := TW3CheckBox.Create(self);
  CheckBox1.SetBounds(100,100,150,30);
  CheckBox1.Caption := 'CheckBox1';
 
//style checkbox
  w3_setstyle(CheckBox1.handle,'border-right','thick double #ff0000');
//style sub-component
  w3_setstyle(CheckBox1.Label.handle,'color','purple');

 

  • Czar, Igor Savkic and recursiveElk like this
Nico Wouterse

#3 Igor Savkic

Igor Savkic
  • Members
  • 186 posts

Posted 22 June 2017 - 10:57 AM

There's one more ways.

Actually it's similar to Nico's third suggestions, difference is that instead of using SMS to add styles you do that inside css file, advantage is that you can change look of your app independently from your code.

So find where's TW3CheckMark defined within css file and do changes you like and for the label itself you cn do this trick.

MyCheckBox.Label.StyleClass := 'MyCustomStyle'; and then declare MyCystomStyle inside your css.

With this combined approach, that is naming style for a control through code and declaring that class in css, you can have several different type of checkboxes that could be used simultanously.


  • Nico Wouterse and recursiveElk like this

#4 recursiveElk

recursiveElk
  • Members
  • 36 posts

Posted 22 June 2017 - 11:04 PM

Thanks for the great info, good to have a source/second opinion for it!

So If one wanted to implement a pure css method like the 1st link, would you set TW3CheckMark class to visibility hidden, then style the TW3CheckBoxLabel component? Similar to how they hide the <input> tag and then style the <label> tag.

I suppose this would be a mixture of Option 3 and Option 1 if it is possible?



#5 recursiveElk

recursiveElk
  • Members
  • 36 posts

Posted 23 June 2017 - 03:14 AM

Noticing some weird behaviours, i cant get the StyleClass method to work with certain properties, please let me know if you can replicate this.

>> Code that sets label purple successfully (with green background) :

procedure TForm1.InitializeForm;
begin
  inherited;
  var CHeckBox4 : Tw3Checkbox;
  CheckBox4 := TW3CheckBox.Create(self);
  CheckBox4.SetBounds(100,100,150,30);
  CheckBox4.Caption := 'CheckBox4';

//style sub-component
  w3_setstyle(CheckBox4.Label.handle,'background','green');
  w3_setstyle(CheckBox4.Label.handle,'color','purple'); 
end;

>> Code that doesn't set label purple successfully (but does manage to set background green) :

procedure TForm1.InitializeForm;
begin
  inherited;
  var CHeckBox4 : Tw3Checkbox;
  CheckBox4 := TW3CheckBox.Create(self);
  CheckBox4.SetBounds(100,100,150,30);
  CheckBox4.Caption := 'CheckBox4';
  checkbox4.Label.styleclass := 'check4label';
end;

+ CSS:

.check4label {
  color : purple;
  background : green;
}

I have tried both with and without changing the StyleClass of the Checkbox4 itself to no avail.

NOTE: changing a property like visibility on any of the components with either method (w3_setstyle or custom StyleClass) doesn't seem to work for me either.



#6 Nico Wouterse

Nico Wouterse
  • Moderators
  • 255 posts
  • LocationAustralia

Posted 23 June 2017 - 12:41 PM

the TW3CheckBox has a TW3Label sub-component which has a TW3LabelText sub-sub-component

and you need to target your css to the appropriate sub-component

 

so
  w3_setstyle(CheckBox1.label.handle,'visibility','hidden');                         <=== doesn't do it
 
but
  w3_setstyle(CheckBox1.label.container.handle,'visibility','hidden');         <=== does do the trick
 
 
i'm sure that when you add a css 'container' entry to your css file and activate it as in
  checkbox4.Label.container.styleclass := 'check4labelcontainer';
your label color problem will be solved as well
 
Alternatively, for invisibility, you can work on the parent-level rather than on the sub-sub-component level by : setting opacity of the checkbox to 0, moving the checkbox off-screen, or cover it up ...

  • Czar and recursiveElk like this
Nico Wouterse





Also tagged with one or more of these keywords: TW3CheckBox, CSS

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users