Develop Reference

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

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 class="bodyContainer">
#if (changeMenuShow)
{
<h3 style="padding-left:5px"><b>Aktive Sprints</b></h3>
}
#*<FilterBar AllIssues="issues"></FilterBar>*#
<div class="dropdown">
<button class="btn btn-blue" style=" float: right; height: 38px; width: 41px; margin-left: 10px" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
<i class="oi oi-cog"></i>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li class="dropdown-item">Board Einstellungen(unfertig)</li>
#*<li class="dropdown-item" #onclick="ModalShow">Board erstellen</li>*#
#if (changeMenuShow)
{
<li class="dropdown-item" #onclick="MenuShow">Menüs ausblenden</li>
}
else if (!changeMenuShow)
{
<li class="dropdown-item" #onclick="MenuShow">Menüs einblenden</li>
}
#if (dialogType.Equals(EditDialogType.Sidebar))
{
<li class="dropdown-item" #onclick="DialogToModal">Vorgänge im Dialogfeld öffnen</li>
}
else if (dialogType.Equals(EditDialogType.Modal))
{
<li class="dropdown-item" #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;" class="btn btn-blue" #onclick="Complete">Sprint abschließen</button>
</div>
}
<div class="custom-control custom-switch" style="display: inline; float: left; margin-top: 8px; margin-left: 10px">
<input type="checkbox" class="custom-control-input" id="addMorebox" #bind="ShowOpenForToday" />
<label class="custom-control-label" for="addMorebox">Heute zu erledigen anzeigen</label>
</div>
<div class="custom-control custom-switch" style="display: inline; float: left; margin-top:8px; margin-left: 10px;">
<input type="checkbox" class="custom-control-input" id="addWaitReply" #bind="showWaitForReply" />
<label class="custom-control-label" for="addWaitReply">Warte auf Rückmeldung anzeigen</label>
</div>
<br />
<br />
<br />
<IssueDialogOpener DialogType="dialogType">
<div class="scrollbar" style="height: 70vh; ">
<header class="status-header">
<div class="status-header-item">Zu Erledigen</div>
#if (ShowOpenForToday)
{
<div class="status-header-item">Heute zu Erledigen</div>
}
#if (showWaitForReply)
{
<div class="status-header-item" style="display: inline;">Warte auf Rückmeldung</div>
}
<div class="status-header-item">In Arbeit</div>
<div class="status-header-item">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:

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

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>

html5 input list items not shown in dropdown but showing in web developer tool

I've a input list. I've bind the data items from my code behind page. But the items are not showing in drop down but the items are shown in webdeveloper tools.
Please see the attached figure. In the text box when I type "a" no items are displayed, but when I debug the UI using web developer tool, the items are shown there.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Sample.aspx.cs" Inherits="Sample" MasterPageFile="AdminMaster.master" %>
<asp:Content ID="UserContent" runat="server" ContentPlaceHolderID="ContentPlaceHolder1">
<style>
.content {
min-height: 250px;
padding: 15px;
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}
.box {
position: relative;
border-radius: 3px;
background: #ffffff;
border-top: 3px solid #d2d6de;
margin-bottom: 20px;
width: 100%;
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}
.box.box-default {
border-top-color: #d2d6de;
}
.box-title {
display: inline-block;
font-size: 18px;
margin: 0;
line-height: 1;
}
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
/*.fa-tag:before {
content: "\f02b";
}*/
.box-header.with-border {
border-bottom: 1px solid #f4f4f4;
}
.box-header {
color: #444;
display: block;
padding: 10px;
position: relative;
}
.form-horizontal .form-group {
margin-left: -15px;
margin-right: -15px;
}
.box-body {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
padding: 10px;
}
.form-horizontal .control-label {
padding-top: 7px;
margin-bottom: 0;
text-align: right;
}
.form-control {
display: block;
width: 50%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.form-control:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
.form-control::-moz-placeholder {
color: #999;
opacity: 1;
}
.form-control:-ms-input-placeholder {
color: #999;
}
.form-control::-webkit-input-placeholder {
color: #999;
}
label {
display: inline-block;
margin-bottom: 5px;
font-weight: 700;
}
.input_text {
width: 80%;
text-transform: uppercase;
}
</style>
<div class="content">
<div class="box box-default ">
<div class="box-header with-border">
<h3 class="box-title"><i class="fa fa-tag"></i>Student Registration</h3>
</div>
<div class="form-horizontal">
<div class="box-body">
<div class="form-group">
<label for="inputName" class="col-md-1 control-label">Name</label>
<div class="col-md-8">
<input type="text" class="form-control input_text" id="inputName" placeholder="NAME" />
</div>
</div>
<div class="form-group">
<label for="inputRoll" class="col-md-1 control-label">Roll Number</label>
<div class="col-md-8">
<input type="text" class="form-control input_text" id="inputRoll" placeholder="ROLL" />
</div>
</div>
<div class="form-group">
<label for="inputAddress" class="col-md-1 control-label">Gender</label>
<div class="col-md-8">
<label class="radio-inline">
<input type="radio" name="clouds" id="Clear" value="clear" checked="checked" />
Male
</label>
<label class="radio-inline">
<input type="radio" name="clouds" id="Cloudy" value="cloudy" />
Female
</label>
</div>
</div>
<div class="form-group">
<label for="inputAddress" class="col-md-1 control-label">Class</label>
<div class="col-md-8">
<input list="fruits" runat="server" />
<datalist id="fruits" runat="server"></datalist>
</div>
</div>
<div class="form-group">
<label for="inputAddress" class="col-md-1 control-label">Address</label>
<div class="col-md-8">
<input type="text" class="form-control input_text" id="inputAddress2" placeholder="Email" />
</div>
</div>
</div>
</div>
</div>
</div>
</asp:Content>
code behind page code
protected void Page_Load(object sender, EventArgs e)
{
DataTable table = new DataTable();
table.Columns.Add("fruits");
table.Rows.Add("apple");
table.Rows.Add("banana");
table.Rows.Add("pineapple");
table.Rows.Add("mango");
table.Rows.Add("watermelon");
table.Rows.Add("lemon");
table.Rows.Add("guava");
table.Rows.Add("jackfruit");
var builder = new System.Text.StringBuilder();
for (int i = 0; i < table.Rows.Count; i++)
builder.Append(String.Format("<option value='{0}'>", table.Rows[i][0]));
fruits.InnerHtml = builder.ToString();
}

The problem is that the datalist ID generated by ASP.NET is not fruits but ContentPlaceHolder1_fruits.
You should first give the input an ID, so you can access it from the code behind.
<input list="fruits" runat="server" id="fruitsInput" />
And then from the code behind set the right datalist ID
fruitsInput.Attributes["list"] = fruits.ClientID;
So your markup should look like this
<div class="col-md-8">
<input list="fruits" runat="server" />
<datalist id="fruits" runat="server"></datalist>
</div>
And you code behind like this
protected void Page_Load(object sender, EventArgs e)
{
DataTable table = new DataTable();
table.Columns.Add("fruits");
table.Rows.Add("apple");
table.Rows.Add("banana");
table.Rows.Add("pineapple");
table.Rows.Add("mango");
table.Rows.Add("watermelon");
table.Rows.Add("lemon");
table.Rows.Add("guava");
table.Rows.Add("jackfruit");
var builder = new System.Text.StringBuilder();
for (int i = 0; i < table.Rows.Count; i++)
builder.Append(String.Format("<option value='{0}'>", table.Rows[i][0]));
fruits.InnerHtml = builder.ToString();
fruitsInput.Attributes["list"] = fruits.ClientID;
}

CSS Textarea Not Filling Parent

I am having issues getting a text area to fill a parent div. I have found solutions involving setting the box-sizing to border-box, but this is not working for me. Any help would be much appreciated!
<div class="flx-modal">
<div class="flx-label">
<label for="CorrectiveActionSteps">Time Line:</label>
</div>
<div class="flx-txtarea">
#Html.TextAreaFor(a => a.TimeLine, new { #class = "form-control textarea" })
</div>
</div>
css:
.flx-modal{
display: flex;
width: 100%;
margin-bottom: 15px;
}
div.flx-txtarea {
background-color: red;
flex: 1;
margin-left: 15px;
padding: 0;
}
.flx-txtarea > textarea {
width: 100%;
height: 100%;
-webkit-box-sizing: border-box; /* <=iOS4, <= Android 2.3 */
box-sizing: border-box; /* Chrome, IE8, Opera, Safari 5.1*/
-moz-box-sizing: border-box !important; /* FF1+ */
}

If you add flex-direction: column, change flex: 1 to width: 100% and remove the margin-left: 15px, you get this
.flx-modal{
display: flex;
flex-direction: column;
width: 100%;
margin-bottom: 15px;
}
div.flx-txtarea {
background-color: red;
width: 100%;
padding: 0;
}
.flx-txtarea > textarea {
width: 100%;
height: 100%;
-webkit-box-sizing: border-box; /* <=iOS4, <= Android 2.3 */
-moz-box-sizing: border-box !important; /* FF1+ */
box-sizing: border-box; /* Chrome, IE8, Opera, Safari 5.1*/
}
<div class="flx-modal">
<div class="flx-label">
<label for="CorrectiveActionSteps">Time Line:</label>
</div>
<div class="flx-txtarea">
<textarea class="form-control textarea"></textarea>
</div>
</div>
You can also add flex-wrap: wrap;, remove margin-left: 15px and add this rule
div.flx-label {
width: 100%;
}
.flx-modal{
display: flex;
flex-wrap: wrap;
width: 100%;
margin-bottom: 15px;
}
div.flx-label {
width: 100%;
}
div.flx-txtarea {
background-color: red;
flex: 1;
padding: 0;
}
.flx-txtarea > textarea {
width: 100%;
height: 100%;
-webkit-box-sizing: border-box; /* <=iOS4, <= Android 2.3 */
-moz-box-sizing: border-box !important; /* FF1+ */
box-sizing: border-box; /* Chrome, IE8, Opera, Safari 5.1*/
}
<div class="flx-modal">
<div class="flx-label">
<label for="CorrectiveActionSteps">Time Line:</label>
</div>
<div class="flx-txtarea">
<textarea class="form-control textarea"></textarea>
</div>
</div>

Changing DropDownListFor Style

Been trying several ways to change the style of a DropDownListFor element. Either I am doing something wrong or there is something overriding it.. I've tried changing it in the view element and in the CSS.. and no go.
View:
<div style="width: 100%; ">
<div style="float: left;"> #Html.DropDownListFor(model => model.FranPID, new SelectList(Model.FranchiseList, "FranchiseID", "FranBusinessName", new { #class = "selectStyle" }))</div>
</div>
CSS:
.selectStyle {
border: 1px solid #93A9C8;
padding: 2px;
font-size: 1em;
color: #444;
width: 200px;
border-radius: 3px 3px 3px 3px;
-webkit-border-radius: 3px 3px 3px 3px;
-moz-border-radius: 3px 3px 3px 3px;
-o-border-radius: 3px 3px 3px 3px;
}
EDIT Solved:
Correct Call:
<div style="width: 100%; ">
<div style="float: left;"> #Html.DropDownListFor(model => model.FranPID, new SelectList(Model.FranchiseList, "FranchiseID", "FranBusinessName"), new { #class = "selectStyle" })</div>
</div>
Badsically I had the new inside the SelectList call.. moving it out (changing the parans) and all is working

Well, this is one way...I'd like others to show me if there's a better way because I need to learn more!
in the view:
<div id="products" class="container" >
<div class="row">
<div class="col-lg-10 col-md-5 col-sm-4 dropdownlist">
#Html.LabelFor(m => m.SelectedCategoryId)
#Html.DropDownList("id", Model.CategoryItems, new { #id = "ddlCategories", onchange = "this.form.submit();" })
</div>
</div>
</div>
and in the css:
/* the width of the entire in div of id=product */
#products {
width: 100%;
}
/* any item in the div of id=product with its class having dropdownlist */
#products .dropdownlist{
font-size: 18px;
}
/* any dropdown in product id div */
#products select{
color: blue;
}
/* specifically, any item with id of ddlCategories in the div of id=product */
#products #ddlCategories
{
color: red;
}
Hope this helps.

3 Flexible divs inside a flexible parent div

I am trying to get 3 flexible images to line up horizontally and stay within the confines of their flexible div container which has a flexible background,
the background of the container and the 3 images should all stay in relation to each other positionally so they are always on top of each other. they should get larger and smaller with the size of the browser window but not exceed 800 px in width.
The problem I am having is the background and footer slam to the left and the button divs go right.
My JSFIDDLE
HTML:
<div id="container">
<div id="footer">
<div id="left">
<input type="image" name="MyLeftButton" id="MyLeftButton" class="imgstretch" src="Images/MyLeftImage.png" style="border-width:0px;">
</div>
<div id="middle">
<input type="image" name="MyMiddleButton" id="MyMiddleButton" class="imgstretch" src="Images/MyMiddleImage.png" style="border-width:0px;">
</div>
<div id="right">
<input type="image" name="MyRightButton" id="MyRightButton" class="imgstretch" src="Images/MyRightImage.png" style="border-width:0px;">
</div>
</div>
</div>
CSS:
#container {
margin: 0em auto 0em auto;
width: 100%;
max-width: 800px;
}
#footer {
width: 100%;
max-width: 800px;
max-height: 80px;
float: left;
text-align: center;
position: fixed;
bottom: 0em;
background-color: #009FC1;
}
#left {
float: left;
max-height: 80px;
max-width: 294px;
width: 36%;
margin-left: 20px;
display: inline-block;
background-color: #CCCCCC;
}
#middle {
max-height: 80px;
width: 25%;
float: left;
max-width: 202px;
display: inline-block;
background-color: #889FC1;
}
#right {
max-height: 80px;
max-width: 294px;
width: 36%;
float: left;
display: inline-block;
background-color: #9999DD;
}
.imgstretch {
width:100%;
}

You have a couple of things going on.
1) Footer is set to fixed position, which makes it ignore the parent element and fix itself to the window. I don't know if this is an issue for your layout, but something to note.
2) You have inline styles set on elements that you already have a defined class for. Seems unnecessary.
3) Your dimension calculations are WAY off in relation to your % and px. 36% should be (0.36 * 800) which would come out as 288px, not 294px, and THEN plus a 20px margin.
I've forked your fiddle. http://jsfiddle.net/ZBJPF/8/
html {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
#container {
margin: 0 auto;
width: 100%;
max-width: 800px;
}
#footer {
width: 100%;
max-width: 780px;
max-height: 80px;
margin: 0 auto;
padding-left: 20px;
text-align: center;
position: fixed;
bottom: 0;
background-color: #009FC1;
}
.footer-element-lg {
float: left;
width: 36%;
max-width: 280px;
position: relative;
}
.footer-element-sm {
float: left;
width: 28%;
max-width: 220px;
position: relative;
}
#left {
background-color: #CCCCCC;
}
#middle {
background-color: #889FC1;
}
#right {
background-color: #9999DD;
}
.imgstretch {
width:100%;
border: none;
}
<div id="container">
<div id="footer">
<div id="left" class="footer-element-lg">
<input type="image" name="MyLeftButton" id="MyLeftButton" class="imgstretch" src="Images/MyLeftImage.png">
</div>
<div id="middle" class="footer-element-sm">
<input type="image" name="MyMiddleButton" id="MyMiddleButton" class="imgstretch" src="Images/MyMiddleImage.png">
</div>
<div id="right" class="footer-element-lg">
<input type="image" name="MyRightButton" id="MyRightButton" class="imgstretch" src="Images/MyRightImage.png">
</div>
</div>
</div>
I removed a 20px margin and made the spacing as a 20px padding for continuity sake.