I am trying to add new line in alert box.
I tried appending "\n" "< br >" and "< ul > < li >"
but still no luck
Can you please advise
I am using angular 6 and ng-bootstrap 3.x.x
alert-basic.ts
import { Component } from '#angular/core';
#Component({
selector: 'ngbd-alert-basic',
templateUrl: './alert-basic.html'
})
export class NgbdAlertBasic {
alertType = "danger";
alertMessage="< ul > < li > Why this is happening with me?< /li >< li > Can you solve the puzzle Pleazze < /li >< /ul > ";
}
alert-basic.html
< ngb-alert *ngIf="alertMessage" type="{{alertType}}" (close)="alertMessage = null">{{ alertMessage }}< /ngb-alert>
Usage of #ng-bootstrap alert:
https://stackblitz.com/angular/vkgxbmgdglnx
Works for me
Related
Here is a v-exapansion-panel of Vueitfy.3:
> <VExpansionPanels class="py-6 px-16">
> <VExpansionPanel
> expand-icon="material-symbols:arrow-circle-down-outline-rounded"
> collapse-icon="material-symbols:arrow-circle-up-outline-rounded"
> v-for="faq in faqs"
> :key="faq.question"
> :title="faq.question"
> :text="faq.answer"
> class="expansion-panel mb-2"
> />
> </VExpansionPanels>
I want the color of exapnd icons when hovering occurs, should have a new one.
how can do this?
Some simple CSS should do it. Select the expansion panel component then deep select the icon and apply color if hovering:
.v-expansion-panel >>> .v-expansion-panel-title__icon:hover {
color: red;
}
sandbox example
I would like to highlight weekends (Saturday and Sunday) on the datepicker.
I have tried readapting the lockedweekendfilter that uses boolean for day position 0 (Sunday) and position 6 (Saturday). This code is from the Material site version 6. However, it works only for disabling dates. I don't want to disable Sunday and Saturday.
#Injectable()
export class InjectDatePickerGeneral {
constructor() {}
lockedWeekendFilter(d: Date): boolean {
const date = new Date(d);
const day = date.getDay();
// Prevent Saturday and Sunday from being selected.
return day !== 0 && day !== 6;
}
}
Ideally, I would like to add a class for Saturday and Sunday in the datepicker so I can change the color and perhaps the background too.
This is doable using only CSS... extending the example shared here
relevant CSS:
::ng-deep .mat-calendar-body > tr > td:nth-child(6) > .mat-calendar-body-cell-content,
::ng-deep .mat-calendar-body > tr > td:nth-child(7) > .mat-calendar-body-cell-content { color:red !important; }
::ng-deep .mat-calendar-body > tr > td:nth-child(6),
::ng-deep .mat-calendar-body > tr > td:nth-child(7) { background: lightyellow;}
complete working stackblitz with Material 5.2.4 & angular 5.2.4
Hello all you smart CSS people... I've got a Doozey!
https://tritonmedicine.com/services is the page in question
It's the title down the page a bit, next to the picture
How do I style ONLY the ::before pseudo-class/id for the "preventative care" title? I'm trying to add the word "ADULT" in front of it, but if I use the id#1506, it won't work. If I only use the class (.tab-pane.active), it puts "ADULT" in front of every active title. What am I doing wrong here?
This DOESN'T work:
#1506.tab-pane.active > div:nth-child(2) > div > h3::before {
content: 'ADULT';
}
This DOES work (but styles them all, which I don't want):
.tab-pane.active > div:nth-child(2) > div > h3::before {
content: 'ADULT';
}
Any assistance is much appreciated :)
You can't select id that start with number in CSS selectors
For more CSS-Tricks
Solution
try somthing like these tab1506 or tabPane1506 or tp1506
But there is another solution of your problem, you can use
Attribute selector:
[id="1506"].tab-pane.active > div:nth-child(2) > div > h3::before {
content: 'ADULT';
}
For more read here
I am using Syntax Highlighter for my website.But how can I use it for inline code? I mean when I use it for inline code it still shows the line number 1 and I want to remove it as it makes no sense to show line number for inline code
i.e
I want
"This is a java print code System.out.println("Hello");"
instead of
"This is a java print code 1 |System.out.println("Hello");"
(notice the line number in second case)
I searched it on google but no success.
There is a configuration for turning line number on/off:
setting gutter attribute allows you to turn gutter with line numbers on and off.
Here is reference , Here is DEMO
You will have to use a custom code block and style it yourself to achieve it:
Algo:
If Inline Display Custom Block
Else Allow SyntaxHighlighter to do its magic.
I have used the below code:
CodeHighlighter.js
import {Prism as SyntaxHighlighter} from "react-syntax-highlighter";
import {dracula} from "react-syntax-highlighter/dist/esm/styles/prism";
import './CodeHighlighter.css'
import {Card} from "#mui/material";
function cleanChildren(children){
for (var i = 0; i < children.length; i++){
children[i] = children[i].trim()
}
return children
}
export default function CodeHighlight({node, inline, className, children, ...props}) {
var lang = "";
try {
lang = className.replace("language-", "");
} catch {
lang = "";
}
return (
<div className='highlightRoot'>
{inline ?
(
<Card className='inlineCode' variant='outlined'>
<code >{children}</code>
</Card>
)
: (
<div>
<SyntaxHighlighter
language={lang}
style={dracula}
showLineNumbers={!inline}
startingLineNumber={1}
children={cleanChildren(children)}
/>
<p>{lang}</p>
</div>
)
}
</div>
);
}
CodeHighlighter.css
.highlightRoot{
display: inline;
}
.inlineCode{
display: inline;
padding: 0 4px;
background-color: #4b4b59;
color: white;
}
I have been using this in conjunction with ReactMarkdown library.
What I was able to achieve:
So I'm trying to export a section of a website to PDF, and I'm able to output the HTML data properly, but the CSS codes just appears as text in the PDF.
>
def exportPDf(results, css, html):
>
> result = StringIO.StringIO()
>
> results_2 = StringIO.StringIO(results.encode("UTF-8"))
> css_encode = StringIO.StringIO(css.encode("UTF-8"))
>
> pdf = pisa.pisaDocument(results_2 , result)#ISO-8859-1
>
> if not pdf.err:
> return HttpResponse(result.getvalue(), mimetype='application/pdf')
> return HttpResponse('We had some errors<pre>%s</pre>' % escape(html))
>
> def get_data(request):
> results = request.GET['css'] + request.GET['html']
> html = request.GET['html']
> css = request.GET['css']
> return ExportPDf(results, css, html)
Again, the HTML is fine. IT's just the css part that doesn't render. It outputs the actual CSS codes to PDF.
If you've setup your CSS as such:
<style type="text/css">
body {
color:#fff;
}
</style>
Try wrapping your css with comments:
<style type="text/css">
<!--
body {
color:#fff;
}
-->
</style>
This will force the CSS as a comment and thus won't render. Since I can't see how your code is rendered this is just a guess but let me know if it does indeed work :)