Jump to content
Sign in to follow this  
Daniel Eiszele

Checkbox Wordwrap

Recommended Posts

Can anyone confirm whether or not wordwrap is working for Checkbox components in the current Alpha (3.9.1.169)? Dropping a checkbox on the form, typing a really long caption and setting wordwrap to true in the property inspector doesnt seem to work.

Share this post


Link to post
Share on other sites
1 hour ago, Daniel Eiszele said:

Can anyone confirm whether or not wordwrap is working for Checkbox components in the current Alpha (3.9.1.169)? Dropping a checkbox on the form, typing a really long caption and setting wordwrap to true in the property inspector doesnt seem to work.

That property doesn't seem to work. Let me have a quick look.

Yep, confirmed. There are issues with other properties as well. On it...

Share this post


Link to post
Share on other sites

This is a bit more tough problem, than I anticipated. The current TW3CheckBox and TW3RadioButton are based on TW3Label, which does all the aligns and word wraps automatically through CSS. That makes them very fast and light as they don't need any resize code. However, once you add that check mark or radio toggle, it becomes way harder to properly do horizontal alignments and word wraps.

I first thought that I just apply the css class to the wrong container (which I do), but that's not (only) the case. So I am able to fix this so that Word Wrap works, but can't get center and right alignments to work no matter what I try.

Share this post


Link to post
Share on other sites

Sometimes these composite controls are good but in other not really, I had a lot of problem with TCheckBox in styling and flex positions so I've started using instead simple div as container and inside span for caption and editbox (check input) and all works exactly as I want. So perhaps checkbox control should be simplified.

Share this post


Link to post
Share on other sites
Just now, Daniel Eiszele said:

I seem to remember they were working in a previous version of SMS so something must have changed? I loaded an old project which I had to amend to get it to compile, so this suggests the combobox at least has changed?

Yes, both the combo and the radiobutton were changed. The previous ones were a lot more complicated as they used JS for all resizes while the new one uses pure CSS. The new ones are a lot faster and they don't run into problems in case you happen to hide a parent component while any of them are resizing. That's because once the component is not visible any more, ClientWidth, ClientHeight and ClientRect return 0 or even negative values. So if you have a TW3CheckListBox, which is constantly dynamically drawing and hiding lines, it'd be a pain to make it work with the previous versions.

 

Share this post


Link to post
Share on other sites

This is the best I've been able to come up with. I've added a btFlatBorder for the controls, so you can see where the boundaries are. It'd be lovely to have that CheckBox wrap the text so, that the second line would start at the same position as 1st line. However, that completely messes up both horizontal and vertical alignments.

image.png

Share this post


Link to post
Share on other sites
49 minutes ago, Daniel Eiszele said:

Any chance this link can provide a clue? It seems to work but I don't know if it's too much of a hack?

https://codepen.io/patrickclay/pen/btFsn

There are many pages that offer similar help, but once I try to fix that, everything else falls apart and hard. Especially:

  • How the text is rendered compared to the check mark
  • Horizontal alignment of both the check mark and the text. Center and right are rendered completely off.
  • Word wrapping

I'll update the alpha with my latest code, so anyone can take a stab at this. Experimenting is pretty easy by opening the Dev Tools and changing element styles there. You can even edit html code directly and add an extra div or pre etc. But so far I've not been able to find a solution that works perfectly with both word wrap and horizontal alignment as center or right.

image.png

Share this post


Link to post
Share on other sites

note : I'm not an expert in css, but I did notice that the first div child of the checkbox has a display="inline-block" as an attribute of that element. I think that should be a property of the style (style ="display:flex;width ... etc)

Also I think the answer is to change the box layout system for these components from block to flex (or grid)

original :

<div class="lbxcontent lbxcontent_v_center lbxdisableBreak lbxcontent_h_center" display="inline-block" style="width: 100%;">
  <input type="checkbox" display="inline-block" style="width: 16px; height: 16px; position: relative; vertical-align: middle;">
  <pre class="lbxcontent lbxenableBreak" display="inline-block" style="position: relative; vertical-align: middle;">This is a long checkbox text</pre>
</div>

change to :

<div class="lbxcontent lbxcontent_v_center lbxdisableBreak lbxcontent_h_center" style="display: flex; width: 100%;">
  <input type="checkbox" style="width: 16px; height: 16px; position: relative; vertical-align: middle;">
  <pre class="lbxcontent lbxenableBreak" style="text-align: left; position: relative; vertical-align: middle;">This is a long checkbox text</pre>
</div>

changes the rendering from

Capture.PNG

to

Capture2.PNG

 

Share this post


Link to post
Share on other sites

@lynkfs That fixes the Word Wrap, but breaks horizontal alignment 😢

image.png

Edit: That being said, I do believe that using flex is the most probable way to fix this. There are tons of styles to control this.

Share this post


Link to post
Share on other sites
7 minutes ago, Daniel Eiszele said:

@lynkfs I think your suggestion has hit the nail on the head:) It works in all the cases I've tested it in at least. It looks like the only browser which needs a bit of kneading is Safari which needs the webkit prefix for it to work.

Can you paste a pic of what your html looks like? I wonder if I missed something.

Share this post


Link to post
Share on other sites

Hi @jarto, I'm just playing around with the align-items and justify-content parameters of the flex display model. I'll report back when/if I get it locked away.  I am just wondering what it means for a checkbox or radio item to be right justified though. I'm wondering if the checkbox should relocate to the opposite side of the text?

Share this post


Link to post
Share on other sites
1 minute ago, Daniel Eiszele said:

Hi @jarto, I'm just playing around with the align-items and justify-content parameters of the flex display model. I'll report back when/if I get it locked away.  I am just wondering what it means for a checkbox or radio item to be right justified though. I'm wondering if the checkbox should relocate to the opposite side of the text?

If horizontal alignment is right, I don't mind if the checkbox would also be moved to the right side of the caption. All in all, I can even add a separate property for handling that. That'd be nice for languages like Arabic.

Here's some advice about how to experiment in code. That's faster than tweaking the css in every control separately:

  1. Start a new project
  2. Add a CheckBox in the designer
  3. Set ThemeBorder to btFlatBorder in the Property Inspector
  4. Copy-paste that Checkbox to create n different controls
  5. Set different combinations of properties (Captions, AlignText, VAlign, WordWrap)
  6. Open SmartCL.Controls.CheckBox.pas and edit the code of TW3CheckBox.InitializeObject.
  7. Once you make a change to the CheckBox code, make sure to press save. RTL files are not automatically saved when you click Execute.
  8. Execute and see, how all looks like

Here's the code for @lynkfs version:

procedure TW3CheckBox.InitializeObject;
begin
  inherited;
  FAutoCheck:=True;
  Content.display:='inline';
  //w3_setAttrib(Content, 'display', 'flex');
  Content.style.display := 'flex';
  Content.style.width := '100%';

  FChkMark := BrowserAPI.Document.createElement('input');
  w3_setAttrib(FChkMark, 'type', GetMarkType);
  //w3_setAttrib(FChkMark, 'display', 'inline-block');
  FChkMark.style.width:='16px';
  FChkMark.style.height:='16px';
  FChkMark.style.position:='relative';
  FChkMark.style['vertical-align']:='middle';
  Content.appendChild(FChkMark);

  FChkCaption := BrowserAPI.Document.createElement('pre');
  w3_setAttrib(FChkCaption, 'class', 'lbxcontent lbxdisableBreak');
  //w3_setAttrib(FChkCaption, 'display', 'inline-block');
  FChkCaption.style.position:='relative';
  FChkCaption.style['vertical-align']:='middle';

  Content.appendChild(FChkCaption);

 

Share this post


Link to post
Share on other sites
18 minutes ago, Daniel Eiszele said:

HI @jarto, adding "justify-content: flex-start", "justify-content: center" and "justify-content: flex-end"  to the alignment CSS appears to fix the justification issues without wrecking the word wrapping.

Perfect! Thank you!

image.png

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...