It seems you added 2 extra wrapper parents to the rider's layout. You will need to apply these changes to those parent elements: https://i.imgur.com/5ilfIDu.png

I cleaned that up I think.. take another look .. but still having the issue. the code is cut an pasted from the theme login example. it seems like angular is causing an issue if the html code is in the component vs the index.html...

Please refer to this image and add the required styles to fix the layout:
https://i.imgur.com/5ilfIDu.png

You still have 2 extra DIV that are not part of the Rider HTML Markup. So you will need to apply a custom style to fix the issue. I tested it and worked.

the style.css is from the theme.. the code is the same as the theme.....

the only difference is angular component being used... if you move the code right into the index.html it works just fine...

so how did you fix it? just not sure where other stuff is coming from pretty basic setup .

You will need to add a custom styles for those 2 tags added by Angular as shown in this image:
https://i.imgur.com/5ilfIDu.png

can you show me what you did to fix this?

Please add this CSS code somewhere globally:

app-root {
display: flex;
flex-direction: column;
height: 100%;
}

app-heroes {
display: flex;
height: 100%;
}

That worked !!! Big Thank You !! However, I guess this is a angular issue... these tags are angular but not sure why they would affect style. any explanation to this?

Hi,

Glad it worked for you. Yes, it affects it since Angular adds 2 new parent elements that rider HTML styles don't aware of.

If you liked Rider HTML Pro, could you leave a 5-star review here That would support their sales and help potential users to make decisions?

Have a great day!

Regards.