I'm wondering if there is a way to use :stringByEvaluatingJavaScriptFromString to fetch a specific css attribute from an element.
For instance, say I want to validate a background image and the css specifies background-image: blue.png. I'm having trouble getting :stringByEvaluatingJavaScriptFromString to do anything other than the basic innerHTML example.
document.getElementById or document.getElementsByClassName yield an empty array.
Related
I have the following in the render method of one of my components:'
return <Paper key={insight._id} style={styles[viewMode]}>
{cardCover}
<div style={styles[viewMode].content}>
<div
style={styles[viewMode].name}
onTouchTap={_ => onClickInsight(insight._id)}
>
{insight.title}
</div>
[...]
It seems that since Enzyme works around using selectors, my best option is to just use put className="something" on my divs, even if I'm not using them as CSS classes at all. Otherwise, I have to figure out how many divs are within Material UI's Paper component, and work out some overly complicated query to dig X levels deep into divs, just to get to my clickable div that I want to test. Not to mention, if I happen to move my clickable div down or up a bit, it breaks the test even though the div is technically still being rendered and still clickable.
Unless there's another way?
Enzyme gives you a few options here on top of CSS selectors. You could find() using a React Component Constructor to first find your Paper component, and then use a CSS selector from there.
const myComponent = wrapper.find(Paper);
If you just want to verify that some child has onTouchTap set, you can use the prop syntax css selector.
I am using coffeescript with react-rails gem. In the measure.js.coffee, there is no span present in the coffee code, but when the HTML is getting painted a mysterious ghost span is appearing. Below is a screenshot of code and HTML generated by it.
In my code, there is no span in between carousel-mImages and mtag-images. Is it because of the reactCSSTransitionGroup = React.createFactory(React.addons.CSSTransitionGroup)
Yes, ReactCSSTransitionGroup is a wrapper around ReactTransitionGroup.
And from the official docs here:
By default ReactTransitionGroup renders as a span.
You can change this behavior, and render as another type of component, but this would mean you have to manually configure and render the ReactTransitionGroup.
This may save you one wrapper element in the DOM, but this depends on your component tree structure.
How can I personalize a list within ServiceNow?
I mean, I have this list:
But I think its very confusing to see the position on the right side.. How can I center it?
Like CSS customization or JS or something like that.. where can I find the customization form?
You can customise the position of the field content by using Field Styles.
If you mean customising the position of the field header, I have had a play around with doing this and I seem to have got it working.
If you inspect the HTML of the column header you want to target (the th tag), you'll see that there's an attribute on it called glide_type which contains in it the type of column. You can use this to create a CSS rule to target only headers of a particular type.
For example, I have a field of type decimal, and the th tag has the following attribute:glide_type="decimal". So to target that element, I could create a CSS rule like the below:
th.text-align-left.list_header_cell[glide_type="decimal"] {
text-align: right;
}
The hacky part is including that CSS so that it applies throughout the SN interface. You can use a UI Script to run some JavaScript which includes the Style Sheet. So if you put the above CSS inside a new Style Sheet (navigate to Content Management > Design > Style Sheets), and copy that new Style Sheet's Sys ID, you can create a UI Script with the below in it to include that Style Sheet on all pages:
link = document.createElement("link");
link.href = "STYLE_SHEET_SYS_ID_GOES_HERE.cssdbx?";
link.type = "text/css";
link.rel = "stylesheet";
link.media = "screen,print";
document.getElementsByTagName("head")[0].appendChild(link);
After doing that, you'll see that the Style Sheet is getting loaded on all pages, and if you've written your CSS right then you should find that the column header is now right-aligned!
As #Kirk said, performing this kind of customisation will mean that it's hard for ServiceNow Customer Support to assist if there's something you've customised getting in the way of their troubleshooting. Take this into account if you decide to implement something like this, and also thoroughly test this on a non-production instance.
In addition to the above, this solution may break in future releases as ServiceNow may decide to change the way that lists work and thus the CSS selector may no longer target the right/any element.
Hope this helps!
Dylan
It's not suggested to customize any sort of CSS or JS with that, we were told that is voids your support for that section if you do so.
You could just add a few more display fields if you really desire to remove the extra white-space.
For a complete description of that (which you may know how to do):
Click the Gear icon
Then select some relevant fields from the Available section, and click the Right arrow to add them.
Context: I have a select2 component displaying some html markup in the selection / options (icons or country flags). This was working fine in ember-1.9.1 but broke in ember-canary (1.12.0-beta.1+canary.88e24ff2)
I have these two test cases:
Good with ember 1.9.1 and no SafeString. You can see here that plain strings work, SafeStrings don't
Bad with ember-canary and SafeString: you can see that neither plain strings nor SafeStrings produce any html markup in the select2 component.
In the test cases I am showing a plain select view (where the html string should be visible) and a select2 view (where it should be converted to html markup)
Apparently the fact that it was working in 1.9.1 (and all previous releases) was a side-effect of a bug in ember, which has been "fixed": in order for this to work in future releases, we must pass SafeStrings. Fair enough. But this is not correct! In ember-canary, neither plain strings nor safe strings will be passed to the ember view. The html markup is silently removed (even from SafeStrings!)
The question is: why is ember-canary removing the html markup? It does not matter if it is a SafeString or not, the html markup gets removed. Is this a bug, or intended? Why? A SafeString is a SafeString!
And, above all, what can I do to get my select2 component displaying again the html markup?
For more context, I have filed an issue, but it has been marked as closed.
I am writing out a table using just the template system in Django, and it is not showing the border around empty table cells.
No problem I thought - I've solved this problem before. I put   in any cell that was to be left empty. Django kindly converted the ampersand to & so that I have &nbsp in the empty cells, and it shows the   when viewed in the browser.
I googled it, and tried putting {%autoescape off%} and {%endautoescape%} around the table in question, but it didn't do any good either.
I also tried adding autoescape=False to the context constructor, but that didn't help either.
What's the magic trick to make Django show the border around empty cells?
This is a known CSS/HTML 'problem.' You want to use Django's "default" filter.
{{value|default:" "}}
(I'll be damned if I could get that to come out right. In SO, how do you write "nbsp;" without the & in front causing everything to disappear and be replaced by a blank?)
There is the empty cells CSS property.
http://www.w3.org/TR/CSS21/tables.html#empty-cells
I can't remember if it works in all browsers or not though
Django does in no way control the appearance of your table. Tinkering with autoescape is also superfluous and could turn out dangerous.
Are you using CSS for styling the table? By using a property like e.g.
td {
border: 1px solid red;
}
you can make each cell having a red border. No matter if it's empty or not.
What you really need to do is get a non-breaking space in those empty cells, and prevent Django from escaping the HTML entity. Could you chain a few filters together to achieve what you're looking for?
{{ value|default:" "|safe }}
Edit: I should mention that is the same as , is just doesn't get mangled by the SO parser.