github-starred/proton-native

Fork 0

mirror of https://github.com/kusti8/proton-native.git synced 2026-05-15 22:02:24 -06:00

[GH-ISSUE #8] Window size not working properly #6

New issue

Closed

opened 2026-05-05 11:22:27 -06:00 by gitea-mirror · 9 comments

gitea-mirror commented

2026-05-05 11:22:27 -06:00

Owner

Originally created by @zaguiini on GitHub (Feb 17, 2018).
Original GitHub issue: https://github.com/kusti8/proton-native/issues/8

Hi! Awesome library!

I don't know how the libui-node works properly, so please help.

If I render a <Window /> element on the tree, without any children, the Window get the right size. But, as soon as I insert the children, the window fits to the children and ignore the specified width and height. Is it expected?

Also, it looks like updating the height of the window via state doesn't work as well. My code is the following:

import React, { Component } from 'react'

import { render, Window, App, Button } from 'proton-native'

class Example extends Component {
  state = {
    height: 300,
  }

  componentWillMount() {
    this.handleResize = this._handleResize.bind(this)
  }

  _handleResize() {
    this.setState({
      height: 400,
    })
  }

  render() {
    console.log(this.state.height)

    return (
      <App>
        <Window
          title="Example"
          margined
          size={{
            w: 300,
            h: this.state.height
          }}
        >
          <Button onClicked={this.handleResize}>
            Change my size!
          </Button>
        </Window>
      </App>
    )
  }
}

render(<Example />)

Originally created by @zaguiini on GitHub (Feb 17, 2018). Original GitHub issue: https://github.com/kusti8/proton-native/issues/8 Hi! Awesome library! I don't know how the `libui-node` works properly, so please help. If I render a `<Window />` element on the tree, without any children, the `Window` get the right size. But, as soon as I insert the children, the window fits to the children and ignore the specified width and height. Is it expected? Also, it looks like updating the `height` of the window via state doesn't work as well. My code is the following: ```js import React, { Component } from 'react' import { render, Window, App, Button } from 'proton-native' class Example extends Component { state = { height: 300, } componentWillMount() { this.handleResize = this._handleResize.bind(this) } _handleResize() { this.setState({ height: 400, }) } render() { console.log(this.state.height) return ( <App> <Window title="Example" margined size={{ w: 300, h: this.state.height }} > <Button onClicked={this.handleResize}> Change my size! </Button> </Window> </App> ) } } render(<Example />) ```

gitea-mirror closed this issue

2026-05-05 11:22:29 -06:00

gitea-mirror commented

2026-05-05 11:22:32 -06:00

Author

Owner

@kusti8 commented on GitHub (Feb 19, 2018):

Is this on Mac?

@kusti8 commented on GitHub (Feb 19, 2018): Is this on Mac?

gitea-mirror commented

2026-05-05 11:22:35 -06:00

Author

Owner

@zaguiini commented on GitHub (Feb 19, 2018):

Yes.

@zaguiini commented on GitHub (Feb 19, 2018): Yes.

gitea-mirror commented

2026-05-05 11:22:38 -06:00

Author

Owner

@kusti8 commented on GitHub (Feb 19, 2018):

I think that's just how Mac works. I don't think it has stretchy components. There's nothing I can do about that.

@kusti8 commented on GitHub (Feb 19, 2018): I think that's just how Mac works. I don't think it has stretchy components. There's nothing I can do about that.

gitea-mirror commented

2026-05-05 11:22:40 -06:00

Author

Owner

@zaguiini commented on GitHub (Feb 19, 2018):

But I don't want stretchy components... I want the Window to be with the size I defined, and that's not what's happening.

@zaguiini commented on GitHub (Feb 19, 2018): But I don't want stretchy components... I want the Window to be with the size I defined, and that's not what's happening.

gitea-mirror commented

2026-05-05 11:22:42 -06:00

Author

Owner

@kusti8 commented on GitHub (Feb 19, 2018):

Try adding a box and then the button inside the box.

@kusti8 commented on GitHub (Feb 19, 2018): Try adding a box and then the button inside the box.

gitea-mirror commented

2026-05-05 11:22:44 -06:00

Author

Owner

@andlabs commented on GitHub (Feb 19, 2018):

Yes, buttons on macOS have a fixed height, and by default are programmed to resist growing vertically. Sorry about that. If you set the contentHuggingPriority in NSUserInterfaceLayoutOrientationVertical to NSLayoutPriorityDefaultLow you'll be able to grow the window vertically, but the button will stay somewhat centered in the window; it won't grow vertically (and that's a thing with AppKit that I can't do anything about).

@andlabs commented on GitHub (Feb 19, 2018): Yes, buttons on macOS have a fixed height, and by default are programmed to resist growing vertically. Sorry about that. If you set the `contentHuggingPriority` in `NSUserInterfaceLayoutOrientationVertical` to `NSLayoutPriorityDefaultLow` you'll be able to grow the window vertically, but the button will stay somewhat centered in the window; it won't grow vertically (and that's a thing with AppKit that I can't do anything about).

gitea-mirror commented

2026-05-05 11:22:45 -06:00

Author

Owner

@montanaflynn commented on GitHub (May 2, 2018):

I think this should be opened back up, it certainly seems like a bug when it happens. If it really can't be fixed then a note should be put in the docs.

@montanaflynn commented on GitHub (May 2, 2018): I think this should be opened back up, it certainly seems like a bug when it happens. If it really can't be fixed then a note should be put in the docs.

gitea-mirror commented

2026-05-05 11:22:47 -06:00

Author

Owner

@andlabs commented on GitHub (May 2, 2018):

There are a lot of other issues with resizing on Mac that I need to fix as well (and these are issues on my end due to probably not using Auto Layout correctly), so the answer to these questions will likely be a case-by-case thing until I fix them.

@andlabs commented on GitHub (May 2, 2018): There are a lot of other issues with resizing on Mac that I need to fix as well (and these are issues on my end due to probably not using Auto Layout correctly), so the answer to these questions will likely be a case-by-case thing until I fix them.

gitea-mirror commented

2026-05-05 11:22:50 -06:00

Author

Owner

@KirankumarDafda commented on GitHub (Dec 5, 2018):

@zaguiini I was also looking for the same and found that adding box tag inside the window component will render the screen exact as the same size of given height and width of window.

import { render, Window, App, Button, Box } from 'proton-native'

return (
      <App>
        <Window
          title="Example"
          margined
          size={{
            w: 300,
            h: this.state.height
          }}
        >
          <Box>
               <Button onClicked={this.handleResize}>
                    Change my size!
               </Button>
          </Box>
        </Window>
      </App>
    )

@KirankumarDafda commented on GitHub (Dec 5, 2018): @zaguiini I was also looking for the same and found that adding box tag inside the window component will render the screen exact as the same size of given height and width of window. ```javascript import { render, Window, App, Button, Box } from 'proton-native' return ( <App> <Window title="Example" margined size={{ w: 300, h: this.state.height }} > <Box> <Button onClicked={this.handleResize}> Change my size! </Button> </Box> </Window> </App> ) ```