How to override default style

[FaresKi]

Is your feature request related to a problem? Please describe. I'm trying to make my terminal full screen, unlike the way it currently is:

Describe the solution you'd like From a quick glance in your repo, it seems that the style.css limits the width and the height for the terminal itself, I'd like to have the option to provide a css or at least properties with the Terminal component. Describe alternatives you've considered Tried providing my own css, it got overridden by the default one.

[jonmbake]

Terminal width is set to 100% by default. Is the issue only with the height? (Height is set to 600px by default).

[antanasramana]

It is impossible to override height. Is it possible for you to change the default height to 100% so the terminal height would be controlled by the element that contains it?

[jonmbake]

@antanasramana There is not a great way to override the height right now. It would require a small update to make it easier.

[drageelr]

If anyone's still looking for a work around, I solved the problem by using a useEffect hook as follows:

useEffect(() => {
  if (wrapperDiv === undefined) {
    wrapperDiv = document.getElementsByClassName('react-terminal-wrapper')[0];
    wrapperDiv.setAttribute('style', `height: ${HEIGHT};`);
  }
});

However, I think a better solution would be to allow a height prop to be passed to the Terminal component that sets the wrapper-div's height @jonmbake.

[drageelr]

@jonmbake the height prop should be applied to the outermost div (the one who's class is react-terminal-wrapper), not the one inside it I think.

[jonmbake]

@drageelr I basically moved height from the .react-terminal style.css rule to a prop.

It seems to work from my testing:

 <Terminal name='React Terminal UI' colorMode={ colorMode }  onInput={ onInput } height="1000px">
  {lineData}
</Terminal>

Renders a 1000px height terminal:

Can you upgrade to v1.0.1 and try it out?

[drageelr]

Yes, tested it out. It's working. Great job!