I write an Angular 5 application, and I cannot get some CSS rules generated.
Here is a small example, HTML:
<table class="table-rule">
<tr>
<td class="cell-rule">demo text</td>
</tr>
</table>
SCSS:
.table-rule {
font-weight: bold;
.cell-rule {
color: red;
}
}
And here is the problem: I should get a bold red text in a table, but I get only red text (not bold). I found out that Angular generates such a CSS:
.table-rule .cell-rule { color: red }
It does not generate CSS rule for ".table-rule" selector. Only for ".table-rule .cell-rule" selector.
Any ideas why is it so and how can it be fixed?
P.S. pure HTML+CSS works fine: http://jsbin.com/maxagin/edit?html,css,output
Found a problem: in a production .scss file there was an empty comments line between two rules:
.rule1 {
...
}
/**/ <---- this one!
.rule1 {
...
}
Removing this comment (/**/) fixed SCSS to CSS conversion.
Strange bug in SCSS.
Related
I want to change the styles of the today-date cell when the datepicker is opened and focused for the first time.
Right now, when I open the datepicker, the today-date cell has the following style:
As you can see, the 14th day cell has the default material background color applied.
I want to change this specific property. However, when I try to inspect this element, the class is not found since the datepicker focus is lost (the background-color disappears, leaving only the border on the cell).
I have tried playing around with .mat-calendar-body-today:focus or .mat-calendar-body-hover but neither of them seem to access the today-date when it is initially focused.
Thanks in advance.
Following up from alin's answer, the table cell class .mat-calendar-body-active grabbed my attention.
Indeed, this is the class that should be used in combination with .mat-calendar-body-today, as opposed to .mat-calendar-body-selected.
I managed to access the today-date cell when datepicker is first focused like so:
/* SCCS alternative */
.mat-calendar-body-active {
.mat-calendar-body-today {
color: red;
background-color: blue;
}
}
/* CSS alternative */
.mat-calendar-body-active > .mat-calendar-body-today {
color: red;
background-color: blue;
}
it works for me
.mat-calendar-body-cell:not(.mat-calendar-body-disabled) {
&.mat-calendar-body-active {
&:focus {
.mat-calendar-body-cell-content:not(.mat-calendar-body-selected).mat-focus-indicator.mat-calendar-body-today {
background-color: rgba(0,0,0,.04);
}
}
}
}
Maybe this can help you
<td role="gridcell" class="mat-calendar-body-cell mat-calendar-body-active ng-star-inserted" tabindex="0" data-mat-row="2" data-mat-col="5" aria-label="January 14, 2022" aria-selected="true" aria-current="date" style="width: 14.2857%; padding-top: 7.14286%; padding-bottom: 7.14286%;">
<div class="mat-calendar-body-cell-content mat-focus-indicator mat-calendar-body-selected mat-calendar-body-today"> 14 </div>
<div aria-hidden="true" class="mat-calendar-body-cell-preview"></div>
</td>
and this is the class that you want to update
.mat-calendar-body-selected {
background-color: red;
}
So you might combine this .mat-calendar-body-selected with .mat-calendar-body-today
I've got a table that needs to be striped but it has some rows that may become hidden later on. After hiding some of the rows re-striping does not occur so the striping is off. How can I force the table to re-stripe itself? Here is my css that I feel should work, but it's not. And then also my html.
.isHidden {
display:none;
}
tbody {
tr:not(.isHidden):nth-child(odd) {
background: rgb(238, 238, 238);
}
}
<tbody>
<tr [ngClass]="{'isHidden': !line.get('isVisible').value}" *ngFor="let line of lineDetailsArray.controls; let i=index;">
...
</tr>
</tbody>
At present, you won't be able to solve the problem with CSS only, unfortunately. True, there's a potentially useful addition in the spec - :nth-child(An+B of S). The following example exactly matches your case:
Normally, to zebra-stripe a table’s rows, an author would use CSS
similar to the following:
tr {
background: white;
}
tr:nth-child(even) {
background: silver;
}
However, if some of the rows are hidden and not displayed, this
can break up the pattern, causing multiple adjacent rows to have the
same background color. Assuming that rows are hidden with the [hidden]
attribute in HTML, the following CSS would zebra-stripe the table rows
robustly, maintaining a proper alternating background regardless of
which rows are hidden:
tr {
background: white;
}
tr:nth-child(even of :not([hidden])) {
background: silver;
}
The caveat? Support of this option in browsers is not even limited: it's non-existent.
But still, there's a way out of this misery. Even though Angular won't just let you place ngIf and ngFor on a single element (it'll be way too simple I suppose), there's a workaround - using <ng-container> as a placeholder:
<ng-container *ngFor="let item of list">
<ng-container *ngIf="!item.hidden">
<tr>
<td>{{item.name}}</td>
<td><input type="checkbox"
[checked]="item.hidden"
(change)="item.hidden = !item.hidden" /></td>
</tr>
</ng-container>
</ng-container>
Demo (kudos to #imkremen for helping to create this one).
I am constructing a basic html5 website with 5 pages for practice as I am in the process of relearning html5 and CSS.
I have a div with ID "education" and Class "content-list".
Inside this div is a Caption and an unordered list Class "content-ul"(NOTE: Caption is contained in "content-list"). The list contains 3 list items.
I want to set the font-weight to bold for the caption, but not the unordered list.
Here's what I have:
HTML:
HTML:
<div id="education" class="content-list">
<caption>Education:</caption>
<ul class="content-ul">
<li>Tafe</li>
<li>College</li>
<li>High School</li>
</ul>
</div>
CSS:
.content-list {
... styles
font-weight:bold; /* Sets caption and list to bold */
.... styles
}
.content-ul {
.... styles
font-weight:normal; /* Sets list back to normal */
.... styles
}
This achieves the desired result, but I am wondering if there is a better/more efficient way of doing this.
Keep in mind, 4 of the 5 pages use this code. For this reason I opted against using in line styles as I would have to do it 4 times in total. This would remove the need to set the list to bold and then back to normal again, but would still use more code than the chosen method.
Any help/suggestions would be great.
caption is for tables, use i.e. a h4 for lists
<div id="education" class="content-list">
<h4>Education:</h4>
<ul class="content-ul">
<li>Tafe</li>
<li>College</li>
<li>High School</li>
</ul>
</div>
Side note, styling a caption work when used properly
table, th, td {
border: 1px solid black;
}
table caption {
color: red;
font-weight: bold;
}
<table>
<caption>Caption</caption>
<tr>
<th>Header</th>
</tr>
<tr>
<td>Cell</td>
</tr>
</table>
Looking through your example, I can see you only want Education to be bold and not the content other than it. For this simply, do it like
caption{
font-weight:bold
}
CSS in OP won't be needed.
I can style a table in react via:
var tableStyle = {
"border": "1px solid black"
};
return (
<div>
<h1>My Awesome Table</h1>
<table style={tableStyle}>
<th>Awesome Header</th>
Coupling my style and html into a reusable component is the react way of doing things. How can I effectively style my whole table? I could style each header via:
<th style={headerStyle}>
<th style={headerStyle}>
<th style={headerStyle}>
and
<tr style={rowStyle}>
<tr style={rowStyle}>
That's not very efficient. In plain old CSS I can just do
table {
//boom style all the things
}
th {
}
tr {
}
Using CSS, particularly in a SPA application can become a maintenance headache. So I like the idea of sticking my style into this component where nobody else will inherit it. How can I do it without writing a bunch of repetitive code?
Not entirely sure I understand what you're looking for, but you want a better way of having css and markup in one file with no external dependencies?
If so, this might work:
return (
<style>{`
table{
border:1px solid black;
}
`}</style>
<div>
<h1>My Awesome Table</h1>
<table>
<th>Awesome Header</th>
...
)
Using template literal string formatting seems necessary here to support the <style> contents to span across multiple lines.
Alternatively:
<style>{"table{border:1px solid black;}"}</style>
You should have all of your styles in a separate folder/ and file and maintain separation of concerns. No CSS declarations should be in your JavaScript. If must style your components, you should be using CSS classes instead of inline-styles.
Then you could style all of your tables from one CSS file.
/*CSS file*/
table.myAwesomeTable {
...code
}
/*Markup */
<table className="myAwesomeTable">
</table>
define style in your global theme.js
"table, th, td" :{
border: "1px solid white" },
"th, td" : {
textAlign: "center"
},
All tables in App will now display white border
i have a css file style.css
which has following code
.myClass
{
color:red;
}
i want to use this css file to change the color of text in browser
following code of my program writes the text in browser
StringStream pageContent(sz, max_bytes);
pageContent.Write("Hello World!");//writes hello world in browser
when i do
pageContent.Write("<div style =\"color:red\"> hello world! <\div>");
text gets red but when i try to use css file using following code it doens't work
pageContent.Write("<link href=\"style.css\" rel=\"stylesheet\" type =\"text/css\">");
pageContent.Write(" <div id= \"myClass\"> Hello world! <\div>" );
any idea what i'm doing wrong or where should i place my file and how should i give the path to make it work?
HTML: <div class="myClass">...</div>
CSS: .myClass { color: red; }
or
HTML: <div id="myId">...</div>
CSS: #myId { color: red; }
Research CSS selectors, there's enough literature about that on the web for me not to repeat it here. Basically #someId CSS selector for id="someId" HTML attribute and .someClass CSS selector for class="someClass" HTML attribute but there's a lot more to CSS selectors than just that.