There is a third party's page with textboxes that break lines when texts are too long and automatically resize themselves vertically when that happens.
And I created a Chrome Extension that resizes existing textareas horizontally, making them smaller.
Normally, these textareas get resized automatically as one types, but when my code resizes them horizontally, their text might break line, and when that happens they don't resize vertically.
Nevertheless, if I start typing, they will resize normally.
How do I make them resize automatically after my own horizontal resize without having to change their text?
Javascript or Jquery answers are welcome :)
Related
We used to have a silverlight page that used canvas to scale the page, this resulted in a page that would always be the size of the window it was on, making the whole page smaller if the window was smaller (it does preserve aspect ratio), as if the page was a single png but it isn't, it has dynamic elements. Also when one tries to zoom in or out, it does nothing, it just makes a scroll appear to the right and bottom without affecting the page.
We are migrating the page to HTML 5 with CSS, and we haven't been able to replicate this behavior. It is a page that has 10 small tables and each has 10 "messages" that can appear. When zooming in stuff starts to overlap in addition to change size, when resizing the window,stuff overlaps too but without changing size. Most of the positions are absolute but have % in their position onscreen. However we don't want it to be responsive, we want the behavior of the silverlight version. At least that's what the bosses want.
We have been researching how to do this but so far haven't really found a good solution, especially with messing the zoom functionality of browsers. most pages/forums say this shouldn't be done.
Edit:
For now I have added a bunch of max-width and max-height in the html style and body style, as well as added a media query for switching % left to px left for an absolutely positioned group of objects. However this is by no means whay I seek to accomplish. We need the whole page to behave like an bgimage, scaling every element with the size of the window.
After 6 hours of beating my head against a wall...
I have an html form with a series of inputs, arranged in a grid, with enough in each column so that there is overflow on the page and thus a scrollbar. The inputs have tab indexes, so it's like a data entry form. You can enter information into the text inputs and tab. The tab indexes are such that as you tab you go all the way down the first column and then goes to the top of the next column, etc. When you get to the bottom and you tab into an element that is off-screen, the browser repositions so that the element is now in the viewable space.
Here's the problem. Chrome and Edge automatically scroll down a sizable amount when this happens, but FF and IE only scroll a little bit. I want FF and IE to scroll by a larger amount, but I don't know how to control it. Also, when you tab from the last input in a column, which puts you into the top input of the next column, Chrome and Edge scroll all the way up to the top so that the element you just tabbed into is well within the viewable area. FF and IE, though... they don't even manage to scroll all the way up, so the element is either barely in the viewable area or not in the viewable area forcing you to use the scroll bar to finish the job.
It seems like there should be some setting for how much the browser should scroll when it finds itself forced to scroll because you changed focus to an element that is off the screen. I've thought about putting a focus event listener in so that if you begin approaching the edges of visible space as you tab through the inputs, I go ahead and force my own scroll (window.scrollBy(0,50)), but it's just frustrating to think there must be some global scroll amount, or scroll margin, or what have you, that could be set so that all the browsers scroll by the same amount when you tab into (focusin) an element that happens to be outside of the viewable area.
I'd be grateful for any suggestions. I guess if there isn't some kind of css property that handles this on the window or document, then it's a matter of taking over the job of scrolling from the browser and implement it myself in the focus method.
I have a textarea and a div side by side. Both controls are manually resizeable by draging the resize icon in the bottom right hand corner of each.
How do I resize both the textarea and the div when I resize either one of them. I would like to keep both the textarea and the div the same size.
I have searced SO & Google, but was unable to locate anything reated to the issue I have.
Here is a visual representation of what I have:
I have this weird issue with a div1 (let's call it div1) not resizing after using a toggle jquery event to hide another div2 (let's call it div2), unless I resize the windows manually thin gis with just 1 px a manually resize it automatically reasize as supose, above here are some images to understand me better:
this the normal view
here is when I trigger the button to toogle dav little calendar over there (you notice that white space over there? its the size of the div I hide but in the other side.. weird aah?
and here when I resize manually
now the code it's a little to large to post it here or fiddle for what that matters but, all thes is with the library dhtmlxscheduler over here and an used with of this code may be found here
Im having this issue in Extjs grid editing. When I tab from a dropdown editor to a textarea editor, the textarea editor jumps down the screen, away from the cell I should be editing:
I have no idea how to fix this. It only happens 1/2 of the time, so I believe there is some race condition, but Im not sure. Ive spent a lot of time debugging and stepping through the editing code and the textarea starts out in the grid cell, but some event fires or something and it then moves.
I found the problem, but I don't think there is a good solution to it. When I complete the edit by clicking tab, new value is put in the grid cell.
The grid row height might change, which will cause the grid viewport size to change (since i am not using a scroll bar.. the grid height grows and shrinks dynamically).
The grid is in an iframe, and i attached a listener to the grid resize event to change the iframe height to be the size of the grid height, this in turn caused floating elements (such as a cell editor) to be repositioned.
So my problem is that i want the iframe to grow with the grid, which grows and shrinks (by a few pixels) as cells get edited. But this causes the floating element to jump.