Skip to content

fix(xplat): prevent oversized rendering of images #247

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

Closed
Zneeky wants to merge 4 commits into from
Closed

fix(xplat): prevent oversized rendering of images #247

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
717ed8f
fix(xplat): prevent oversized rendering of Blazor card images
Zneeky May 28, 2026
0aa2fb1
chore: remove IMAGE_SIZING.md
Zneeky May 28, 2026
ada7ca8
fix(xplat): apply Blazor card image width override to JP pages
Zneeky May 28, 2026
a4b4d17
fix(xplat,angular): apply width:auto to wc-project and layout_mode im…
Zneeky May 28, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/angular/src/content/en/components/charts/features/chart-data-legend.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ Legend items can be positioned in a vertical or table structure via the <ApiLink

eg.

<Image src={layoutMode} alt="Layout Mode" />
<Image src={layoutMode} alt="Layout Mode" style="width:auto;" />

## Angular Data Legend Styling

Expand Down
2 changes: 1 addition & 1 deletion docs/angular/src/content/en/components/charts/features/chart-data-tooltip.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@ Legend items can be positioned in a vertical or table structure via the <ApiLink

eg.

<Image src={layoutMode} alt="Layout Mode" />
<Image src={layoutMode} alt="Layout Mode" style="width:auto;" />


## Angular Data Tooltip Styling
Expand Down
2 changes: 1 addition & 1 deletion docs/angular/src/content/jp/components/charts/features/chart-data-legend.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ OHLC 価格の **TypicalPrice** (標準価格) とパーセンテージの **Cha

例:

<Image src={layoutMode} alt="Layout Mode" />
<Image src={layoutMode} alt="Layout Mode" style="width:auto;" />

## Angular データ凡例のスタイル設定

Expand Down
4 changes: 2 additions & 2 deletions docs/angular/src/content/jp/components/charts/features/chart-data-tooltip.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,9 +127,9 @@ Ignite UI for Angular では、**DataToolTip** は、シリーズの値とタイ
凡例項目は、<ApiLink pkg="charts" type="DataLegend" member="layoutMode" label="LayoutMode" /> プロパティを使って垂直または表形式の構造に配置できます。デフォルト値は `Table` で、以前のリリースと同じ外観と操作性を維持します。

例:
<Image src={layoutMode} alt="Layout Mode" />
<Image src={layoutMode} alt="Layout Mode" style="width:auto;" />

<Image src={layoutMode} alt="Layout Mode" />
<Image src={layoutMode} alt="Layout Mode" style="width:auto;" />


## Angular データ ツールチップのスタイル設定
Expand Down
2 changes: 1 addition & 1 deletion docs/angular/src/content/jp/components/general/getting-started.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ Ignite UI for Angular はデュアルライセンス モデルで提供され、

<div>
<div style="display:inline-block;width:45%;text-align:center;">
<Image src={nodejs} alt="NodeJS" style="display:flex;max-height:100px;margin:auto auto 20px auto;" />
<Image src={nodejs} alt="NodeJS" style="display:flex;max-height:100px;margin:auto auto 20px auto;object-fit:initial;" />
<a target="_blank" href="https://nodejs.org/en/download/" class="no-external-icon"
style="color:white;background-color:#09f;text-decoration:none;font-weight:700;font-size:16px;padding: 5px 15px 5px 15px;">DOWNLOAD NODE</a>
</div>
Expand Down
2 changes: 1 addition & 1 deletion docs/xplat/src/content/en/components/charts/features/chart-data-legend.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ Legend items can be positioned in a vertical or table structure via the <ApiLink

eg.

<Image src={layoutMode} alt="Layout Mode" />
<Image src={layoutMode} alt="Layout Mode" style="width:auto;" />

## {Platform} Data Legend Styling

Expand Down
2 changes: 1 addition & 1 deletion docs/xplat/src/content/en/components/charts/features/chart-data-tooltip.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@ Legend items can be positioned in a vertical or table structure via the <ApiLink

eg.

<Image src={layoutMode} alt="Layout Mode" />
<Image src={layoutMode} alt="Layout Mode" style="width:auto;" />


## {Platform} Data Tooltip Styling
Expand Down
2 changes: 1 addition & 1 deletion docs/xplat/src/content/en/components/general-getting-started-blazor-client.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,4 +139,4 @@ Add an Ignite UI for Blazor component to your razor page:

Build and run the Blazor app.

<Image src={gettingStartedBlazorCard} alt="getting-started-blazor-card" />
<Image src={gettingStartedBlazorCard} alt="getting-started-blazor-card" style="width:auto;" />
2 changes: 1 addition & 1 deletion docs/xplat/src/content/en/components/general-getting-started-blazor-maui.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,7 @@ Add an Ignite UI for Blazor component to your razor page:

Build and run the .NET MAUI Blazor app for Windows.

<Image src={gettingStartedBlazorCardWindows} alt="getting-started-blazor-card-windows" />
<Image src={gettingStartedBlazorCardWindows} alt="getting-started-blazor-card-windows" style="width:auto;" />

<DocsAside type="info">
For more information about building cross-platform applications with .NET MAUI, visit the [Microsoft Documentation](https://docs.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-android).
Expand Down
2 changes: 1 addition & 1 deletion docs/xplat/src/content/en/components/general-getting-started-blazor-web-app.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,4 +157,4 @@ Add an Ignite UI for Blazor component to your razor page (Please note that Ignit

Build and run the Blazor app.

<Image src={gettingStartedBlazorCard} alt="getting-started-blazor-card" />
<Image src={gettingStartedBlazorCard} alt="getting-started-blazor-card" style="width:auto;" />
6 changes: 3 additions & 3 deletions docs/xplat/src/content/en/components/general-getting-started.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ import gettingStartedBlazorCard from '@xplat-images/general/getting-started-blaz

<div style="margin-bottom: 40px;">
<div style="display:inline-block;width:45%;text-align:center;">
<Image src={nodejs} alt="nodejs" style="display:flex;max-height:100px;margin:auto auto 20px auto;" />
<Image src={nodejs} alt="nodejs" style="display:flex;max-height:100px;margin:auto auto 20px auto;object-fit:initial;" />
<a target="_blank" href="https://nodejs.org/en/download/" class="no-external-icon"
style="color:white;background-color:#09f;text-decoration:none;font-weight:700;font-size:16px;padding: 5px 15px 5px 15px;">DOWNLOAD NODE</a>
</div>
Expand Down Expand Up @@ -317,7 +317,7 @@ code .

7 - Create a new folder named **src**, and within that folder create a new file named **index.js**. Your project structure should look like this:

<Image src={wcProject} alt="wc-project" />
<Image src={wcProject} alt="wc-project" style="width:auto;" />

8 - Update the **package.json** file to include a build script using **webpack**

Expand Down Expand Up @@ -675,7 +675,7 @@ Add an Ignite UI for Blazor component to your razor page:

Build and run the Blazor app.

<Image src={gettingStartedBlazorCard} alt="getting-started-blazor-card" />
<Image src={gettingStartedBlazorCard} alt="getting-started-blazor-card" style="width:auto;" />


</PlatformBlock>
2 changes: 1 addition & 1 deletion docs/xplat/src/content/en/components/nextjs-usage.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ Explore the seamless integration of {ProductName} into your Next.js project. Thi

<div style="margin-bottom: 40px;">
<div style="display:inline-block;width:45%;text-align:center;">
<Image src={nodejs} alt="nodejs" style="display:flex;max-height:100px;margin:auto auto 20px auto;" />
<Image src={nodejs} alt="nodejs" style="display:flex;max-height:100px;margin:auto auto 20px auto;object-fit:initial;" />
<a target="_blank" href="https://nodejs.org/en/download/" class="no-external-icon"
style="color:white;background-color:#09f;text-decoration:none;font-weight:700;font-size:16px;padding: 5px 15px 5px 15px;">DOWNLOAD NODE</a>
</div>
Expand Down
2 changes: 1 addition & 1 deletion docs/xplat/src/content/jp/components/charts/features/chart-data-legend.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ OHLC 価格の **TypicalPrice** (標準価格) とパーセンテージの **Cha

例:

<Image src={layoutMode} alt="Layout Mode" />
<Image src={layoutMode} alt="Layout Mode" style="width:auto;" />

## {Platform} データ凡例のスタイル設定

Expand Down
4 changes: 2 additions & 2 deletions docs/xplat/src/content/jp/components/charts/features/chart-data-tooltip.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,9 +127,9 @@ import layoutMode from '@xplat-images/general/layout_mode.png';
凡例項目は、<ApiLink pkg="charts" type="DataLegend" member="layoutMode" label="LayoutMode" /> プロパティを使って垂直または表形式の構造に配置できます。デフォルト値は `Table` で、以前のリリースと同じ外観と操作性を維持します。

例:
<Image src={layoutMode} alt="Layout Mode" />
<Image src={layoutMode} alt="Layout Mode" style="width:auto;" />

<Image src={layoutMode} alt="Layout Mode" />
<Image src={layoutMode} alt="Layout Mode" style="width:auto;" />


## {Platform} データ ツールチップのスタイル設定
Expand Down
2 changes: 1 addition & 1 deletion docs/xplat/src/content/jp/components/general-getting-started-blazor-client.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,4 +141,4 @@ Razor ページに Ignite UI for Blazor コンポーネントの追加:

Blazor アプリをビルドして実行します。

<Image src={gettingStartedBlazorCard} alt="getting-started-blazor-card" />
<Image src={gettingStartedBlazorCard} alt="getting-started-blazor-card" style="width:auto;" />
2 changes: 1 addition & 1 deletion docs/xplat/src/content/jp/components/general-getting-started-blazor-maui.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,7 @@ Razor ページに Ignite UI for Blazor コンポーネントの追加:

Windows 用の .NET MAUI Blazor アプリをビルドして実行します。

<Image src={gettingStartedBlazorCardWindows} alt="getting-started-blazor-card-windows" />
<Image src={gettingStartedBlazorCardWindows} alt="getting-started-blazor-card-windows" style="width:auto;" />

<DocsAside type="info" title="情報">
.NET MAUI を使用したクロス プラットフォーム アプリケーションの構築の詳細については、[Microsoft のドキュメント](https://docs.microsoft.com/ja-jp/dotnet/maui/get-started/first-app?pivots=devices-android)を参照してください。
Expand Down
2 changes: 1 addition & 1 deletion docs/xplat/src/content/jp/components/general-getting-started-blazor-web-app.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,4 +159,4 @@ Razor ページに Ignite UI for Blazor コンポーネントを追加します

Blazor アプリをビルドして実行します。

<Image src={gettingStartedBlazorCard} alt="getting-started-blazor-card" />
<Image src={gettingStartedBlazorCard} alt="getting-started-blazor-card" style="width:auto;" />
6 changes: 3 additions & 3 deletions docs/xplat/src/content/jp/components/general-getting-started.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ import gettingStartedBlazorCard from '@xplat-images/general/getting-started-blaz

<div style="margin-bottom: 40px;">
<div style="display:inline-block;width:45%;text-align:center;">
<Image src={nodejs} alt="nodejs" style="display:flex;max-height:100px;margin:auto auto 20px auto;" />
<Image src={nodejs} alt="nodejs" style="display:flex;max-height:100px;margin:auto auto 20px auto;object-fit:initial;" />
<a target="_blank" href="https://nodejs.org/en/download/" class="no-external-icon"
style="color:white;background-color:#09f;text-decoration:none;font-weight:700;font-size:16px;padding: 5px 15px 5px 15px;">Node のダウンロード</a>
</div>
Expand Down Expand Up @@ -287,7 +287,7 @@ code .

7 - **src** という名前の新しいフォルダーを作成し、そのフォルダー内に **index.js** という名前の新しいファイルを作成します。プロジェクト構造は以下のようになります。

<Image src={wcProject} alt="wc-project" />
<Image src={wcProject} alt="wc-project" style="width:auto;" />

8 - **package.json** ファイルを、**webpack** を使用してビルド スクリプトを含めるよう変更します。

Expand Down Expand Up @@ -596,6 +596,6 @@ Razor ページに Ignite UI for Blazor コンポーネントの追加:

Blazor アプリケーションをビルドして実行します。

<Image src={gettingStartedBlazorCard} alt="getting-started-blazor-card" />
<Image src={gettingStartedBlazorCard} alt="getting-started-blazor-card" style="width:auto;" />

</PlatformBlock>
2 changes: 1 addition & 1 deletion docs/xplat/src/content/jp/components/nextjs-usage.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ import geoMap from '@xplat-images/general/geo-map.png';

<div style="margin-bottom: 40px;">
<div style="display:inline-block;width:45%;text-align:center;">
<Image src={nodejs} alt="nodejs" style="display:flex;max-height:100px;margin:auto auto 20px auto;" />
<Image src={nodejs} alt="nodejs" style="display:flex;max-height:100px;margin:auto auto 20px auto;object-fit:initial;" />
<a target="_blank" href="https://nodejs.org/en/download/" class="no-external-icon"
style="color:white;background-color:#09f;text-decoration:none;font-weight:700;font-size:16px;padding: 5px 15px 5px 15px;">Node のダウンロード</a>
</div>
Expand Down
Loading