Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    formatting issue with RadioGroupItem

    Heyhey,

    say i have this item:
    Code:
    RadioGroupItem item = new RadioGroupItem()
    item.setTextBoxStyle(WebConstants.VERYSMALLITALICS_TEXT);
    and i then have this in the css:
    Code:
    .vSText,
    .vSiText {
        font-size: 11px;
        color: #333333;
    }
    
    .vSiText {
        font-style: italic;
    }
    I notice that only the text-style is applied, not the font size. This works in other components, like labels, so i don't think it's something wrong with the css or code.

    Is it by design perhaps?


    13.1-p20250323

    #2
    Does it work if you stick !important on your font-size?

    If not, what size do you end up with? Are you using Canvas.resizeFonts()?
    Last edited by Isomorphic; 14 May 2025, 06:09.

    Comment


      #3
      Heyhey,

      i tried it, doesn't change anything. Setting color doesn't apply either. Here's the body i see:

      Code:
      <div id="isc_80" $89="isc_CheckboxItem_1" $9a="$9d" class="vSiText" style="min-width:1px;white-space:nowrap;" tabindex="1804">
          <span spriteviewport="true" style="overflow:hidden;display:inline-block;width:22px;height:22px;vertical-align:middle;margin-left:0px;margin-right:3px" id="isc_81" eventpart="valueicon">
              <span style="vertical-align:top;display:inline-block;transform-origin:left top;;width:25px;height:25px;;transform:scale(0.88, 0.88);" class="radioFalse"></span>
          </span>
          <label id="isc_7Y" style="vertical-align: middle;" class="labelAnchor">FONT SIZE NO CHANGE MAN, WHAT GIVES</label>
      </div>
      You can see that the class is applied to the checkbox item, but then there's a "labelAnchor" class on the actual label, is that it?

      I tried both "setCheckBoxStyle" and "setTextBoxStyle", no difference.

      Comment


        #4
        Yes, that's it - but setting textBoxStyle in built-in 13.1 skins does correctly change the style - go here and drop this code into the sample tab:

        Code:
        isc.DynamicForm.create({
            fields: [
                {
                    name: "radioGroup",title: "Radios", type: "radioGroup",
                    valueMap: ["Option 1", "Option 2"],
                    textBoxStyle: "button"
                }
            ]
        });
        Your underlying issue is probably that the blocks in your load_skin for RadioGroupItem, RadioItem or CheckBoxItem don't have the latest settings (some tweaks were made recently, as you're aware).

        Please compare your settings for those three blocks to the ones in Tahoe's load_skin.js.

        Comment


          #5
          Hi, i'm continuing this thread because i have a pretty similar issue with styling of formitems:

          How do i change the title style for a selectitem? seems to not be possible for me. I've only been able to, like in our discussion above, change text-styling, the rest is ignored. Also i only managed to apply to the textbox, or both fields, not for the title only.


          i did update the skin as per your suggestion above, to 13.1-p20250522

          Any ideas? Perhaps i'm missing something obvious.

          example code:

          Code:
          form = new DefaultForm(dataSource, "decide");
          ....
          ledger = (SelectItem) form.getField(CSConstants.FIELD_LEDGERTYPE);
          
           //not working
          //ledger.setScClassName("onboardText");
          //ledger.setTitleStyle("onboardText");
          
          //DOES work, but is of course only for the textbox, not the title
          //ledger.setTextBoxStyle("onboardText");
          
          //changes the text-style only, for both header and form
          //ledger.setCellStyle("onboardText");
          
          //works, but only changes text-style and is applied for everything
          //form.setStyleName("onboardText");
          
          ...
          .onboardText {
            font-family: Arial, Helvetica, sans-serif;
            font-style: italic;
            font-size: 22px;
            color: #000000;
          }

          Comment


            #6
            If you mean the title to the left of item, that is:

            theTitle : [the dropdown]

            Then that is indeed titleStyle, and this is a super basic function of the framework so it's surprising to hear it's not working for you.

            Have you looked at the title in the DOM inspector? Perhaps you have some CSS elsewhere that is overriding your expected appearance.

            Comment


              #7
              Hello mathias, in addition to checking as Isomorphic suggested, I can confirm this is working for me in SmartClient 13.1 as well.

              You can check how it works in the SmartClient showcase by adding titleStyle:"headerItem" to a Selectitem here: https://www-demos.smartclient.com/sm...ntSelectsLocal

              Comment

              Working...
              X