How to change the dimension rate.

[wahello]

The container is 700*950, the addon fit make the div like <div class="xterm-screen" style="width: 720px; height: 510px;"> , the height just only 510px;

How to make the xterm to fit the container

Details

• Browser and browser version: 114.0.5735.198
• OS version: 13.4 (22F66)
• xterm.js version: 5.2.1
• xterm-addon-fit version : 0.7.0

Steps to reproduce

1. set container is 700*950

[wahello]

The above is the output.

[jerch]

Your issue description lacks context information, thus it is impossible to see, whats wrong here.

My best guess here - do you call the fit function of the fit addon anywhere? The addon does not actively observe container resizing, you have to call the fit function yourself on resizing.

[wahello]

I put xterm in react project.
react version: 18.2.0,
Contained in a antd component , antd version is : 5.6.1

import React, { PureComponent } from 'react';

class AssetAction extends PureComponent {
  xtermRef = React.createRef();

  constructor(props) {
    super(props);

    this.fitAddon = new FitAddon();
  }

  componentDidMount() {
    this.doRequest();

    let term = new Terminal({
      fontFamily: 'monaco, Consolas, "Lucida Console", monospace',
      fontSize: 15,
      cursorStyle: 'bar',
      cursorBlink: true,
      theme: {
        foreground: 'lightGreen',
        background: '#1b1b1b',
      },
      rightClickSelectsWord: true,
    });

    term.open(this.xtermRef.current);
    term.loadAddon(this.fitAddon);
    this.fitAddon.fit();

  }

  render() {

    return (
      <div
        style={{
          width: '100%',
          height: '100%',
        }}
      >
        <div
          ref={this.xtermRef}
          id="xterm"
          style={{
            width: '100%',
            height: '100%',
            backgroundColor: '#1b1b1b',
          }}
        /> 
      </div>
    );
  }
}

And render in some other component by following:

import {
  Drawer,
} from 'antd';

renderAssetAction() {
    const { actionVisible, action } = this.state;
    return (
      <Drawer
        width={750}
        open={actionVisible}
        onClose={() => {
          this.setState({ actionVisible: false });
        }}
      >
        {actionVisible ? <AssetAction /> : null}
      </Drawer>
    );
  }

[jerch]

Maybe check out https://github.com/robert-harbison/xterm-for-react to see how to do it in react.

From the screenshot it looks like you want to edit resources in the terminal. Is that PTY-backed or is this just for browser-side resource editing? Because the latter is much more cumbersome to achieve with a naked terminal (you'd have to emulate parts of the PTY and write your own cmdline editor on top), with a JS editor component you get much faster to a working result.

[ballyalley-o]

by default it should be automatically set to whatever the size of the container, try to go to your css and set the height to auto.