Tiranti radio buttons are rendered incorrectly

[noahgibbs]

For instance if you run:

SCARPE_HTML_RENDERER=tiranti ./exe/scarpe --dev examples/radio/radio.rb

This is what I see:

The buttons aren't correctly keeping the text from overlapping them. This is probably a matter of generating correct Bootstrap markup. It should be separate from the problem in issue #383 -- this one is (I think) just a markup issue. But the radio buttons won't group correctly until that issue is fixed anyway.

I normally check the Bootswatch theme sample sites for markup (https://bootswatch.com/sketchy/). Looks like for radio buttons we want something like their example:

  <div class="form-check">
  <input class="form-check-input" type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
  <label class="form-check-label" for="optionsRadios1">
  Option one is this and that&mdash;be sure to include why it's great
  </label>
  </div>
  <div class="form-check">
  <input class="form-check-input" type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
  <label class="form-check-label" for="optionsRadios2">
  Option two can be something else and selecting it will deselect option one
  </label>
  </div>
  <div class="form-check disabled">
  <input class="form-check-input" type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
  <label class="form-check-label" for="optionsRadios3">
  Option three is disabled
  </label>
  </div>

[HUDASULTANA]

hey @noahgibbs Do you mean to say that we need to increase the space between buttons and text?

[noahgibbs]

For me, the buttons literally cover the whole first word. So yes, but most importantly, by default the buttons should not be on top of the text. It's probably some kind of a simple CSS or Bootstrap issue.

[HUDASULTANA]

<!-- /* Font Definitions */ @font-face {font-family:Mangal; panose-1:2 4 5 3 5 2 3 3 2 2;} @font-face {font-family:"Cambria Math"; panose-1:2 4 5 3 5 4 6 3 2 4;} @font-face {font-family:Calibri; panose-1:2 15 5 2 2 2 4 3 2 4;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {margin:0in; font-size:11.0pt; font-family:"Calibri",sans-serif;} a:link, span.MsoHyperlink {mso-style-priority:99; color:blue; text-decoration:underline;} .MsoChpDefault {mso-style-type:export-only;} @page WordSection1 {size:8.5in 11.0in; margin:1.0in 1.0in 1.0in 1.0in;} div.WordSection1 {page:WordSection1;} --> Okay I’ll try to look into that issue actually I am a newbie this will be my first time for open source.  Sent from Mail for Windows From: Noah GibbsSent: Saturday, January 6, 2024 2:32 PMTo: scarpe-team/scarpeCc: HUDASULTANA; CommentSubject: Re: [scarpe-team/scarpe] Tiranti radio buttons are rendered incorrectly (Issue #460) For me, the buttons literally cover the whole first word. So yes, but most importantly, by default the buttons should not be on top of the text. It's probably some kind of a simple CSS or Bootstrap issue.—Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you commented.Message ID: ***@***.***> 

[noahgibbs]

Something that may help... there are demo pages for Bootswatch themes, including Sketchy, the one we use by default with Tiranti. https://bootswatch.com/sketchy/

You can search for "radio button" on that page. They're using the same CSS classes and styles there, and they're working. So presumably part of our problem is that we're not doing the right thing from that page.