Styling feedback

[LB]

I was wondering if I could get some feedback on the early phases of this project:

http://www.LB-Stuff.com/Temp/code

Submitting the form doesn't actually do anything; right now I'm just working on the styling. What do you think?

The main issue is getting the text inputs to look nice. If you look at the HTML and CSS you'll see I went through a bit of trouble because just styling the text area itself causes the text to be clipped. Is there a better way to achieve the same effect?

[LB]

I've spent several more hours working on this. I figured out a good way to do the line numbers, and I made the inputs resize instantly as you type. I'm still not happy with the way the inputs have to be, but they're considered replaced elements and so have special freedoms and restrictions. Also, you should be able to select and copy the code without copying the line numbers (even though it looks like they're selected).

How it renders for me in Chrome:
https://i.imgur.com/33wuVhC.png

[S G H]

Opera Mini for Android: Works overall.
Page isn't scrollable on the X axis but the width is enough.
Selection includes line numbers.
Better than many websites (Some have a huge page so I have to zoom in the topleft corner, some content is cut off and can't be read or selected...)

[Lachlan Easton]

What is this project? I don't know what I'm meant to give feedback for. At this stage I don't see anything broken (it displays pretty much what you gave for your chrome example). But is it meant to do anything?

[LB]

@SGH: Ah, I need to learn how to design pages to be mobile-friendly.

@Lacklan Easton: If nothing is broken, then what do you think of the way it looks?

[Duthomhas]

I like it.

I would try to add a little extra vertical spacing between lines of text so you don't get overlap on input boxes -- which makes it a bit more difficult to select the one you really want.

[LB]

@Duoas: yeah, I'm still thinking about what to do with the input boxes. My options are pretty limited since they count as replaced elements and browsers typically have free reign over how the input boxes look and behave; the fact that I can customize the border and background is quite appreciated. If I can't make the input boxes behave I will increase the line spacing.

[megatron 0]

No one has mentioned this yet so I don't know if it's Firefox, but the input text is a different font to the others?

EDIT: After another look the font is the same, but the color isn't as dark as the static text.

EDIT 2: Also very long input that spans the page gets put onto a newline, perhaps consider using a margin type thing?

[LB]

Ah, I'll see if specifying the color in the CSS helps - it's probably using a default color that happens to not be black.

I don't think there's anything to be done about the long input boxes - if I wanted to do anything reasonable I would need to find some JS library that implements a custom input box instead of using the <input type="text"> kind.