basic theme login page layout not working in angular
Rider Bootstrap Theme Issue
Issue with theme left side of login page not spanning to the bottom and right panel is way too high . if you move the html inside the index.html it works fine but not inside a basic angular component.
here is the sample code: https://stackblitz.com/edit/angular-i4jhux?file=src%2Fapp%2Fheroes%2Fheroes.component.html
Issue with theme left side of login page not spanning to the bottom and right panel is way too high . if you move the html inside the index.html it works fine but not inside a basic angular component.
here is the sample code: https://stackblitz.com/edit/angular-i4jhux?file=src%2Fapp%2Fheroes%2Fheroes.component.html
Replies (12)
Hi,
Sorry, but this URL https://stackblitz.com/edit/angular-i4jhux?file=src%2Fapp%2Fheroes%2Fheroes.component.html does not show any page. It still shows a white blank page: https://i.imgur.com/CW26YlK.png
Regards.
Sorry, but this URL https://stackblitz.com/edit/angular-i4jhux?file=src%2Fapp%2Fheroes%2Fheroes.component.html does not show any page. It still shows a white blank page: https://i.imgur.com/CW26YlK.png
Regards.
it does that sometimes.. try refreshing the right panel / view
Noted, will try.
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...
https://www.screencast.com/t/sZhFpvp6zq
https://www.screencast.com/t/sZhFpvp6zq
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.
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 .
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
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.
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.
Deleted comment
React Dev Vacancy
KeenThemes is looking for a Junior React or Vue developer to build awesome apps.
Apply
