I've made an expander component using Vue.js and I need to line break some of the answers. How would I add the line-break tag properly into the slot string? As of now they naturally show up as a string:
<expander identifier="pricing" question="This a question?" answer="This is an answer that really needs a <br/> tag."></expander>
You could apply the white-space: pre-wrap style to the element that you're rendering the answer string into, then you can use newlines in the answer string like this:
<expander :answer="'This is an answer that really needs a \n tag.'"></expander>
Related
I am writing a custom TagHelper that should change its behavior based on what child elements its owner tag has. This will be used for substituting custom html elements in a localized string.
Here's a simple example of what I'm trying to do:
<h2 locale-key="Hello, %1!">
<span class="bold" locale-parameter="1">#userName</span>
</h2>
In the example above, the TagHelper for LocaleKey will change the content of the <h2> tag to a localized string. If this is a simple string with no parameters, then I can just simply use output.Content.SetHtmlContent() in the TagHelper to set the h2's content to the string. However in this case, the localized string has a parameter (%1), and I want the corresponding child element (<span parameter="1">) to be substituted in the final output. So the final rendered html would look like this:
<h2>Hello, <span class="bold">Lázár Zsolt</span>!<h2/>
To achieve this, I should be able to see all the child elements in the DOM from the LocaleKey TagHelper, so I can generate the correct HTML code. In the TagHelper's ProcessAsync method I can access the TagHelperContext and the TagHelperOutput, but I couldn't find any information about child elements in either of these objects while debugging. Is this possible somehow?
Another approach is to leave the string as is, with the %1 parameter key, and then use the child ParameterTagHelper to substitute itself into the parameterized string. To do this, I'd have to see the siblings of the current tag from the TagHelper.
Recursion would also be fun (e.g. the <span> is also localized and has its own parameters), but for the scope of this question, I'd be happy if I could get this to work without recursion.
I posted too soon again... There is a GetChildContentAsync() method in TagHelperOutput that will... get the child content asynchronously.
I have the following HTML. I need to get the XPath using DOWN as a keyword.
<span>
"DEVICE: some random values that I'm not bothered about"
<span class="c-emoji_plain_text">:sensor_1000_4_1:</span>
"/interfaces/:/interfaces/:mib2d], TRIGGER: interface_status, MESSAGE:
$interface_name is DOWN"
</span>
The problem I'm facing here is, when I use the following XPath, it's not recognized:
//span[contains(text(),'DOWN')]
I see that the text above child span is used but not the text below it.
Kindly help.
Try to replace
//span[contains(text(),'DOWN')]
with
//span[contains(.,'DOWN')]
to select required span node
Note that such selector can match several elements. To make it more specific you can use
//span[span and contains(.,'DOWN')]
This will match span that contains span child node as well as "DOWN" substring
Also
//span[contains(text()[2],'DOWN')]
should do the trick
I am using the wheelnav.js library. Some of the items in the wheel have text which needs to be wrapped onto a new line due to the length being too long.
I have tried using the <br /> html tag but it is rendered as text.
You have to use \n.
myWheelnav.createWheel(["Short text","This is a\nlong text"]);
<div class="request-credentials-view drawer">
<div class="tip-inner" style="width: 686px;">
<div class="drawer-arrow" style="left: 926.55px;"></div>
<h3 class="heading">We've sent you an email </h3>
Need to fetch the text "We've sent you an email". When used the bellow in x-path checker:
//div[#class='request-credentials-view drawer']//h3[#class='heading']//*[text()="We've sent you an email"]
got "No match found". Also:
//div[#class='request-credentials-view drawer']//h3[(#class='heading')]//*[text()='<template>']
doesn't work in selenium web driver code.
Have you tried contains() function
//h3[contains(text(),"We've sent you an email")]
One thing I really like about contains is that you can do a partial match in text() specially excluding the white spaces
Alternatively, if you want to rely on the element's text, use normalize-space() to strip whitespaces around the text:
The normalize-space function strips leading and trailing white-space
from a string, replaces sequences of whitespace characters by a single
space, and returns the resulting string.
//h3[normalize-space(.) = "We've sent you an email"]
Or, you can locate the h3 element using a CSS selector checking class attribute values along the way to the desired element:
div.request-credentials-view h3.heading
Try this:
String message = driver.findElement(By.className("heading")).getText();
System.out.println(message);
I have some dijit.InlineEditBox widgets and now I need to add some search highlighting over them, so I return the results with a span with class="highlight" over the matched words. The resulting code looks like this :
<div id="title_514141" data-dojo-type="dijit.InlineEditBox"
data-dojo-props="editor:\'dijit.form.TextBox\', onFocus:titles.save_old_value,
onChange:titles.save_inline, renderAsHtml:true">Twenty Thousand Leagues <span
class="highlight">Under</span> the Sea</div>
This looks as expected, however, when I start editing the title the added span shows up. How can I make the editor remove the span added so only the text remains ?
In this particular case the titles of the books have no html in them, so some kind of full tag stripping should work, but it would be nice to find a solution (in case of short description field with a dijit.Editor widget perhaps) where the existing html is left in place and only the highlighting span is removed.
Also, if you can suggest a better way to do this (inline editing and word highlighting) please let me know.
Thank you !
How will this affect your displayed content in the editor? It rather depends on the contents you allow into the field - you will need a rich-text editor (huge footprint) to handle html correctly.
These RegExp's will trim away XML tags
this.value = this.displayNode.innerHTML.replace(/<[^>]*>/, " ").replace(/<\/[^>]*>/, '');
Here's a running example of the below code: fiddle
<div id="title_514141" data-dojo-type="dijit.InlineEditBox"
data-dojo-props="editor:\'dijit.form.TextBox\', onFocus:titles.save_old_value,
onChange:titles.save_inline, renderAsHtml:true">Twenty Thousand Leagues <span
class="highlight">Under</span> the Sea
<script type="dojo/method" event="onFocus">
this.value = this.displayNode.innerHTML.
replace(/<[^>]*>/, " ").
replace(/<\/[^>]*>/, '');
this.inherited(arguments);
</script>
</div>
The renderAsHtml attribute only trims 'off one layer', so embedded HTML will still be html afaik. With the above you should be able to 1) override the onFocus handling, 2) set the editable value yourself and 3) call 'old' onFocus method.
Alternatively (as seeing you have allready set 'titles.save_*' in props, use dojo/connect instead of dojo/method - but you need to get there first, sort of say.