starred/radzen-blazor
1
0
Fork 0
mirror of https://github.com/radzenhq/radzen-blazor.git synced 2026-02-04 05:35:44 +00:00
Code Issues 1.3k Packages Projects Releases 22 Wiki Activity

css position: fixed not work #730

New Issue
Closed
opened 2026-01-29 17:42:23 +00:00 by claunia · 2 comments
claunia commented 2026-01-29 17:42:23 +00:00
Owner
Copy Link

Originally created by @Andrey-2021 on GitHub (Feb 12, 2023).

Hi!

Standard Blazor Server project.
Index.razor:

@page "/"
<PageTitle>Index</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app.
<SurveyPrompt Title="How is Blazor working for you?" />

<div class="for-div">
	Hi!!!!!
</div>

css:

.for-div {
    position: fixed !important;
    left: 10px !important;
    top: 10px !important;
    /*right: 30px;
    bottom: 20px;*/
    height: 200px !important;
    width: 200px !important;
    z-index: 999999 !important;
    background-color: aquamarine;
}

MainLayout.razor

@inherits LayoutComponentBase
<PageTitle>BlazorApp2</PageTitle>

<RadzenDialog />
<RadzenNotification />
<RadzenContextMenu />
<RadzenTooltip />

<div class="row">
	<RadzenLayout>
		<RadzenHeader>
			<div class="d-flex align-items-center">
				<RadzenSidebarToggle Click="@(() => sidebar1Expanded = !sidebar1Expanded)" />
				<RadzenLabel Text="Header" />
			</div>
		</RadzenHeader>
		
		<RadzenSidebar @bind-Expanded="@sidebar1Expanded">
			<RadzenPanelMenu>
				<RadzenPanelMenuItem Text="Home" Icon="home" />
				<RadzenPanelMenuItem Text="Users" Icon="account_box" />
			</RadzenPanelMenu>
		</RadzenSidebar>

		<RadzenBody>
			<div class="p-2">
				@Body
			</div>
		</RadzenBody>
	</RadzenLayout>
</div>

@code {
	bool sidebar1Expanded = true;
}

What we have
How can I move the shape to the beginning of the window?

image

Originally created by @Andrey-2021 on GitHub (Feb 12, 2023). Hi! **Standard Blazor Server project.** **Index.razor:** ``` @page "/" <PageTitle>Index</PageTitle> <h1>Hello, world!</h1> Welcome to your new app. <SurveyPrompt Title="How is Blazor working for you?" /> <div class="for-div"> Hi!!!!! </div> ``` **css:** ``` .for-div { position: fixed !important; left: 10px !important; top: 10px !important; /*right: 30px; bottom: 20px;*/ height: 200px !important; width: 200px !important; z-index: 999999 !important; background-color: aquamarine; } ``` **MainLayout.razor** ``` @inherits LayoutComponentBase <PageTitle>BlazorApp2</PageTitle> <RadzenDialog /> <RadzenNotification /> <RadzenContextMenu /> <RadzenTooltip /> <div class="row"> <RadzenLayout> <RadzenHeader> <div class="d-flex align-items-center"> <RadzenSidebarToggle Click="@(() => sidebar1Expanded = !sidebar1Expanded)" /> <RadzenLabel Text="Header" /> </div> </RadzenHeader> <RadzenSidebar @bind-Expanded="@sidebar1Expanded"> <RadzenPanelMenu> <RadzenPanelMenuItem Text="Home" Icon="home" /> <RadzenPanelMenuItem Text="Users" Icon="account_box" /> </RadzenPanelMenu> </RadzenSidebar> <RadzenBody> <div class="p-2"> @Body </div> </RadzenBody> </RadzenLayout> </div> @code { bool sidebar1Expanded = true; } ``` **What we have** How can I move the shape to the beginning of the window? ![image](https://user-images.githubusercontent.com/92442252/218326335-f415cdf0-1f60-4ac2-97c8-ed4a96905bca.png)
claunia commented 2026-01-29 17:42:24 +00:00
Author
Owner
Copy Link

@enchev commented on GitHub (Feb 13, 2023):

Hey @Andrey-2021,

The sidebar is using position: static - this is how CSS works.
image

Please use our forum for such questions in the future.

@enchev commented on GitHub (Feb 13, 2023): Hey @Andrey-2021, The sidebar is using `position: static` - this is how CSS works. ![image](https://user-images.githubusercontent.com/5804953/218407915-362357c1-98d9-4b2c-8dca-3c1c4d3bf328.png) Please use our forum for such questions in the future.
claunia commented 2026-01-29 17:42:24 +00:00
Author
Owner
Copy Link

@Andrey-2021 commented on GitHub (Feb 13, 2023):

Maybe you should reconsider RadzenLayout ,
because we lose the ability to create our own fullscreen elements, windows
as full screen picture viewer or own modal windows

Thanks!

@Andrey-2021 commented on GitHub (Feb 13, 2023): Maybe you should reconsider RadzenLayout , because we lose the ability to create our own fullscreen elements, windows as full screen picture viewer or own modal windows Thanks!
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
enhancement
good first issue
pull-request
Mirrored from GitHub Pull Request
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
claunia
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/radzen-blazor#730
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?