# Resizable GUI's in game

**URL:** <https://forums.unrealengine.com/t/resizable-guis-in-game/19534>\
**Category:** Blueprint\
**Tags:** unreal-engine\
**Created:** [January 24, 2015, 12:15am UTC](https://forums.unrealengine.com/t/resizable-guis-in-game/19534 "2015-01-24T00:15:20Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![MuzzyA](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@MuzzyA](https://forums.unrealengine.com/u/MuzzyA)\
**Post date:** [January 24, 2015, 12:15am UTC](https://forums.unrealengine.com/t/resizable-guis-in-game/19534/1 "2015-01-24T00:15:20Z")

</div>

Hi, I want to create a window that is re-sizable. I can’t find any support for it in the engine.

Am I going to have to hack my way around to create a re-sizable GUI? Or am I missing something that might be designed specifically for this?

---

<div class="post-metadata">

**Author:** ![anonymous\_user\_b9532c9a](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@anonymous\_user\_b9532c9a](https://forums.unrealengine.com/u/anonymous_user_b9532c9a)\
**Post date:** [January 26, 2015, 3:28pm UTC](https://forums.unrealengine.com/t/resizable-guis-in-game/19534/2 "2015-01-26T15:28:13Z")

</div>

Hi MuzzyA,

Look into the UMG system. This should definitely be viable, but we don’t have any documentation on resizable windows at present. If you would like more information on UMG, however, check these out:

> **[UMG UI Designer](https://docs.unrealengine.com/5.1/en-US/umg-ui-designer-for-unreal-engine/)**
>
> A guide to using Unreal Motion Graphics to create UI elements.

[https://docs.unrealengine.com/latest/INT/Engine/UMG/QuickStart/index.html](https://docs.unrealengine.com/latest/INT/Engine/UMG/QuickStart/index.html)

> **[UMG Styling](https://docs.unrealengine.com/5.1/en-US/umg-styling-in-unreal-engine/)**
>
> A guide to stylizing Widget Blueprints in UMG.

> **[Widget Type Reference](https://docs.unrealengine.com/5.1/en-US/widget-type-reference-for-umg-ui-designer-in-unreal-engine/)**
>
> Learn about the different types of widgets available in UMG.

> **[UMG Tutorials](https://docs.unrealengine.com/5.1/en-US/tutorials-for-umg-ui-designer-for-unreal-engine/)**
>
> Tutorials and examples of common game features created in UMG.

We also have several tutorials for UMG on the wiki. Though they aren’t directly related to what you want to do, perhaps you could find some information that would be useful to you:

> **[A new, community-hosted Unreal Engine Wiki](https://forums.unrealengine.com/t/a-new-community-hosted-unreal-engine-wiki/141494)**
>
> After over a year in maintenance mode, the official Unreal Engine Wiki is now permanently offline. These resources now live on a new community-run Unreal Engine Community Wiki — https://unrealcommunity.wiki/! You will be able to find content from...

> **[A new, community-hosted Unreal Engine Wiki](https://forums.unrealengine.com/t/a-new-community-hosted-unreal-engine-wiki/141494)**
>
> After over a year in maintenance mode, the official Unreal Engine Wiki is now permanently offline. These resources now live on a new community-run Unreal Engine Community Wiki — https://unrealcommunity.wiki/! You will be able to find content from...

I look forward to seeing what you come up with in the future!

---

<div class="post-metadata">

**Author:** ![MuzzyA](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@MuzzyA](https://forums.unrealengine.com/u/MuzzyA)\
**Post date:** [January 29, 2015, 5:01pm UTC](https://forums.unrealengine.com/t/resizable-guis-in-game/19534/3 "2015-01-29T17:01:25Z")

</div>

I found a way to do it. It wasn’t too bad.

Here is how:

**OnMouseDown** will detect if the left mouse was pressed, if the cursor is on the the border, then sets the window to have mouse capture if those are true.

 ![onmousedown.png](https://d3kjluh73b9h9o.cloudfront.net/original/3X/e/6/e60cb4d7f588b699b6d8aa2ca7c1d8e2e677c4d5.png)

**OnMouseMove** will determine if there is mouse capture, then process the resizing of the window depending on which border you clicked. ( Also removes the viewport scale from the mouse cursor so there are no offsets in different resolutions. )

 ![onmousemove.png](https://d3kjluh73b9h9o.cloudfront.net/original/3X/a/b/ab1b6d2aca48cd5f7dd5d326658ae40597d684f9.png)

**OnMouseUp** simply removes mouse capture

 ![onmousedown.png](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/c/d/2cd35b70d01ec669844e5e7aa1895c7311e5904c.png)

---

<div class="post-metadata">

**Author:** ![Semitable](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@Semitable](https://forums.unrealengine.com/u/Semitable)\
**Post date:** [September 22, 2015, 5:33pm UTC](https://forums.unrealengine.com/t/resizable-guis-in-game/19534/4 "2015-09-22T17:33:47Z")

</div>

[=MuzzyA;213084]  
I found a way to do it. It wasn’t too bad.

Here is how:

**OnMouseDown** will detect if the left mouse was pressed, if the cursor is on the the border, then sets the window to have mouse capture if those are true.

 ![onmousedown.png](https://d3kjluh73b9h9o.cloudfront.net/original/3X/e/6/e60cb4d7f588b699b6d8aa2ca7c1d8e2e677c4d5.png)

**OnMouseMove** will determine if there is mouse capture, then process the resizing of the window depending on which border you clicked. ( Also removes the viewport scale from the mouse cursor so there are no offsets in different resolutions. )

 ![onmousemove.png](https://d3kjluh73b9h9o.cloudfront.net/original/3X/a/b/ab1b6d2aca48cd5f7dd5d326658ae40597d684f9.png)

**OnMouseUp** simply removes mouse capture

 ![onmousedown.png](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/c/d/2cd35b70d01ec669844e5e7aa1895c7311e5904c.png)  
[/]

Hey MuzzyA,

I was trying to do something similar for a project on mine and was stuck until I stumbled at your post…  
Unfortunately I have a small problem trying to figure out what exactly you are doing in the first image…  
I cannot figure out where to find any “Is Mouse On …” nodes to use, the ones you connect to your branches. (There are no nodes popping up with similar names when I am dragging geometry or mouse events, neither when searching generally out of context). Could you give me a hint on that? Do those nodes still exist on 4.9? Did you find another way to do it maybe?

Thanks a lot
