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:
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>