cssContainer, inline display, and before/after text

This topic has 2 replies, 2 voices, and was last updated 3 years, 1 month ago by bta.

Viewing 3 posts - 1 through 3 (of 3 total)

Author

Posts
October 7, 2022 at 1:55 pm #9543

bta
Participant

I’m having trouble getting the textbox of a TextInput to display inline with the Text 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 key divs are specified as display: 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 #9551
Jeremy
Keymaster
Hi,

In order to really get an uninterrupted flow, you need to have simple text nodes surrounding the textarea node, and have both the textarea and its container’s display style set to inline. You won’t be able to achieve that by only PennController’s print (or before/after) command on Text elements, since it introduces embedded nodes

However, you can use the javascript functions after and before to insert simple text nodes around the textarea 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 #9557

bta
Participant

Thank you, this worked great!
Author

Posts

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.