putting a frame around element of a scale object

Posted byrobpetrosino

PennController for IBEX › Forums › Support › putting a frame around element of a scale object

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • May 22, 2019 at 1:22 pm #3661
    robpetrosino
    Participant

    I would like to put a frame around the element of a Scale object. I am assuming that this could be done by calling the appropriate CSS command within the PennController object, but I can’t seem to get it right. I tried to do the following:

    `
    newScale(“scale”, 7)
    […]
    .settings.cssContainer(“border-style”, “solid”)
    `

    but it does not work. I guess that the question may be more generally phrased: where can one access the commands that can be referred to within the setting.cssContainer command?

    Thanks!

    May 22, 2019 at 1:45 pm #3664
    Jeremy
    Keymaster

    Hi again,

    The command .settings.cssContainer will not affect the elements within the container, but indeed the container itself. Using newScale(7).settings.cssContainter("border-style","solid 1px black") will only add a black border around the whole Scale element, not around the scale’s buttons.

    For you to modify the scale’s buttons, you need to upload a file named PennController.css under css_includes with the right target, e.g.

    td.PennController-Scale-scaleButton {
  padding:10 15 10 15;
  color:blue;
  border:1px solid gray;
}
    May 23, 2019 at 1:49 am #3672
    robpetrosino
    Participant

    Hi Jeremy,

    thanks, this makes sense. I created a the PennController.css with the code you suggested and uploaded it under css_includes, but it did not have any effect on the aesthetics of the scale buttons. (I have already encountered this problem before, around a couple of months ago, when I was trying to modify the aesthetics of a text object).

    May 23, 2019 at 10:42 am #3673
    robpetrosino
    Participant

    I think I found a solution for this – I had to prepend global_ to the name of the css file (i.e., global_PennController.css), as suggested in the IBEX tutorial. I am not sure why it is like that, but it might be good for you to know, in case you want to find out/fix it…

    May 23, 2019 at 4:13 pm #3674
    Jeremy
    Keymaster

    Ah, right, my bad, you probably want to remove PennController- between td. and Scale if you are going to use a file named PennController.css (though Ibex’s automatic class prefixation is a little bit shaky, so the global_ method is safe).

    May 24, 2019 at 11:46 am #3675
    robpetrosino
    Participant

    Sounds good! Thanks!

    November 25, 2022 at 6:39 am #9734
    BenG
    Participant

    Hi, I am having the same issue regarding boxes around the buttons of scales. I can make changes to the scales through the PennController.css file without issue, but for some reason the code provided above does nothing to the scale.

    Any help would be appreciated!

    Demo link: https://farm.pcibex.net/r/RTusyr/

    • This reply was modified 2 years, 5 months ago by BenG.
    November 29, 2022 at 6:32 pm #9747
    Jeremy
    Keymaster

    Hi,

    The code above dates from 2019, there have been new releases of PennController since then, and Scale elements are no longer rendered as HTML table elements

    Judging from the project you shared, it seems like you have come up with a solution, as you have this in global_z.css:

    .PennController-Scale .option label {
    margin: 0em 1em; 
    font-size: 18px;
}

    You could add a frame like this:

    .PennController-Scale .option label {
    margin: 0em 1em; 
    font-size: 18px;
    border:1px solid gray;
}

    Jeremy

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.