Home > OS >  razor page CSS is not working isolated, only with the style tag at the top
razor page CSS is not working isolated, only with the style tag at the top

Time:03-05

The question is almost self-explanatory. I have the razor component "board.razor" and it also has a "board.razor.css" which contains all the styles for that page. If I do it like that, then the styles won't get applied. If I insert the style classes on the top of the "board.razor", everything works like it should. I'll provide the code and the pictures for you.

Board.razor with style tag at top:

<style>
.dropzone {
    padding: 10px;
    background: #e2eaf2;
    list-style: none;
    height: 100%;
    min-width: 50%;
}

.no-drop {
    border: 2px dashed red;
    background-color: #e6d8d8;
}

.can-drop {
    border: 2px dashed green;
    background-color: #d8e6d8;
}

.draggable {
    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.2);
    margin-bottom: -8px;
    padding: 10px;
    cursor: move;
    background: #fff;
    color: #000;
    border-radius: 3px;
    max-width: 500px;
}

    .draggable:active {
        cursor: move;
        background: #f1f8ff;
    }

    .draggable:hover {
        cursor: move;
        background: #f1f8ff;
    }

h6 {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

.dragging {
    cursor: move;
}

.description {
    font-size: 14px;
}

.sum {
    font-size: 17px;
    word-wrap: break-word;
    color: midnightblue;
    font-weight: bold;
}

.last-updated {
    margin-bottom: 0;
    font-size: 11px;
    color: #474747;
    font-weight: bold;
}

    .last-updated small {
        text-transform: uppercase;
        color: #474747;
        font-size: 11px;
    }

h6 {
    width: 100%;
    height: auto;
}

.scrollbar {
    top: 0;
    bottom: 0;
    overflow: hidden;
    overflow-y: auto;
}

.status-details[open] {
    transition: height 3s;
}

.status-details-summary {
    padding: 1px 0px 1px 8px;
    position: sticky;
    top: 3rem;
    bottom: 0;
    z-index: 20;
    font-size: 12px;
    background-color: white;
}

.status-container {
    display: flex;
}

.status-list {
    display: flex;
    flex-direction: column;
    padding: 5px;
    width: 100%;
}

.status-header {
    display: flex;
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 21;
}

.status-header-item {
    font-weight: bold;
    margin: 5px;
    margin-bottom: -5px;
    padding: 10px;
    background: #e2eaf2;
    flex-direction: column;
    display: flex;
    width: 100%;
}

#bsettings {
    text-decoration: none;
    color: inherit;
    cursor: default;
    display: block;
}
<NavBar OnIssueCreated="LoadIssues"></NavBar>
 
<div >
 
 
    @if (changeMenuShow)
    {
        <h3 style="padding-left:5px"><b>Aktive Sprints</b></h3>
    }
 
    @*<FilterBar AllIssues="issues"></FilterBar>*@
    <div >
        <button  style=" float: right; height: 38px; width: 41px; margin-left: 10px" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
            <i ></i>
        </button>
        <ul  aria-labelledby="dropdownMenuButton">
            <li ><a href="/boardsettings" id="bsettings">Board Einstellungen(unfertig)</a></li>
            @*<li  @onclick="ModalShow">Board erstellen</li>*@
            @if (changeMenuShow)
            {
                <li  @onclick="MenuShow">Menüs ausblenden</li>
            }
            else if (!changeMenuShow)
            {
                <li  @onclick="MenuShow">Menüs einblenden</li>
            }
 
            @if (dialogType.Equals(EditDialogType.Sidebar))
            {
                <li  @onclick="DialogToModal">Vorgänge im Dialogfeld öffnen</li>
            }
            else if (dialogType.Equals(EditDialogType.Modal))
            {
                <li  @onclick="DialogToSidebar">Vorgänge in der Seitenleiste öffnen</li>
            }
        </ul>
    </div>
    @if (activeSprint != null)
    {
        <div style="float: right; margin-left: 10px ">
            <button style="height: 38px;"  @onclick="Complete">Sprint abschließen</button>
        </div>
    }
 
 
    <div  style="display: inline; float: left; margin-top: 8px; margin-left: 10px">
        <input type="checkbox"  id="addMorebox" @bind="ShowOpenForToday" />
        <label  for="addMorebox">Heute zu erledigen anzeigen</label>
    </div>
    <div  style="display: inline; float: left; margin-top:8px; margin-left: 10px;">
        <input type="checkbox"  id="addWaitReply" @bind="showWaitForReply" />
        <label  for="addWaitReply">Warte auf Rückmeldung anzeigen</label>
    </div>
    <br />
    <br />
    <br />
    <IssueDialogOpener DialogType="dialogType">
        <div  style="height: 70vh; ">
            <header >
                <div >Zu Erledigen</div>
                @if (ShowOpenForToday)
                {
                    <div >Heute zu Erledigen</div>
                }
                @if (showWaitForReply)
                {
                    <div  style="display: inline;">Warte auf Rückmeldung</div>
                }
                <div >In Arbeit</div>
                <div >Fertig</div>
            </header>
            <div>
                @if (parentIssues.Count > 0)
                {
                    @foreach (var issue in parentIssues)
                    {
                        <SubtaskStatusContainer Issue="issue" ShowOpenForToday="@ShowOpenForToday" showWaitForReply="@showWaitForReply" OnChange="LoadIssues"></SubtaskStatusContainer>
                    }
                    @if (issues.Count != 0)
                    {
                        <StatusContainer Issues="@issues" ShowOpenForToday="@ShowOpenForToday" showWaitForReply="@showWaitForReply" OnChange="LoadIssues"></StatusContainer>
                    }
                }
                else if (issues.Count != 0)
                {
                    <StatusContainer IsWithoutSubtasks=true Issues="@issues" ShowOpenForToday="@ShowOpenForToday" showWaitForReply="@showWaitForReply" OnChange="LoadIssues"></StatusContainer>
                }
 
            </div>
        </div>
    </IssueDialogOpener>
</div>

How it looks:

How it looks with styles isolated in the board.razor.css: enter image description here

CodePudding user response:

For CSS from an Isolated css file to work in a sub component you need to use the ::deep operator. DOCS

CodePudding user response:

Push all styles back to Board.razor.css file

If your application is server-side then make sure if you have this line in your _Layout.cshtml

And if your application is Web Assembly then make sure this line is in your index.html file

<head>
    <link href="yourprojectname.styles.css" rel="stylesheet" />
</head>
  • Related