search

gismofx / toast_ui.blazor_calendar

Toast UI Calendar Wrapper For Blazor
MIT License
54 stars 8 forks source link

Layout of schedule Dialog not adjusted - see attached image #15

Closed sanongpost closed 2 years ago

sanongpost commented 2 years ago

@gismofx i created a new issue which may not an issue to you i think.

When you click to add/edit schedule, the dialog shown dont line up properly this may due to css not loaded. I have follow instruction from Nuget.

in _host.cshtml

Pls advise. thank you.

UI_Calendar

sanongpost commented 2 years ago

i forget, css is also in same file.

< link href="_content/toast_ui.blazor_Calendar/TUI.blazorCalendar.css" rel="stylesheet">

gismofx commented 2 years ago

@sanongpost definitely and CSS issue. Can you make a sample project and share that I can work on? I need to work on the CSS and JS building process in NPM to isolate the CSS.

vgck commented 2 years ago

I just came across this issue myself. If he is using MudBlazor, it is due to conflicting stylesheets. I was able to resolve it by resetting the letter-spacing:

div { letter-spacing: initial; }

gismofx commented 2 years ago

@vgck Thanks!

There's something I can tweak in NPM build steps to better isolate the CSS.

Looks like someone may have solved it and I asked for a PR, but I will look into it myself too. https://stackoverflow.com/a/71166698/997088

sanongpost commented 2 years ago

Hi.

Yes the project is built using Mudblazor.

I have added as suggest and it is reset as designed.

Thank you

Regards

Sanong

From: vgck @.> Sent: Monday, March 7, 2022 10:34 PM To: gismofx/toast_ui.blazor_calendar @.> Cc: sanongpost @.>; Mention @.> Subject: Re: [gismofx/toast_ui.blazor_calendar] Layout of schedule Dialog not adjusted - see attached image (Issue #15)

I just came across this issue myself. If he is using MudBlazor, it is due to conflicting stylesheets. I was able to resolve it by resetting the letter-spacing:

div { letter-spacing: initial; }

— Reply to this email directly, view it on GitHub https://github.com/gismofx/toast_ui.blazor_calendar/issues/15#issuecomment-1060817322 , or unsubscribe https://github.com/notifications/unsubscribe-auth/ALRIKFTTELDMBWWWTPH5FG3U6YOWRANCNFSM5QBJUJFQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub . You are receiving this because you were mentioned. https://github.com/notifications/beacon/ALRIKFRYS3BOUYI4WVIGPGDU6YOWRA5CNFSM5QBJUJF2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOH45MTKQ.gif Message ID: @. @.> >

gismofx commented 2 years ago

@vgck @sanongpost I also use MudBlazor. I looked through the CSS in TUI and it all seems to be unique. Can you make a sample project which has this issue and also comment how you fixed it? I'd like to see where this issue is coming from.

Also, the latest Nuget Package is now Net6.

sanongpost commented 2 years ago

Hi,

I try same but no point look thru it.

You can just add on the calendar razor page.

That resolve issue to me.

From: gismofx @.> Sent: Tuesday, March 8, 2022 8:26 AM To: gismofx/toast_ui.blazor_calendar @.> Cc: sanongpost @.>; Mention @.> Subject: Re: [gismofx/toast_ui.blazor_calendar] Layout of schedule Dialog not adjusted - see attached image (Issue #15)

@vgck https://github.com/vgck @sanongpost https://github.com/sanongpost I also use MudBlazor. I looked through the CSS in TUI and it all seems to be unique. Can you make a sample project which has this issue and also comment how you fixed it? I'd like to see where this issue is coming from.

Also, the latest Nuget Package is now Net6.

— Reply to this email directly, view it on GitHub https://github.com/gismofx/toast_ui.blazor_calendar/issues/15#issuecomment-1061311091 , or unsubscribe https://github.com/notifications/unsubscribe-auth/ALRIKFV47RQPB7VIRXOZGPDU62UCJANCNFSM5QBJUJFQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub . You are receiving this because you were mentioned. https://github.com/notifications/beacon/ALRIKFTP4ZBVDUGPYWQOXX3U62UCJA5CNFSM5QBJUJF2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOH5BFE4Y.gif Message ID: @. @.> >

vgck commented 2 years ago

@gismofx Attached is a new project with latest version of toast_ui.blazor_calendar and MudBlazor reproducing this issue. MudBlazor applies a letter-spacing style to the body tag which gets inherited by the tui div tags.

Test.zip

gismofx commented 2 years ago

@vgck Thanks! I will take a look. I wonder if there is some harmless adjustment in MB we could make..or if I can somehow insert that css style to the css file when I compile this component.

gismofx commented 2 years ago

@vgck @sanongpost I've updated the nuget package to add isolated css to the component and I tested with your test project. Issue went away. Please try the latest nuget without the added style and let me know.

Thanks!

sanongpost commented 2 years ago

What is latest version ? I cannot find it from the console.

From: gismofx @.> Sent: Saturday, March 12, 2022 12:57 AM To: gismofx/toast_ui.blazor_calendar @.> Cc: sanongpost @.>; Mention @.> Subject: Re: [gismofx/toast_ui.blazor_calendar] Layout of schedule Dialog not adjusted - see attached image (Issue #15)

@vgck https://github.com/vgck @sanongpost https://github.com/sanongpost I've updated the nuget package to add isolated css to the component and I tested with your test project. Issue went away. Please try the latest nuget without the added style and let me know.

Thanks!

— Reply to this email directly, view it on GitHub https://github.com/gismofx/toast_ui.blazor_calendar/issues/15#issuecomment-1065348949 , or unsubscribe https://github.com/notifications/unsubscribe-auth/ALRIKFTWAMX2IRISZILG3ULU7OCNTANCNFSM5QBJUJFQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub . You are receiving this because you were mentioned. https://github.com/notifications/beacon/ALRIKFTDLHKRTI3OVTMTRELU7OCNTA5CNFSM5QBJUJF2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOH5766VI.gif Message ID: @. @.> >

gismofx commented 2 years ago

Install-Package toast_ui.blazor_calendar -Version 1.0.0-beta2.1