Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[MdGridList] - Grid doesn't display at all on server with RatioTileStyler display strategy #6048

Closed
jimjim2a opened this issue Jul 26, 2017 · 4 comments · Fixed by #6052
Closed

[MdGridList] - Grid doesn't display at all on server with RatioTileStyler display strategy #6048

jimjim2a opened this issue Jul 26, 2017 · 4 comments · Fixed by #6052
Assignees
@crisbeto

Comments

@jimjim2a
Copy link

Bug, feature request, or proposal:

On the server the MdGridList component doesn't display when using the RatioTileStyler strategy. It doesn't display because the applied styles are not valid properties name.

Specifically on the setRowStyles and getComputedHeight methods.

These methods define some styles to be applied on the tile, but the properties to be written are camelCase. On the browser this works well, but the server renderer writes theses properties inside the style attribute as they are.

Ex : style="marginTop: calc(((33.333333333333336% - ( 0px * 0.6666666666666666 )) + 0px) * 0);paddingTop:calc(((33.333333333333336% - ( 0px * 0.6666666666666666 )) * 1) + (0 * 0px));"

marginTop and paddingTop are not valid property names for the browser, therefore it ignore them.

What is the expected behavior?

The css properties should be written kebab-case to be correctly handled by the browser.

What is the current behavior?

What are the steps to reproduce?

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Is there anything else we should know?
@crisbeto crisbeto self-assigned this Jul 26, 2017
crisbeto added a commit to crisbeto/material2 that referenced this issue Jul 26, 2017
@crisbeto
fix(grid-list): invalid inline styles when rendering server-side
f5ef51f 
Fixes issue in the grid list that was causing it to set invalid styles when it is rendered on the server-side. It's because the browser converts the camelCased styles to dash-case automatically, but that doesn't happen on the server.

Fixes angular#6048.
@crisbeto crisbeto mentioned this issue Jul 26, 2017
Merged
andrewseguin pushed a commit that referenced this issue Jul 27, 2017
@crisbeto @andrewseguin
fix(grid-list): invalid inline styles when rendering server-side
aeab521 
Fixes issue in the grid list that was causing it to set invalid styles when it is rendered on the server-side. It's because the browser converts the camelCased styles to dash-case automatically, but that doesn't happen on the server.

Fixes #6048.
andrewseguin pushed a commit that referenced this issue Jul 27, 2017
@crisbeto @andrewseguin
fix(grid-list): invalid inline styles when rendering server-side
ddc7b39 
Fixes issue in the grid list that was causing it to set invalid styles when it is rendered on the server-side. It's because the browser converts the camelCased styles to dash-case automatically, but that doesn't happen on the server.

Fixes #6048.
andrewseguin pushed a commit that referenced this issue Jul 27, 2017
@crisbeto @andrewseguin
fix(grid-list): invalid inline styles when rendering server-side
776426e 
Fixes issue in the grid list that was causing it to set invalid styles when it is rendered on the server-side. It's because the browser converts the camelCased styles to dash-case automatically, but that doesn't happen on the server.

Fixes #6048.
andrewseguin pushed a commit that referenced this issue Jul 28, 2017
@crisbeto @andrewseguin
fix(grid-list): invalid inline styles when rendering server-side (#6052)
22ce1da 
Fixes issue in the grid list that was causing it to set invalid styles when it is rendered on the server-side. It's because the browser converts the camelCased styles to dash-case automatically, but that doesn't happen on the server.

Fixes #6048.
@jimjim2a
Copy link
Author

Sorry to talks about this again, but it seems that the issue is occurring again because of.... this fix !

On the last version of Angular (5.2.6) and material (5.2.2), when running on server the grid doesn't show up using RatioTileStyler.

Maybe this is related to the switch from Parse5 to Domino adapter of the universal engine.

Fact is that the TileStyle on server fails to apply style like padding-bottom but works when using paddingBottom.

Thx !

@andrewseguin @crisbeto

crisbeto added a commit to crisbeto/material2 that referenced this issue Feb 24, 2018
@crisbeto
fix(grid-list): invalid style declaration during server-side rendering
d628281 
A while ago in angular#6052, we switched the grid list inline styles to be assigned through the dash-cased properties in order for them to be valid when using the old renderer with parse5. These changes go back to the camel-cased properties, because the dash-cased ones don't work with Domino.

Relates to angular#6048.
@crisbeto crisbeto mentioned this issue Feb 24, 2018
Merged
@crisbeto
Copy link
Member

crisbeto commented Feb 24, 2018 •
edited
Loading

Thanks for the heads-up @jimjim2a, I could confirm that the margin and padding weren't being assigned anymore. What's odd is that the old renderer used assign the properties, even though they were invalid. The new one just drops the invalid ones altogether. I've submitted #10131 to sort it out.

@jimjim2a
Copy link
Author

Awesome ! Thanks @crisbeto

jelbourn pushed a commit that referenced this issue Feb 26, 2018
@crisbeto @jelbourn
fix(grid-list): invalid style declaration during server-side rendering (
a27d9df 
#10131)

A while ago in #6052, we switched the grid list inline styles to be assigned through the dash-cased properties in order for them to be valid when using the old renderer with parse5. These changes go back to the camel-cased properties, because the dash-cased ones don't work with Domino.

Relates to #6048.
mmalerba pushed a commit to mmalerba/components that referenced this issue Feb 26, 2018
@crisbeto @mmalerba
fix(grid-list): invalid style declaration during server-side rendering (
2ece359 
angular#10131)

A while ago in angular#6052, we switched the grid list inline styles to be assigned through the dash-cased properties in order for them to be valid when using the old renderer with parse5. These changes go back to the camel-cased properties, because the dash-cased ones don't work with Domino.

Relates to angular#6048.
jelbourn pushed a commit to jelbourn/components that referenced this issue Feb 27, 2018
@crisbeto @jelbourn
fix(grid-list): invalid style declaration during server-side rendering (
1576a99 
angular#10131)

A while ago in angular#6052, we switched the grid list inline styles to be assigned through the dash-cased properties in order for them to be valid when using the old renderer with parse5. These changes go back to the camel-cased properties, because the dash-cased ones don't work with Domino.

Relates to angular#6048.
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 8, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@crisbeto crisbeto

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(grid-list): invalid inline styles when rendering server-side crisbeto/material2
2 participants
@crisbeto @jimjim2a