# Setting height and width of container

**URL:** <https://phaser.discourse.group/t/setting-height-and-width-of-container/11523>\
**Category:** Phaser 3\
**Created:** [April 11, 2022, 5:36pm UTC](https://phaser.discourse.group/t/setting-height-and-width-of-container/11523 "2022-04-11T17:36:37Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![jason-allen-oneal](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/jason-allen-oneal/32/6413_2.png) [@jason-allen-oneal](https://phaser.discourse.group/u/jason-allen-oneal)\
**Post date:** [April 11, 2022, 5:36pm UTC](https://phaser.discourse.group/t/setting-height-and-width-of-container/11523/1 "2022-04-11T17:36:37Z")

</div>

I have a button class that creates text inside of a rectangle inside of a container:

```javascript
class MenuButton extends Phaser.GameObjects.Container {
		constructor(scene, text, style, callback) {
			super(scene, 0, 0);
			
			if(style.hasOwnProperty("text")){
				if(!style.text.hasOwnProperty('boundsAlignH')){
					style.text.boundsAlignH = 'center';
				}
				if(!style.text.hasOwnProperty('boundsAlignV')){
					style.text.boundsAlignV = 'middle';
				}
			}
			
			this.style = style;
			
			var textElement = scene.add.text(scene, 0, 0, text, style.text);
			this.rectangle = scene.add.rectangle(0, 0, textElement.displayWidth, textElement.displayHeight, style.button);
			
			this.add([this.rectangle, textElement]);
			this.setPosition(0, 0).setSize(textElement.displayWidth+5, textElement.displayHeight+5).setInteractive({ useHandCursor: true })
				.on('pointerover', () => this.hoverState())
				.on('pointerout', () => this.readyState())
				.on('pointerdown', () => this.activeState())
				.on('pointerup', () => {
					this.hoverState();
					callback();
				});
			console.log('this', this);
		}
		
		hoverState() {
			this.rectangle.setStyle({ fill: this.style.button.hover});
		}
		
		readyState() {
			this.rectangle.setStyle({ fill: this.style.button.ready });
		}
		
		activeState() {
			this.rectangle.setStyle({ fill: this.style.button.active });
		}
	}

```

In my scene’s create method, I call it thusly:

```javascript
						text: {
							color: '#9AC4F8',
							fontFamily: 'Ranchers',
							fontSize: 40,
						},
						button: {
							active: '#DE9E36',
							ready: '#9AC4F8',
							hover: '#99EDCC',
						}
					}, () => t.scene.start('wagerScene'));
  				t.add.existing(t.buttonHome);
  				t.menuSceneGrid.placeAtIndex(12, t.buttonHome);

```

The conainer is created and placed at the correct position, however, it is tiny, and does not display the text or rectangle at all. What am I missing?

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [April 11, 2022, 5:39pm UTC](https://phaser.discourse.group/t/setting-height-and-width-of-container/11523/2 "2022-04-11T17:39:05Z")

</div>

> [@jason-allen-oneal](#):
>
> In my scene’s create method, I call it thusly

What’s the rest of this code?

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [April 11, 2022, 5:57pm UTC](https://phaser.discourse.group/t/setting-height-and-width-of-container/11523/3 "2022-04-11T17:57:30Z")

</div>

- `add.text()` has no `scene` argument
- In `add.rectangle()`, `style.button` is undefined
- All of the rectangle colors must be numbers, e.g. `0xDE9E36`
- There’s no `rectangle.setStyle()` method. It should be `rectangle.setFillStyle(number)`
- The text and rectangle objects have different origins so they won’t be aligned at the center. You can change the text origin to (0.5, 0.5) or reposition it.

---

<div class="post-metadata">

**Author:** ![jason-allen-oneal](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/jason-allen-oneal/32/6413_2.png) [@jason-allen-oneal](https://phaser.discourse.group/u/jason-allen-oneal)\
**Post date:** [April 16, 2022, 5:05am UTC](https://phaser.discourse.group/t/setting-height-and-width-of-container/11523/4 "2022-04-16T05:05:28Z")

</div>

Thanks for the reply. I’m doing a lot better with the following code:  
menu\_button.js

```javascript
import {Button} from './button.js';
import {Game} from '../game.js';

class MenuButton extends Button {
	constructor(scene, text, callback, style={}){
		var defaultStyle = {
			text: {
				color: '0x000000',
				fontFamily: 'Ranchers',
				fontSize: 40,
			},
			button: {
				radius: 10,
				paddingX: 20,
				paddingY: 20,
				background: {
					color: '0xFFFFFF',
					active: '0xDE9E36',
					ready: '0x9AC4F8',
					hover: '0x99EDCC',
				},
					border: {
					width: 2,
					active: '0x99EDCC',
					ready: '0x99EDCC',
					hover: '0xDE9E36'
				}
			}
		};
		
		var btnStyle = Game.extend(defaultStyle, style);
		
		var config = {
			scene: scene,
			text: text,
			callback: callback,
			style: btnStyle
		};
		
		super(config);
		scene.add.existing(this);
	}
}

export {MenuButton};

```

button.js

```javascript
class Button extends Phaser.GameObjects.Container {
	constructor(config){
		super(config.scene, 0, 0);
		
		if(config.style.hasOwnProperty("button")){
			if(!config.style.button.hasOwnProperty('paddingX')){
				config.style.button.paddingX = 5;
			}
			if(!config.style.button.hasOwnProperty('paddingY')){
				config.style.button.paddingY = 5;
			}
		}
		this.style = config.style;
		
		this.textElement = config.scene.make.text({
			x: 0,
			y: 0,
			text: config.text,
			style: {
				fontFamily: this.style.text.fontFamily,
				fill: this.style.text.color,
				fontSize: this.style.text.fontSize
			}
		});
		this.textElement.setOrigin(0, 0);
		
		var textElementBounds = this.textElement.getBounds();
		this.boxGeom = {
			width: textElementBounds.width+this.style.button.paddingY,
			height: textElementBounds.height+this.style.button.paddingX
		};
		
		this.box = config.scene.add.graphics();
		this.makeState(this.style.button.background.color);
		this.setSize(this.boxGeom.width, this.boxGeom.height);
		this.textElement.setPosition(this.box.x+(this.style.button.paddingX/2), this.box.y+(this.style.button.paddingY/2));
		
		this.add([this.box, this.textElement])
			.setInteractive({ useHandCursor: true })
			.on('pointerover', () => this.hoverState())
			.on('pointerout', () => this.readyState())
			.on('pointerdown', () => this.activeState())
			.on('pointerup', () => {
				this.hoverState();
				config.callback();
			});
	}
	
	makeState(color){
		this.box.clear();
		this.box.fillStyle(color, 1);
		this.box.fillRoundedRect(0, 0, this.boxGeom.width, this.boxGeom.height, this.style.button.radius);
		this.box.lineStyle(this.style.button.border.width, this.style.button.border.ready, 1);
		this.box.strokeRoundedRect(0, 0, this.boxGeom.width, this.boxGeom.height, this.style.button.radius);
	}
	
	hoverState() {
		this.makeState(this.style.button.background.hover, this.boxGeom);
	}
	
	readyState() {
		this.makeState(this.style.button.background.ready, this.boxGeom);
	}
	
	activeState() {
		this.makeState(this.style.button.background.active, this.boxGeom);
	}
}

export {Button};

```

menu\_scene.js

```javascript
import {AlignGrid} from './components/grid.js';
import {MenuButton} from './components/menu_button.js';

class MenuScene extends Phaser.Scene {
	constructor(){
		super({key: 'menuScene'});
	}
	
	init(data){
		this.asses = data.asses;
		this.scores = data.scores;
	}
	
	create(){
		var t = this;
		
		this.add.image(400, 300, 'flags');
		
		var menuSceneGridConfig = {
			'scene': this,
			'cols': 5,
			'rows': 5
		};
		this.menuSceneGrid = new AlignGrid(menuSceneGridConfig);
		//this.menuSceneGrid.showNumbers();
		
		WebFont.load({
			google: {
				families: this.game.config.Game.fonts
			},
			active: function () {
				t.titleText = t.add.text(0, 0, 'ASS RACES!', {
					fontFamily: 'Barrio',
					fontSize: 80,
					color: '#DE9E36',
				});
				
				t.playButton = new MenuButton(t, 'Play Now', () => t.scene.start('wagerScene', {asses: t.asses}));
				t.scoresButton = new MenuButton(t, 'HiScores', () => t.scene.start('scoresScene', {scores: t.scores}));
				
				t.menuSceneGrid.placeAtIndex(7, t.titleText);
				t.menuSceneGrid.placeAtIndex(16, t.playButton);
				t.menuSceneGrid.placeAtIndex(18, t.scoresButton);
			}
		});
	}
}

export {MenuScene};

```

The text and its background align how I was wanting, but it seems the container hit area is still set to the text’s display origin. How can I set the display origin to match the box and textElement?