I'm trying to make the height of xtermjs dynamic. I've looked around but the solutions don't seem to solve my issue. I played with CSS but the problem doesn't seem to be there. I'm also using the xterm-addon-fit.
As an example I created this sandbox to show the issue. I've added a dragging pane that has a somewhat hard to see black bar in the bottom. When I drag it, the xtermjs component doesn't resize.
In the image below, the black box with numbers (xterm) should be inside the orange box after we resize the orange box.
I've used a component to make it easier to test, but it happens if we resize the window in other ways.
What am I missing here?
As explained by #jerk, if we fit when the resize happens, it fixes the issue.
This codesandbox with an extra hook makes it work. Although now to test it, you have to drag the console pane up and down instead of using the custom component.
// It resizes xterm when the height changes
useEffect(() => {
fitAddon.fit();
}, [height]);
Notice the auto scroll stops. Depending on the scenario, you might want to scroll to the bottom.
Related
I am trying to create a side panel similar to that of codepen editor in react, where you can drag to adjust the size of the different editors.
If I drag an editor header towards the bottom low enough, the editor below it will follow, almost as if I have appended that component to the drag, likewise if i try ti drag the header upwards. I have built the layout to my liking with a similar concept to the accordion from material UI:
https://mui.com/material-ui/react-accordion/
I was also able to mimic the on click behaviors of the header from codepen, for example, double click would open the editor to full size and triple click will open all evenly by keeping track of the heights of all the 'containers' in a useState hook. However, I am having trouble with the dragging part. I am looking for some suggestions for good libraries/ideas to use to help me achieve this.
Currently I am using framer motion to make the expanding of the container more 'smooth'.
https://www.framer.com/docs/transition/
I noticed that they also have dragging capabilities which I am also exploring. My idea is to have an onDrag for each of the headers. Depending on which header I am dragging, if I drag down until my container size is 0, I start shrinking the container below it and then the one below it and so on and so forth. I am able to get the Y property from the onDrag function but I am a bit hesitant to do my calculations in x/y coordinates. Does anyone have any suggestions or any libraries that might make this easier?
I don’t know any libraries. I think if you got this far you can probably do it yourself in plain js, using listeners and selectors, etc, or whatever react can provide. Is there something specific that makes you ‘hesitant’? I recently found these which made things easier for me, they might not be 100% relevant but still good to know: getBoundingClientRect
https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
That will tell the position relative to the viewport, it was useful for me dragging dividers between panels.
And if you need the position relative to the container:
https://stackoverflow.com/a/11634823/5350539
And if you’re not already, I guess you could look at setting the panel CSS positions using ‘bottom’ (with position absolute or relative), then animating the height to e.g. 30px less than the bottom edge of the upper panel. Tip: while dragging, add a body class to disable user select: user-select: none;
I have a table with all the bells and whistles that react-table has to offer, but one of the requirements I have is to add infinite-scroll-like behaviour to the table and I saw the Virtual Rows example that certainly solves my problem. Unfortunately the styling is not as easy to implement as I thought.
I have a fork of the mentioned example where I am trying to make it work inside a smaller wrapper div... What I have works but is not good UX since the user cant see the position of the scroll until scroll horizontally to the right
See "working" example here
Ideally I will have the scroll bar outside next to the body of the table like the photoshoped image below
But all my attempts to make this work have fail.
I'm trying to build a similar demo to one of the examples
https://codesandbox.io/embed/r3f-moksha-f1ixt
My problem is as I start using a scroll area, all the pointer events are grabbed by the scroll area and the canvas doesn't receives them anymore, I tried using pointer-events: none but this disables the scroll event as well. I feel like I'm missing something obvious, but I don't know whats the best way to keep the scrolling behavior while having the onClick,onPointerOver,...etc working on my mesh
A sandbox with my setup.
https://codesandbox.io/s/react-three-fiber-pointer-events-z429y
I'm working on a user interface based largely on flexbox, that can basically be broken down into a content area and a sidebar which can be toggled (its width is changed by adding/removing a class).
When the sidebar is toggled, the content area is manually resized through javascript. It contains an svg canvas which needs to be redrawn, so this cannot be done through CSS. Chrome handles this code perfectly.
Firefox and Safari, however, behave very strangely, and interestingly not in the same way.
I was able to reproduce the behavior in a fiddle: http://jsfiddle.net/q1yp6ssw/21/
It also happens with a regular <div>, it's not just <svg> as you can see here: http://jsfiddle.net/mqok5exb/2/
toggleSidebar() calls the function resizeSvg() which resizes the "svg" element using the size of its parent.
function resizeSvg() {
var width = $svg.parent()[0].offsetWidth;
$svg.attr('width', width);
$svg.find('text')[0].textContent = 'width: ' + width;
}
If you're testing these fiddles in Firefox, you'll notice that the content area resizes too early, and becomes larger than it should be, pushing the sidebar outside the container's original dimensions. Using setTimeout to delay the resize did not work.
It seems to be a problem with timing and when each browser renders the updated size of the parent element. The behavior is the same without the transition, so that's not the problem.
My question: What is causing this and how do I fix it, or at the very least find a usable workaround? If it turns out to be a flexbox problem, then flexbox can be replaced.
Thanks!
I know this is old, but I'm trying to do something similar and in my case changing width with javascript (angular) results in 50px lower than calculated width.
If you want to set exact value for flex you should set both width and min-width with your javascript code.
here is a code which solve my problem:
el.style.width=String(newWidth)+'px';
el.style.minWidth=String(newWidth)+'px';
I use TimelineSetter Plugin from GitHub Repo.
The problem is that when a TS-item is bigger than the half of the Timeline the plugin does not know where to put the activate card thus it is hidden because it is getting outside of the timeline. The good thing is that when you zoom and the size of the Card(TS-item) is less than half the size of the timeline everything works ok.
An example of the above problem is illustrated in this jsFiddle repository:
Example 1
I tried to fixed the problem and I made the size of the card the same size of the timeline and when the cards are moved I do not move the card but the arrow of the card. Unfortunately, This introduces other problems with the Zoom functionality.
Working demo: Problem with Zoom
Can someone point me to the right direction on how I can fix this?
I didnt look at the code to much, but it seems to me that the problem is that the card gets to much of a "left:" css property.
Try taking out the left: and just moving the yellow arrow that points to the timeline section.