Position Checkbox-Input/Label adjacent to text.

[Smokva]

I feel like I should know this, but for the life of me, nothing I do seems to work.
I used the checkbox effect to create a show/hide effect. It works fine. But I cannot position it next to the final text. It automatically appears on a new line.
See: jsfiddle
I would like the “More” + arrow to appear right after the text ‘END OF INTRO’.

I have tried to use span or place it within the paragraph tags, but that stops the effect from working. Even if I place the whole hidden article within the same tags, the show/hide effect does not work.

Any ideas?

Oh… by the way, please view link in Firefox. For some reason, my svg is rendering strangely in Opera and Chrome (centering and forcing the ‘More’ text on new line). And I still haven’t been able to figure out why the %^$&#* its doing that. Firefox is showing it properly.

[Atelierbram]

When making the last paragraph display: inline-block, and remove the width: 100% on the label, this will fix it.

[Atelierbram]

https://codepen.io/atelierbram/pen/VGePxN

[Smokva]

Well… here’s the thing. I think your solution is really good – but it doesn’t work. :(
To be precise, it works in the fiddle but not in my code.
I’m actually not sure where I got the 100% width for the label, because it certainly isn’t anywhere in my original code, so I can only assume it was a leftover from one of the many attempts I made to make it work… although I have no idea why I would think a 100% width would be logical in this case. It may have been an attempt to address the rendering issue in the other browsers where the ‘More’ and the icon show on separate lines…

But back to the original problem. The inline-block is taking affect both on the ‘p’ and the label. And (as per the developer’s tools) the component width of the label is between 51 & 69px (size varies depending on the browser; remember that Opera & Chrome are still stacking the arrow and the text). But I guess my point is that the computed width is constrained enough to allow it to go beside the last line – it has room. But if I run it, it doesn’t work. It still shows on a separate line. And nothing in the computed rules suggest why this is happening. Everything seems fine there.

I scoured through my reset (I use a slightly modified version of Sanitize and Meyer), and nothing in there should be affecting the rendering of the label or the svg. I even tried disabling the

svg:not(:root) {overflow: hidden; }

in case that was causing issues, but no effect. (In fact, I disabled the whole reset, and no change). I even changed the box-model to content-box to see if that would have an effect and nothing.
So it works in the fiddle, but not in the actual code…. but the computed details in the code are identical to those of the fiddle…. geeeeeez!
I even re-wrote this code snippet in Notepad++ and ran it. And it worked. Then I compared every single computed rule/style/component to the existing code, and they all matched!
I am completely at a loss. Any ideas of other properties that could be influencing this? I simply have no idea where else to look.
I keep thinking the fact that Opera’s and Chrome’s vertical rendering of the svg and the text is somehow relevant, but my brain hurts so I am not sure why I think this. Perhaps browser defaults are interfering? I’ve been working on this for the past 4 hours, ever since I read your response, and I’ll keep looking. But if you have any ideas that could point me in the right direction, I would appreciate it.

[Atelierbram]

Other than the things you mentioned above, the SVG – some default or earlier declared style messing with it … I don’t know. Maybe giving the SVG a fixed width and height – like I did in the Codepen. Need to see it in the context that is giving you this headache ;( to make some sense of it …

[Smokva]

Yeah, I tried the fixed width/height, but it didn’t work either. I didn’t really expect it to as it did not have any impact on the fiddle. But I still tried.
And here’s something else that will make you finish that bottle of scotch in no time flat – the first arrow+More is on a separate line, but the second arrow+Less is actually showing up properly next to the last paragraph.
Can you believe it?! And, yup, you guessed it, their specs are identical. And they should be, because I applied the same css to both. In fact, they are on the same bloody line!

But I’m beginning to doubt it has anything to do with the SVGs (although they remain an issue in Opera and Chrome). I have a second article, right below the original one, that follows the same format. In those, I simply used the text ‘More & Less’ without the SVGs. And they are also showing on a separate line. So three out of four of the More/Less are showing on a separate line, while one of them is towing the line. And the same CSS applies to all 4. How does that grab you?

I’m now wondering if the Brackets rendering engine itself is an issue.
So my next step is to try and upload the pages I have and do a ‘live’ debug and see if anything pops out. I simply cannot think of anything else.

I’m also going to mark your response as the ‘Good Answer’ because it is.
It should have worked. There is no reason it shouldn’t other than the fact that my computer is bored and is messing with me.
So thank you. You have helped. It’s not your fault my computer has a twisted sense of humour.

[Author]

Posts