The default "Overview" banner that comes with creating a new project renders fine, but when I abstract the banner into it's own component it breaks and doesn't render properly. I've made sure that every obvious setting in the properties window are the same, and that the window resolution is the same (1920px by 35px). This error occurs with every template and cannot simply be fixed by manually scaling it.
Did you check that the layout properties (right click on selected component -> layout) are the same? I believe layout defaults to relative, maintain aspect ratio, center, scale font. Its a default you can change in the project properties I believe. Documentation Link
A good way to check this during runtime as well is to set the group background color to something wildly different than the page root container background color.
In general for header groups you'll want to set to anchored mode and anchor to either the top or bottom and both sides.
Thanks for the suggestion Ryan. Changing the layout and unchecking "Maintain Aspect Ratio" seemed to stretch the width. However the template component is still clearly a different size than the default, witch doesn't make sense to me since the template size is set to be 1920 x 35 witch is the exact width size as the Overview window (1920 x 1080) and is also the exact size of the default banner the project started with (1920 x 35). Since they are hardcoded to be the same size, they should render to be the same size right?
Sorry I am a bit new to Vision and am coming from Perspective. I assumed that the header is a separate space of pixels that gets attached on top of my Windows that I made, not overlayed on top of it. I also still don't understand why the banners look different. They are both hardcoded to be 1920x35, so it doesn't make sense for them to appear different.
Your docked view will be at the top with the specified height. Whatever your other views dimensions are will scale to the remaining available space.
For instance, my top docked view is usually 100 px, so my main windows are 1920x980 instead of the full 1920x1080. If you designed the main window at 1920x1080, it will have to scale down to fit the 980 height and maintaining the aspect ratio, so you'll end up with 1742x980.
What are the scaling settings on the original header items on the page (line, gradient, text)? They might be set to not preserve aspect ratio but still be relative scaling instead of anchored. That would result in the header becoming taller because going from 600px (designer) tall to 980px(runtime/client) tall would result in slight vertical scaling.
The default banner layout settings are all anchored, top. One thing I am thinking is that maybe there is a global resolution project settings that don't match the resolution of the windows. One thing I notice is that ignition's default windows that come with creating anew project are 800 x 800, and the navigation has a height of 117. However most computers do not have a resolution ratio of 800 x 917, so I made sure all new windows I created have a modern resolution of 1920x1080 (16:9) so that the HMI can be comfortably viewed on any computer screen.
I am wondering If I should make everything anchored instead of relative? I assume relative is similar to css/js flexbox, and anchored is like a coordinate box? My end goal is for my project to work perfect on any screen that has a 16:9 ratio.
I'm out of ideas for the header size difference. It seems to behave as if it is set to scale instead of being anchored. Only other thing I can think of is to check if Enable Layout is on or off on the template source.
The general rule of thumb is to design at the smallest resolution you know the screen will be used at with the same aspect ratio and set scaling to relative maintain ratio. Java does better scaling up to larger sizes than trying to scale to smaller.
I personally use a pretty good mix of relative scaling and anchoring, depending on the look I'm aiming to achieve.
I tend to use 1600x900 as my default window size. I keep docks as small as possible. I use anchored only for inner components that can benefit from scroll bars on smaller screens.
