Explore the community Forums Lectora Lectora Questions & Answers Check box label styling

Tagged: , ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #369138 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    friend finder
    advanced
    picture perfect
    54 pts
    @JasonADal

    After some experimentation, I’ve been unable to find a way to change the position of the label for a check box or the background. Working in the browser console, I was found the background setting in “#check210443”, but can’t figure out how to append that to this particular element.

    I haven’t found anything through the console that helps align the text label, so if I can find that, it would be pretty awesome.

    #369141 Score: 0
    Profile photo of Stan Miller
    Stan Miller
    Member
    beginner
    intermediate
    LUC16 Attendee
    wise owl
    contributor
    curious george
    friend finder
    LUC17 Attendee
    39 pts
    @smiller7502

    Jason, maybe I’m missing some broader purpose, but I can just drag a check box label in the UI. (I’ve actually complained that this is a bug, because it’s possible to drag the check boxes and their labels so that the labels don’t match up with the right check boxes. Sounds silly, but I actually almost did it once accidentally, and it just shouldn’t be possible.)

    #369144 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    friend finder
    advanced
    picture perfect
    54 pts
    @JasonADal

    Hi Stan – I should have clarified that I’m adding a stand-alone check box rather than a multiple response test question. Worst case scenario is that I live with it as is or create it as a test question.

    @jvalley4735 – Is there a particular reason that there’s a difference like this between a stand-alone and question based check box? With a stand-alone check box, there’s no separate element for the label.

    #369158 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    friend finder
    advanced
    picture perfect
    54 pts
    @JasonADal

    I was able to add styles via JS, but it’s still not moving the position of the text, so maybe I’m just missing a style value to move the text?

    document.getElementById(“%HTMLNAME%”).style.height = “12px”;
    document.getElementById(“%HTMLNAME%”).style.width = “300px”;
    document.getElementById(“%HTMLNAME%”).style.background = “white”;

    I haven’t tried padding yet, but it didn’t seem to have an effect in the browser console…

    #369162 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    209 pts
    @Klaatu

    Unless I am misunderstanding, you can use CSS without JS. #checkXX and #checkXXid work. In the attached file I reversed the label position in one and added margin to the other. I also added borders and a little padding so each stand out from the other. You can change other properties, like background-color as well.

    Jason, I’v been crazy busy so I haven’t had time to look at the other thing yet.

     

    Attachments:
    1. style-checkbox.zip
    #369165 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    friend finder
    advanced
    picture perfect
    54 pts
    @JasonADal

    I completely understand the busy – I’m back at it with 2 more modules similar to my other 4 due on Nov 1.

    This is really close. I was hoping to have the ability to align the label centered relative to the position of the check box rather than the bottom. I’m pretty sure “position” wouldn’t have an affect, since the check box and text are considered one element, if I’m not mistaken?

    #369168 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    209 pts
    @Klaatu

    Hows this?

    #369172 Score: 0
    Profile photo of Jennifer Valley
    Jennifer Valley
    Member
    contributor
    beginner
    friend finder
    advanced
    lectora beginner
    verified member
    wise owl
    profile
    picture perfect
    curious george
    117 pts
    @jvalley4735

    @JasonADal – There’s a Label in the Properties and you can see the HTML name by opening the Description in the Radio section. Am I missing something?

    #369185 Score: 1
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    friend finder
    advanced
    picture perfect
    54 pts
    @JasonADal

    Darrel – Can you warn me next time before I preview that you’re changing the font to GINORMOUS? 😉 In all seriousness, thanks again. This helps a ton!

    I took it a step further by assigning the element with a class through RunJS, then defining the style in CSS. This will definitely make it easier for me down the line when I get into pages with check boxes, since I can paste the RunJS instead of getting the HTML names. See attached.

    @jvalley4735 – Yup, that is there – it was more about how to target the text label only. I was trying to determine if it was the anc, id, or label id I needed to target and then how to do it. Darrel, as usual, has made my day.

    This post has received 1 vote up.
    #369204 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    209 pts
    @Klaatu

    Aw, thanks Jason. I’m glad I could help.

    • This reply was modified 3 years, 2 months ago by Profile photo of Darrel Somoza Darrel Somoza.
Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.