There are several html files and one css file that is used from all the html. I used the library flutter_html and the html files are being displayed normally but without css.
Is there a way to "import" the css file as it is without converting it to Dart?
Below is part of the css file. It's very simple. If it cannot be imported what is the best way to translate it to Dart code?
body {... margin-right:20; margin-bottom: 3 ...}
table {... margin-bottom: 3}
h1 {...}
h2 {font-family: 'palatino linotype'...}
h3 {...}
p:first-letter {...}
body {...}
try to use this library it can identify css as well
and then you can use your css as inline style
String htmlContent =
"""
<p>This has no font size css property, but global style will be applied</p>
<a style='color: orange;'>The inline color for this is orange, but it will
get overridden by global style defined below</a>
""";
HTML.toTextSpan(
context,
htmlContent,
overrideStyle: {
"p": TextStyle(fontSize: 17.3),
"a": TextStyle(color: Colors.red),
// specify any tag not just the supported ones,
// and apply TextStyles to them and/override them
},
);
Related
I have an html-document and a typescript-document, they are linked together.
in index.html
<p id="miniTag" class="red">This is my paragraph</p>
in main.ts
document.getElementById("miniTag") as HTMLElement;
My question is--> how do I make the p-tag/ID red through typescript?
I have tried this
in main.ts
document.getElementById("miniTagg") as HTMLElement{
color: red;
}
but I get wrong message because of {} ..
This will set the "color" css property to "red":
document.getElementById("miniTagg").style.color = "red"
This page gives more information about how to modify the style of an element using javascript.
I want to add some css style that I calculate in my ruby code within a haml template.
I understand that I should use the :css filter to add a style tag for my css like this:
%head
- my_color = "#0000ff"
:css
.my-class {
/ how can I set my_color here:
background-color: red;
}
But how can I use my_color inside the filter?
Edit: To be clear, I am looking for a <style> tag, not inline css on an element.
You can interpolate the variable with #{my_color}:
- my_color = "#0000ff"
:css
.my-class {
background-color: #{my_color};
}
I am using draft js to create email templates in a reactJs application.
I implemented custom block types and with css I was able to align my columns properly (left, center, right). I used RichUtils to toggle block type.
However, my problem is when I am exporting the editor state into html, only the tags are exported, but I need the style too, so that the text-align style remains the same.
I use stateToHtml from draft-js-export-html when exporting the html.
I was also thinking about adding custom attributes, but I was not successful with it yet.
I appreciate every answer and thank you for the help in advance.
you can try this way:
import { ContentState, convertToRaw } from 'draft-js';
import draftToHtml from 'draftjs-to-html';
const currentContent = this.state.editorState.getCurrentContent();
return draftToHtml(convertToRaw(currentContent));
As an extension on #ArtemZubarev , there will be a problem when exporting it to html because it will contain no styles. So this requires 2 answers
How to get state to html: credits to #ArtemZubarev
import { ContentState, convertToRaw } from 'draft-js';
import draftToHtml from 'draftjs-to-html';
const currentContent = this.state.editorState.getCurrentContent();
return draftToHtml(convertToRaw(currentContent));
However, this will return unstyled elements, for example: <h1>Hello World</h1>.
This raises the question: How to keep the styling?
Option 1: CSS
Option 2: Create a render function that will inject the styles as inline
private injectHTML = (html?: string) => {
return `<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
${
html
}
</body>
</html>`
}
I'm trying to use the ":target" CSS class to highlight a section of html based on a link clicked that includes an anchor fragment(ex: C:\Desktop\Test.html#link). The regions that are being modified in my document have "name" identity attributes. The target pseudo class worked with "id" attributes for me but am having trouble with "name". Thanks.
PS: The reason I'm using "name" is because I'm writing VBA scripts about HTML documents that were directly converted from MS Word. (Word uses "name" for bookmark conversions to links)
Sample Code I have tried:
a:target {
color: red;
}
a[name = test]:target {
color: red;
}
1st CSS is just for styling (how the content looks, layout etc...), use js you can easily update the content (check the example)
CSS describes how HTML elements are to be displayed on screen, paper, or in other media.
2nd
If you just want to check if the <a> element has a name attribute, then use a[name] (2nd link in my example)
If you need partial match do a[name*=test], any name contains test will be selected. (3rd link in my example)
var alltest = document.getElementsByName('test');
alltest.forEach(function(test) {
test.setAttribute('href', '#newlink');
test.innerHTML = 'updated link';
});
a[name] {
color: green;
}
a[name*=test] {
color: red;
}
google.com<br>
<a name="alsowork" href="google.com">google.com</a><br>
<a name="test" href="google.com">google.com</a>
<a name="test" href="google.com">google.com</a>
<a name="test" href="google.com">google.com</a>
I'm creating a tumblr them and I have to write an external CSS file but I am having trouble editing the css style of the post elements.
This its structure:
<li class="post quote">
{other code}
</li>
The problem is that the class name has a space in it.
How would I create a CSS class to access this? And yes, I know I can just put a style attribute in the element tag but I was kind of hoping for another option.
The problem is that the class name has a space in it.
This is not possible in CSS. What you are doing is giving the element two classes.
You can address them such:
.post.quote { .... }
but in your case, it's probably better to use a valid separator like
post_quote
This element actually has two classes - it is marked with both the post class and the quote class. So, you can use the following selectors to access it:
// css
.post { ... } // elements with the post class
.quote { ... } // elements with the quote class
// jQuery
var postLis = $('.post');
var quoteLis = $('.quote');
You can also stack selectors to return all elements which meet all conditions in the selector, by including the different selectors together:
// css
.post.quote { ... } // elements with both the post and quote classes
// jQuery
var postAndQuoteLis = $('.post.quote');
This might work:
$('li').each(function() {
if($(this).attr('class').indexOf(" ")>-1) {
$(this).css('border','1px solid #ff0000')
}
}