Hi How to reduce the height of the textbox...
HTML CODE:
<textarea id="" name="" placeholder=""></textarea>
#pageID div textarea.ui-input-text {height: 20px;}
Using rows attribute you can change the number of lines in your textarea, not exactly the height property (that is specified in pixels), but I think rows is what you want. Example with 20 lines of height:
<textarea id="" rows="20" name="" placeholder=""></textarea>
In the same manner there's a cols attribute to specify the width of the textarea in characters.
For textarea use rows "or and" cols and set the value that you want,
for normal textbox you can set a style for it as style="height:20px;"
By using CSS you can adjust the height of <textarea>
First, put some name on your id
<textarea id="box" name="" placeholder=""></textarea>
Then, your desired height in px
#box {
height:10px; /* example */
}
See here.
Related
How can I make one div to take certain percent of parent space verically?See the code below:
<div layout="column">
<div id="div1" flex="70%"></div>
<div id="div2" flex="30%"></div>
</div>
I want to make div1 70% height and div2 30% height of parent div. But it does not work. Div 1 and div 2 collapsed. But if the parent layout is row, it works fine---div1 takes 70% percent space horizontally.
I think you need to make the following modifications:
Specify a "height" to your outside div. This could be a percentage or pixels.
Do not use the % sign with the flex attribute
See this codepen: http://codepen.io/sebastiengiroux/pen/jPovxG
<div layout="column" style="height: 100%;">
<div id="div1" flex="70" style="background-color:red;"></div>
<div id="div2" flex="30" style="background-color:blue;"></div>
</div>
If you look into Layout docs https://material.angularjs.org/latest/layout/introduction
there is this statement that I think is relevant to your problem.
The flex attribute value is restricted to 33, 66, and multiples of five.
For example: flex="5", flex="20", flex="33", flex="50", flex="66", flex="75", ....
So I guess if you use allowed values, you can achieve results that you need. For example using 66 and 33.
So i have this div containing a contact script:
<div id="contactbox" style="">
<form enctype="multipart/form-data" method="post" action="http://www.response-o-
matic.com/mail.php" accept-charset="UTF-8">here's the script</form>
</div>
</div>
I'm wondering if there is any way to align a script after the wrapper size for every resolution.Because i set the position of the script in percentage and on my resolution it looks centered in wrapper.But on a bigger resolution for example it's not working,it's a little bit in left side,that means the script goes after the html size because it focuses after it and it goes in the middle.
I know that if i set the wrapper with:
.wrapper
{
text-align:center;
}
then every texts from the wrapper will be centered after his size,but with scripts isnt working.So is there any way?
In a document like:
<p class="wrapper">
<span class="ref">
<span class="text">English</span>
</p>
the following rules are applied:
.wrapper {
background:green;
position:relative;
padding-left:20px;
font-family:Times;
}
.text {
line-height:1;
background:blue;
font-size:80px;
}
.ref {
position:absolute;
left:5px;
width:10px;
height:80px;
background:black;
}
In Chrome (Version 22.0.1229.79) or IE9, the background of the span element containing 'English' seems to have a height larger than font-size, yet in Firefox (13.0.1) the height equals font-size. (See the output)
Can anybody explain this?
I thought the height of the content area would have the same value as specified by font-size.
Here's a diagram showing the various reference lines available when rendering text:
As you can see, there are many choices. It seems like Firefox is using a different baseline than Chrome/IE when rendering.
I'm using a <div data-role='fieldcontain'> to make a "box" where there are two fields "min" and "max" the problem is that I want to have two parts in the same line, but jquery mobile separes in two lines if display width is smaller than size jquery wants. I try to put width of two components, but it still separes in two lines and the label and text box are smaller than half display...
this is my code:
<div data-role='fieldcontain' id='TempLimits'>
<label for='Tmin' style='display-inline;width:100;'>Min
<input type='text' name='Tmin' id='Tmin' value='50' disabled='disabled' style='display:inline;width:50px;'/></div>
Thanks,
This is the solution I found:
<div data-role='fieldcontain' id='TempLimits'>
<label for='Tmin' style='display-inline;width:100;'>Min
<input type='text' name='Tmin' id='Tmin' value='50' disabled='disabled' style='display:inline-block;width:50px;'/></div>
Using iOS 4.2.1 on iPad/iPhone, when I view a specific web page with type="number" for a text field, the text input space is slightly shorter than when it's type="text". And when I enter 3 digits, the first one gets cutoff, while it does not get cutoff with type="text". This problem does not happen on iOS 3.x on iPad/iPhone. The input field input area is identical, and it works fine.
Has anyone noticed this problem? Is there anything I can do to fix it? Thanks.
It's probably to do with the device browser's default style sheet. If you just apply styles the same styles to the text and number input fields it should render the same.
input[type=text], input[type=number] {
width: 100px;
padding: 1px 0;
...etc...
}
You need to set the unit when styling width and height.
<input syle="width: 45px; padding: 1px 0;" name="mname" type="text" value="" autofocus />
or preferred:
input[type=number] {
width: 45px;
}