Link to home
Start Free TrialLog in
Avatar of Eduardo Fuerte
Eduardo FuerteFlag for Brazil

asked on

Could you point how to make the Bootstrap text control to work as a text area with no limit to the total characters inserted?

Hi Experts

Could you point how to make the Bootstrap text control to work as a text area with no limit to the total characters inserted?

Actual the control:
User generated image
Code:
<div class="col-xs-12 mb20">
	<label for="parecer" class="field-label text-muted mb10">Parecer de Qualidade</label>
	<div class="input-group">
		<span class="input-group-addon">
			<i class="fa fa-pencil c-gray"></i>
		</span>
		<span class="validar">
			<input type="text" name="parecer" id="parecer" class="form-control gui-input br-light light" placeholder="">
		</span>
	</div>
</div>

Open in new window


Needed control  (text with a lateral bar):
User generated image
Thanks in advance
Avatar of Marco Gasi
Marco Gasi
Flag of Spain image

Hi Eduardo. Can I ask... why? What is the advantage to use an element as it were another?
Avatar of Eduardo Fuerte

ASKER

Hi Marco

The user must to edit a text greater than 255 chars and need to move in the text by using the scroll bar....

In the meanwhile what I did is:
<div class="col-xs-12 mb20">
	<label for="parecer" class="field-label text-muted mb10">Parecer de Qualidade</label>
	<div class="input-group">
		<span class="input-group-addon">
			<i class="fa fa-pencil c-gray"></i>
		</span>
		<span class="validar">
			<!--input type="text" name="parecer" id="parecer" class="form-control gui-input br-light light" placeholder=""-->
			<textarea rows="15" cols="80" name="parecer" id="parecer" style="max-height:100px;min-height:100px; resize: none"></textarea>
		</span>
	</div>
</div>

Open in new window


User generated image
I don't know this is the better way (80 cols is a estimated value to aproximatelly fits the width)...
You can also set the text area width using standard CSS. Forgive me, but I'm missing the problem...
Yes.

I applyed this CSS
#parecer{
	font-size: 14px;
	font-weight: normal;
	resize: none;
	overflow-y: scroll;
}

Open in new window


Clearing my doubt:

I don't know it the way I adapt the control

<span class="validar">
			<textarea rows="15" cols="80" name="parecer" id="parecer" style="max-height:100px;min-height:100px; resize: none"></textarea>
		</span>

Open in new window



By using cols="80"   - just to visually fit the necessary width is the correct way when using Bootstrap....
Actually, using rows and cold to set text area dimension is the old style, we could say. Nowadays, Bootstrap or not Bootstrap, we can just set directly width and height properties in our CSS. And we can use not only pixels, but even percentage values if we want it to be responsive.
So, I guess now it's more responsive:

#parecer{
	font-size: 14px;
	font-weight: normal;
	resize: none;
	overflow-y: scroll;
	height: 10%;
	width: 100%;
}

Open in new window


and:

<span class="validar">
	<textarea name="parecer" id="parecer" style="max-height:100px;min-height:100px; resize: none"></textarea>
</span>

Open in new window



I guess this part
style="max-height:100px;min-height:100px; resize: none"

Is not more necessary... isn't it?
ASKER CERTIFIED SOLUTION
Avatar of Marco Gasi
Marco Gasi
Flag of Spain image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Hi Marco

So I changed it to.

    #parecer,#comentarios{
        font-size: 14px;
        font-weight: normal;
        resize: none;
        overflow-y: scroll;
        height: 100px;
        width: 700px;
    }

Open in new window


For me it seens more intuitive to use percentage than pixels....
For width percentage are OK, only for height you must use pixels or em
Thank you for the help!
Hi Eduardo. Sorry if I have been concise but I always was on my mobile and I'm not so comfortable with that small keyboard :)
Hope your textarea looks good!
No problems...

Looks good and works!

  #parecer,#comentarios{
        font-size: 14px;
        font-weight: normal;
        resize: none;
        overflow-y: scroll;
        height: 100px;
        width: 	100%;
    }

Open in new window


User generated image