I am creating a text area field in Angular4/Bootstrap3 to be run on IE11.
The text area will be pre-filled with some text
<textarea [value]="mydata" class="form-control" rows="5"></textarea>
This works the way one would expect it to. 5 rows are shown and if text exceeds what can be fitted into 5 rows, a scrollbar is displayed. If text is less than empty space is displayed in the text area.
What I am trying to achieve is little different than the default behavior. I would like the textarea to be resizable but the size should not exceed certain number of rows. Lets say the max size is set to 5 rows.
So, if the text to be displayed can be fitted in 1 row, then text area only shows 1 row. If it can be fitted in 4 rows it expands to 4 rows. If it can be fitted in 10 rows, then it expands up to 5 rows and shows a scrollbar for the remaining text.
Is such kind of behaviour possible? I have used rows as an example, but if it can be achieved with height property or something else, I am fine with that as well.
You can achieve this with a little CSS, and using the max-height property:
textarea {
overflow-y:scroll
max-height:100px; /* change to a height you see fit */
}
By not setting a default height, the text area will be high enough for any content less than your max-height, and when it hits it, it'll start scrolling.
Also, remove the rows attribute from your textarea.
Related
I try to create responsive HTML elements whenever the browser width is wide enough, it fills with 3 horizontal box elements whose content can be text or an image. When text content doesn't fill the whole box, it leaves some empty space so that it doesn't wrapped around the box.
However the text content can fill the box. Whether the box is filled or not, it should have same dimension unless the browser dimension changes.
When browser dimension is widening, the 3 elements should stay with the original dimension. But when it is narrowing, the 3 horizontal elements can reduce to 2 horizontal elements, leaving the other element to new space. And it can be 1 horizontal element if the browser space is narrow enough.
There can be many 3 horizontal elements, like this:
X X X
X X X
X X X
They're stacked like a table.
When the content is an image, its size must comply to the box dimension not the other way around, so it shrinks when the original image is bigger than the box or stretch when the image is smaller.
so far this is what I have
my JSFiddle link
The code above have a responsive horizontal box. Also the picture doesn't comply to the box but vice versa.
Please advice.
Responsive design won't be obtained by using Width and height elements.
Try setting these to Min-height / Max-height etc..
Also if you really want to keep it responsive then you should just install the bootstrap framework and use
col-md-4 to achieve this much easier without having to worry about css styling etc..
I have a bunch of data input screens and they all use a basic table filled with asp.net textboxes. Some of the textboxes (the smallest ones) are set to 250px in width. The others have been set a width in px depending on what makes them align best at 100% zoom.
The issue is when you zoom in and out, it's clear that the boxes don't really line up on the far right.
Can anyone suggest a way to properly align these last columns. It's worth noting that for some reason when using 100% in the last column that it busts outside of the actual table a certain way for unknown reasons.
The columns with the larger textboxes are defined using colspan of 2 or 3.
The boxes at 100%
The boxes at 75%
I tried it in different browsers,but it seems to be not working.If I change the number(min-height),then beyond 50 it works and below 50 with any range of values it stays at the same height.So,is there any way to keep min-height of a textarea below 50,say at 10px?
<textarea style="width:700px;resize:none;min-height:10px;"></textarea>
<textarea style="width:700px;resize:none;height:10px;"></textarea>
That is related with the default value of the attribute rows in the text area!
The default is 2 according to http://www.w3schools.com/tags/att_textarea_rows.asp.
So try to change it to 1 an play with the height attribute a little.
If you want your textarea even littler that 1 row size, then adjust your text area style in css "line-height".
The min-height property sets the minimum height of an element, as its name suggest. This means a height that is used unless nothing requires a larger height. For a textarea element, the default height is determined by the number of rows (specified by the rows attribute, which is defaulted to 2 by browser practice and by HTML5 CR) and by browsers’ calculation of line height.
Thus, you can set min-height even to 10px, and it works as defined – the actual height is larger, but that follows from the definition.
To set the height, you would use the height property, as in your example, and/or the rows attribute, which indirectly sets the height. As usual, it sets the content height. The total height of a textarea box is content height plus top padding plus bottom padding plus top border plus bottom border.
It is difficult to imagine a situation where it would make sense to set textarea height to 10px, which is not enough for even one line of text in a size that is legible to most human beings. Moreover, if you really want to have an input box that is one line tall and is not resizable, an input type=text element would be a much more practical and much more logical choice than textarea.
I have been trying to lay out a table with the following:
two or three columns that automatically size to fit the content in them
anywhere from 1 to 4 columns that resize according to the width of the table, and which truncate the text inside them
one column that contains three buttons and which I want to be exactly 220 pixels wide
I got it pretty much working thanks to the answers on this question. I set "min-width" on the first two or three columns, and "width" on the last column, and in the middle columns I wrap the text in a div, and then set "max-width" on the td and on the div I set width: 100%;text-overflow: ellipsis; white-space: nowrap; overflow: hidden;. All that works fine on Chrome and Firefox and Safari and even IE 10.
The problem happens on IE7, 8, and 9. On all three "browsers", the middle divs don't truncate, they instead push out the width of columns to fit all the text, which blows out the table wider than the page.
I tried putting a table-layout: fixed; on the table on IE, but instead of getting what I expected or indeed anything sane at all, instead what I get is that all the columns are given the same width, ignoring the "width: 220px" on the last column's tds, and then after everything is laid out the last column expands to 220px, and blows out the table. If you don't understand what I'm saying, have a look at
http://jsfiddle.net/ptomblin/rHJk9/
in IE debugger or "Inspect Element" in Chrome or Firefox. If you look at the "Layout" of a td of last column, and it shows a small width same as all the other columns, even though the contents are 220px wide.
On the live site, putting the "ie8" class on the body is done using conditional <IF IE8> code, but jsfiddle doesn't seem to like that.
What I'm looking for is either a way to make the table work the same way on IE7-9 as it does on real browsers (without table-layout:fixed) or some "good enough" work-around that would at least fit on the screen, with or without table-layout:fixed.
http://imgur.com/44DeZv5 has a screen shot showing it on IE9. I've added a red line to show the actual edge of the table. Note how the button bar, which is in a td in that table, extends beyond not just the table, but beyond the actual screen width. (The browser is set to 1024x768, the table is inside a .content div that's 940 pixels wide)
http://imgur.com/0Zielaf is what it looks like in IE9 when you don't have the "table-layout: fixed"
http://imgur.com/K8Ob6VR is what it looks like on Chrome without the "table-layout: fixed". Note how it all fits on the screen and in the table. That's what I'm aiming for.
I found out what the problem was that caused table-layout: fixed to allocate all the columns exactly the same width, no matter what the width parameter on the actual column values: It was happening because the first row on the table had a single column with colspan="7". I figured it out because on W3Schools in the description of table-layout: fixed they mentioned:
The browser can begin to display the table once the first row has been received
which made me realize that it was probably only looking at the first row. I stuck in a dummy first row with empty columns, but with the appropriate classes on each one to give them appropriate widths, and it laid them out much better. (I also set the font size, height, and line-height, top and bottom margins and padding to 0 for this dummy row so it isn't distracting)
I have a peculiar math problem. I am developing a hybrid mobile app using HTML/CSS/JS that will support multiple devices. for this reason I have not specified the input box width.
Now I need to truncate the text in the input box but since the width is not specified I cannot compare the length of the text field to a hardcoded value. I can however get the length of the input box (in px) and the font size i use is fixed (10 px)
Is there a way I can calculate how many 14px font size character can fit in a Xpx by Ypx input box?
The way I've achieved this in the past may not be efficient but it does the trick (just about).
The key here is to clone your text and start making alterations to it. You can, with javascript do this cloning on the fly. Put it in an invisible div off the page, and then break the text in to single character chunks. Each of these characters can then be wrapped in a span.
The next step is then to ensure you know your input box's width, and start adding up the widths of your spans, starting from the front. This should just be a case of getting all of the span elements in your custom "off screen" div and iterating through them.
Once you hit the magic width number (or go over it) you know that the number of characters from your word that you can have in the box.
There is a slight quirk with what you're describing, of course, and that is that you may also need to work out how many "lines" of text you can fit in the box, and amend your "total width" accordingly (if you have 1 line that is 100px wide, your max width would be 100px, but if it's 3 lines deep, the max width would be 300px).
As I say though, this may not be efficient processor usage...but it is a solution, and it doesn't require your font to be a certain size or type.