I am struggling with an SVG, where I embed HTML via foreignobject. Here's a minimal component:
val SvgDemoComponent = ReactComponentB[Unit]("Demo")
.render { _ =>
<.svg.svg(
<.svg.foreignobject(
<.div("Hello From SVG")
)
)
}
.build
The problem is that the "Hello" text is not visible. However, I can make a minor whitespace edit in Chrome or FF and then it becomes visible:
Update: The problem is reproducible with plain React, i.e. it is not caused by the scalajs-react abstraction. I have just posted it as a new SO question.
Caused by a spelling mistake in scalajs-react: foreignObject requires a capital O.
PR submitted.
Related
I'm writing some quizzes for Moodle using R/exams' exams2moodle. The XML file is created fine and I can import the quiz to Moodle ok, however, any question that has R code as part of either the question or the solution has the R code on a dark background making it almost impossible to read. Is there an option somewhere that controls this?
I am using this code to create the XML:
exams2moodle(c("q1.Rmd", "q2b.Rmd", "q3.Rmd", "q4.Rmd", "q5.Rmd", "q6.Rmd"),
name = "GLM_prac1",
iname = FALSE,
converter = "pandoc-mathjax",
cloze = list(cloze_schoice_display = "MULTICHOICE_V"))
And this is an example of the issue:
The color of the R code displayed is not controlled through exams2moodle(), at least not explicitly. What exams2moodle() does, is to put verbatim code input and output into standard HTML tags for this <pre><code> ... </code></pre>. This stands for pre-formatted text with markup for typewriter code. (Actually, this is not even produced by exams2moodle() directly but by pandoc.)
The rendering of these standard HTML tags is then controlled through the CSS styles employed in your Moodle installation. In a vanilla Moodle installation you currently simply get a black font on the same light blueish background as for regular text. In previous versions the background was light gray. Given that you have light orange background for text and dark background for code, I guess that this is a setting in your Moodle installation. Hence I would recommend to reach out to the Moodle team at your university and ask them about this. This seems to be a poor setting that would likely affect others as well.
If you cannot get in touch with the Moodle team or they are unwilling to change their CSS, you can insert your own custom CSS code into your exercises. The advantage is that you have full control over the color then. The disadvantage is that you yourself have to include that style code into every exercise where it is needed. It is not hard but tedious. For example, you can include the following R code chunk in the exercise directly at the beginning of the question section:
Question
========
```{r, echo = FALSE, results = "asis"}
writeLines("<style>
pre {
background: #FFFFFF00
}
</style>")
```
This simply inserts a short HTML snippet with CSS into your Rmd exercise:
<style>
pre {
background: #FFFFFF00
}
</style>
This will instruct the browser to use the background color #FFFFFF00 (fully transparent white) for all <pre>-formatted chunks. Of course, you can also play around with this and use a different color, say #EEEEEE (light gray) or similar.
After update from v3 to v4.8.3 do not work customizing components. My goal is to override Select component to get text color 'red'.
const styles = theme => ({ temp: { fontSize: 12, color: "red" })
...
<Select classes={{ root: classes.temp }} ....> ...</Select>
but MuiInputBase-input class always stay on top.
https://i.imgur.com/JGK7J89.png
I see that there are diffrents in styles loading by html head import, my current version(v4) is:
https://i.imgur.com/gAlECET.png
I see that import is doubled, and overrides my custom style.
On v3 all mui styles imports was placed on top of list and not mixed vs custom styles. I cant find more info to get solution and reason of doubling imports. where error may arise?
edit:
i must give some more details...
Problem appered after a big legacy project was updated. For represet my problem, i cut most of code and create demo on codesandbox .
Unfortunately it work fine on codesandbox, and dont let see a problem. if i download zip and start it - i have my problem. Tried on two machine ubuntu 18.04 and MacOS, both have that problem - colour red dont applied to second select. Some more detail are in issue if it will helpfull for someone. Reason in solution below
I have created sandbox for you where you can see the overwritten menu items.
Code sandbox: https://codesandbox.io/s/override-select-component-material-ui-c1io6?fontsize=14&hidenavigation=1&theme=dark
The reason was that nested component has wrong import statement. Wrong import that was work "properly" in v3 for some reason:
import InputBase from "#material-ui/core/InputBase/InputBase";
must be:
import InputBase from "#material-ui/core/InputBase";
becouse it, my styles was overriding by base style
Using the wysihtml5 editor, is there a way to disable the parser rules for pasting, or simply paste plain text? Such that only plain text, with no tags or any other formatting is pasted? Commenting out my parser rule does not work for me because I still want pre-populated text (with anchor and line-break tags) to be parsed by my parser rules. Although not essential, I also would like the editor to detect URLs and create anchors as I type, but not necessarily when pasting.
The reason I want to do this is because a lot of garbage characters (like new lines %0A and span tags) are pasted when pasting using the parser rules (specially from MSWord, but also from web content). Pasting plain text would prevent random hidden content from being pasted.
Just for reference, my parser rules are extremely simple:
var wysihtml5ParserRules = {
tags: {
br: {},
a: {
set_attributes: {
target: "_blank",
rel: "nofollow"
},
check_attributes: {
href: "url" // important to avoid XSS
}
}
}
};
If you want plain text all the time, go to your project Scripts and you will find file wysihtml5-toolbar.min.js
Find text
wysihtml5.dom.getPastedHtml=function(a){var b;return
a.clipboardData&&(wysihtml5.lang.array(a.clipboardData.types).contains("text/html")?b=a.clipboardData.getData("text/html"):wysihtml5.lang...
Change b=a.clipboardData.getData("text/html") to "text/plain"
I'm using the internationalization of GWT to manage the different languages of my application. I have a text where some words are in bold. Therefore I did the same thing as described here.
#DefaultMessage("Welcome back, {startBold,<b>}{0}{endBold,</b>}")
String testMessage(String name);
However, when I run the application, I get "Welcome back, < b>Peter< /b>" (the HTML is written out and not interpreted. I intentionally put a space between < b so that this text editor does not interpret the html tag).
Does anyone know how to solve this issue? Many thanks in advance!
P.S.
Code fragment which gets the language string:
Label label = new Label();
label.addStyleName("intro-Text");
label.setText(new HTML(trans.testMessage(name)).getHTML());
Instead of using a Label use the HTML widget.
HTML text = new HTML();
text.addStyleName("intro-Text");
text.setHTML(trans.testMessage(name));
Hope that helps.
Pardon my excruciatingly simple question, but I'm quite new to the world of Lift (and Scala, for that matter).
I'm following the "Getting Started" tutorial on the Lift website: http://liftweb.net/getting_started
I've got it up and running but I'd like to make a quick modification to the app so that every time I press enter in the textbox, it maintains focus. I've managed to get it to focus on page load using FocusOnLoad but I can't quite figure out how to get it to keep focus (using only Lift's classes, no custom JavaScript).
Here's what my def render method (the bind part) code looks like:
def render =
bind("chat", // the namespace for binding
"line" -> lines _, // bind the function lines
"input" -> FocusOnLoad(SHtml.text("", s => ChatServer ! s)) )
So that works for getting it to focus upon page load. But since this is a Comet app, the page only loads once.
All my other code looks exactly like the tutorial FWIW.
The render method in a CometActor only gets called when the CometActor is first initialized, which happens when the user first goes to the Chat page. Afterwards, the page updates usually happen inside of the lowPriority or highPriority methods. So if you want the text box to become focused after the user sends an AJAX update to the CometActor, you should add it to one of those methods. An example which uses JQuery would be this:
override def lowPriority = {
case m: List[ChatCmd] => {
val delta = m diff msgs
msgs = m
updateDeltas(delta)
partialUpdate((JqJE.Jq(JE.Str("input[type=text]")) ~> (new JsRaw("focus()") with JsMember)).toJsCmd)
}
}
I haven't tried compiling this, so it might need some slight tweaking. Essentially, it's just sending another JavaScript command to the browser that uses JQuery to find a text input on the page and then sets the focus on that control. If there are multiple text inputs, you'll need to modify the class on the HTML template for the control you want to set focus on, then make sure that you change your render method to be:
def render =
bind("chat",
"line" -> lines _,
"input" -%> FocusOnLoad(SHtml.text("", s => ChatServer ! s)) )
The -%> method instructs Lift to not ignore any attributes in the template during the bind phase. Then you can modify the JQuery selector to use that class to find the right control to focus on. Part of the form security in Lift obscures the ID assigned to forms and their controls to prevent XSS attacks, so it's generally better to use class selectors to find form controls using JQuery or some other Javascript framework.