PennController for IBEX › Forums › Support › cssContainer, inline display, and before/after text
- This topic has 2 replies, 2 voices, and was last updated 1 year, 1 month ago by
bta.
-
AuthorPosts
-
October 7, 2022 at 1:55 pm #9543
bta
ParticipantI’m having trouble getting the textbox of a
TextInput
to display inline with theText
specified with.before
/.after
. I want the yellow box to be in-line with the surrounding text, which happens when the surrounding text is short enough that all 3 elements can appear on one line (see top of image below), but doesn’t happen when the.before
/.after
Text is longer, as you can see from the screenshot below:
I am using
.cssContainer({"display": "inline"})
and.css({"display": "inline"})
in as many places as possible, and still when I use the developer tools to look at the page source when it indicates that a few of the keydiv
s are specified asdisplay: inline-block
(screenshot below)… what can I do to change this?
Here is the demonstration link for the project:
https://farm.pcibex.net/r/hYLzfR/October 11, 2022 at 12:08 pm #9551Jeremy
KeymasterHi,
In order to really get an uninterrupted flow, you need to have simple text nodes surrounding the
textarea
node, and have both thetextarea
and its container’sdisplay
style set toinline
. You won’t be able to achieve that by only PennController’sprint
(orbefore
/after
) command on Text elements, since it introduces embedded nodesHowever, you can use the javascript functions
after
andbefore
to insert simple text nodes around thetextarea
element:newTextInput("filledInBlank") .size("6em", "1.5em") .lines(0) .css({display:"inline",outline:"none",resize:"none",border:0,padding:0,margin:0,"vertical-align":"-.33em","background-color":"yellow","border-bottom":"2px solid black"}) .cssContainer("display","inline") .print() , newFunction( ()=>{ const textinput = document.querySelector("textarea.PennController-filledInBlank"); textinput.before("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad "); textinput.after(" veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."); }).call()
Jeremy
October 11, 2022 at 2:14 pm #9557bta
ParticipantThank you, this worked great!
-
AuthorPosts
- You must be logged in to reply to this topic.