[SOLVED]How to make a text field responsive?

HTML-CSS
1

I’m working on my markdown previewer and want to make responsive text field entry area as well as the display area. Reading CSS documentation I cant figure out how to make a text field responsive.

In this forum when you post a reply or write a new post, there is the basic functionalit of the markdown previewer as well as it being responsive.

I have looked at the CSS and can’t figure out the tricks. Any suggestions?

2

Um, your code monsieur?

3

I think you may be looking at font’s em

4

There’s not much here.

I can hardcode the cols for the text area, but then it’s a fixed size. If I don’t add the cols, it’s tiny. It doesn’t seem to work to put in a %age or pixel width.

5

not the text, the “textarea” like this:

<div className="col-md-6"><textarea >{marked('I am using __markdown__.')}</textarea></div>

6

ANSWER:

put the text area inside the div, make the div responsive & the width you want it, and make the text area 100% of the div.

See link above for the solution I used.

1 Like
7

Well, when the bootstrap form form-control css doesn’t work , I just add the fallowing in my style tag on my page:

textarea {	
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;	
    width: 100%;
    }

That is how I got a textarea to be responsive in a div. Also, keep in mind to use “px” units only where you would need to (like declaring the height of an iframe), Use “em” units for margins, padding, etc.

1 Like
8

This solution worked for me. I just added the width: 100% and that did the magic. Thanks