For example, span>strong expands incorrectly to: < span > < strong > < / strong > < / span >
I'm using JSX Harmony, WebStorm 2016.1.1, ES6
Update: The problem is JSX Harmony only supposed to have all markup wrapped in ONE element within the return statement.
As I see now, that is the reason the first time it doesn't have a problem, but then when it does is because there are sibling elements at the root level.
Related
I'm currently trying to locate this check box. I know I can use a xpath to locate it but I'm trying to see if there's a more efficient way of doing it. The problem I'm seeing is that there are multiple div class with the same name. I'm trying to find this specific one and isolate it. I'm trying to make my code more efficient if possible.
Xpath
/html/body/div/div/div/div[1]/cow-data/cat-panel/section/div[1]/div/div/md- checkbox[4]/div[1]
Element path:
<div class="cd-container" cd-gar-ripple="" cd-gar-ripple-checkbox=""><div class="cd-icon"></div></div>
Code I'm trying to use:
find('cd-container').click
The problem I'm seeing is that the div id 'cd-container' has multiple occurrences on the page and thus this doesn't work. I'm trying to see if I can find a more efficient way of doing this.
As per the HTML cd-container is the value of the class attribute but not id attribute. So your effective line of code will be:
find('.cd-container').click
If you want to find an element (AND THEN), return it's xpath. Use capybara.
This will allow you to locate using text / css selector. And then you can just return the path of the element.
i.e.
page.find('td', text: 'Column 1').path # Random td with text
page.find('#main').path # ID
page.all('div').select { |element| element.text == 'COoL dIv' }.first.path # First div that matches certain text
page.find('.form > div:nth-of-type(2)').path # Specific structured div
page.all('p div li:nth-child(3)').sample.path # Random li
Is it possible to output a selector that isn't compliant with CSS standards? For example, I want to use this selector:
Button < Icon {}
But sass complains because it doesn't know what to do about the <. I'm thinking there has to be a way to output the selector without it being parsed by sass.
Thanks
sass eventually will be parsed to css and < is not valid css operator. This < fake operator would be an attempt to select a direct Parent from a given child, like > selects a direct child from given parent. CSS doesn't allow that. As its name says cascading style sheets, you go top from bottom, you can only select children, siblings at best, but no parents.
Preprocessors let you write easier styling with function, mixins, cleaner syntaxes, but dont allow you to violate css basic rules, you cant go around it.
What are the advantages / disadvantages of the two different selectors?
Should I use one over the other?
I think it's primarily a matter of user preference.
To select the first child of all <p> elements, you'd do:
$("//p/*[1]") in Xpath
$$("p > *:first-child") in CSS
I prefer using Xpath, but YMMV.
Note that, internally, all CSS selectors are converted to Xpath. For example, the selector $$("#one") will be converted into $(".//*[id='one']").
Just a few notes:
indexing starts from 1 in XPath, so it's //p/*[1]
the CSS selectors in Tritium allow you to prefix a selector with >, as in $$("> p > :first-child"); this will be converted into a scoped search (i.e., ./p/*[1])
because CSS selectors are (currently) dynamically converted into XPath, there's a slight performance hit compared to using straight XPath
I'm trying to use markdown to format a web page. Part of the web page has block quotes and code blocks. In some of the code blocks, the leading and trailing white space (empty lines) is important. I can't find much on this and can't figure out how to include the leading and trailing empty lines.
> empty_line
> empty_line
> Stuff Here
> empty_line
> empty_line
.. if that makes any sense.
If you can use HTML tags, have you tried using the pre tags?
Stuff 1 here
Stuff 2 here
I use pre at very top with HTML tag brackets of course and closed that tag at the bottom. Using this tag retains the blank lines + creates a code block as you see.
I'm trying to use CKEditor for a project and I found the need for bookmarks. The documentation says that the intrusive way to create bookmarks add span elements in the source. This is just fine with me and that is exactly what I would want it to do.
However, I can see in the source that the span elements are wrapped in p elements.
<p><span id="cke_bm_147S" style="display: none;"> </span> </p>
This creates problems for me with the way the text is displayed and mainly when trying to navigate the document.
I didn't find anything that even mentions the creation of these p elements. Could I have set something wrong? Is there a way to prevent these to be created?
Thank you
The span bookmark is an inline element so it cannot be the root element of the content. It is wrapped in a block element (which is by default a paragraph).
This behaviour depends on editor enterMode. If it is a default one - ENTER_P - you will have a p element as a wrapper. For ENTER_DIV you will have a div element. And for ENTER_BR there will be no wrapper which means it is the effect you would like to achieve.
Check this codepen for demo.
Please keep in mind that enterMode other that ENTER_P is not recommended due to some caveats. So maybe in your case it will be better to reconsider some different solutions instead of changing enterMode.