In my HTML I have a span
<span style="color:#??????>
<h3>Title</h3>
</span>
Okay, in my database I have records which have a field that store the hash color value of a span, example #123456 , with the hash included.
Now what I want to do is in the HTML, instead of me specifying the colour, it is retrieved directly from the database.
The model is called Sauce. The field is called title_colour.
I have tried:
<span style="color: #{sauce.title_colour}">...</span>
The problem is that when the HTML is output, it is exactly as it is in the code. It does not extract the database value.
I think the problem is because in Rails when we display an object when already in quote marks, we start with a #, eg #{sauce.field_name} , and in CSS the color value also starts with a #.
Any help?
You need to use the proper erb interpolation tags:
<span style="color: <%= sauce.title_colour %>">...</span>
Related
I have the following HTML code, I tend to have a 3 code project identifier at the start
<span class="abc-user-overview__header__title">
<span class="abc-user-overview__header__title__name">
{{ name }}
<span class="abc-user-overview__header__active">true</span>
</span>
Although the 'name' element is a child of title, how strict does the naming convention have to be? As I think abc-user-overview__header__title__name is too long and would prefer to drop the __title, giving me:
<span class="abc-user-overview__header__title">
<span class="abc-user-overview__header__name">
{{ name }}
<span class="abc-user-overview__header__active"true</span>
</span>
Is this valid and acceptable BEM?
Sadly your code is not valid according to BEM convention. This is the official name structure block-name__elem-name_mod-name_mod-val.
Here is your code with valid BEM naming:
<span class="abc-user-overview__title">
<span class="abc-user-overview__name">{{ name }}</span>
<span class="abc-user-overview__status abc-user-overview__status_active">true</span>
</span>
Few tips:
Avoid naming your blocks according to their content. Try to be generic for blocks that can be reused. For example, let us have a block that represents a list content. On one of the pages we may display News .news-list, but on other we may display Products, so reusing block with name .news-list with Products inside isnt very nice. In this case a simple class like .list will be enough.
If something can be reused, make it block, not an element.
For boolean modifiers, the value is not included in the name.
Full documentation and great examples can be found in the official website: https://en.bem.info/methodology/naming-convention/#naming-rules
Those names aren't too long. Sometimes when names get too long it's because you've got too much going on in that page. When I see that in angular (for example) I consider extracting components, then you can chop off the block and half the element name from the existing css classes and replace with a shorter block name. it makes the parent component so much easier to read when you move a lot of unrelated complexity to a different component. Good candidates for this could include
mobile menus
containers (anything with responsive widths, padding or icons to collapse or expand some region)
footers
complicated widgets that show some stats
any repeated card with a title, photo, description and hyperlink.
Some of these components might be useful for the whole application, or maybe just for that page. Etc.
In the following,
<section id="section2" class="MightChange1 MightChange2">
<div id="dynamicIdxxx" class="dynamic1 dynamic2 dynamic3">
<div id="againDynamic" ..>
<div id="someDynamicCanBeRelayed" class="xyz">
<button id="dynmaicBtnxx" class="Cannot be relayed">
<span ....>
<span id="dynamic23" class="PartOfDoesntChange">
<bdi> show INTEGER more details</bdi>
How to select the span (with id=dynamic23) using text of bdi (which INTEGER changes).
I could write like following
//*[#id='section2']//span/bdi[contains(text(),'more fields')]/ancestor::button")
The challenge is, sometimes below
<span id="dynamic23" class="PartOfDoesntChange">
<bdi> show INTEGER more details</bdi>
will be changed to (without bdi tag)
<span id="dynamic23" class="PartOfDoesntChange"> show INTEGER more details <span>
One option to handle is I can use two xpath's with and without bdi using selenium OR conditions. Either way, I would get the result and use that element.
Is there any better alternatives for such scenarios or by using css selectors?
try this simple one //span[contains(., 'show INTEGER more details')], Don't replace the . to text(), otherwise it will only match one element
You can use UNION operator |. See my example below.
//*[#id='section2']//span/bdi[contains(text(),'more fields')]/ancestor::button") | //*[#id='section2']//span[contains(text(),'more details')]/ancestor::button")
To select the span element using the text show INTEGER more details you can use the following xpath :
//button[#id='dynmaicBtnxx']//*[contains(.,'show INTEGER more details')]//preceding::span[1]
Note : Seems values are dynamic so you may have to induce WebDriverWait for the element as well.
This might help:
.//*[contains(., 'show INTEGER more details')]/ancestor::button[starts-with(#id,'dynmaicBtn')]
The * (star) at the start will select the tag with your required text whether it is span or bdi. Ancestor will select a button whose id starts-with your text followed by changing int's.
I have a large table in my sqlite database with a thousands of entries in a field that hold blocks of text.
In the many paragraphs contained in those entries, there is an html tag that recurs regularly that is formatted like this:
<span class="emphasis bold">EXAMPLE TEXT</span>
I would like to replace these tags with simple <b></b> tags.
Therefore, the above example would be reformatted to look like this:
<b>EXAMPLE TEXT</b>
When I say there are many paragraphs in these entries, that means that several of these tags can appear in a single entry. And, it is not the only html that appears. There are even other <span> tags with different attributes, which makes this a bit tricky.
So, whatever sqlite command I come up with, it needs to be able to replace each occurrence of only the <span> tags with the classes emphasis and bold.
If the paragraph looked this:
This is a <span class="emphasis bold">PERFECT</span> example of
what <span class="keep-this-tag">I AM TRYING TO</span> accomplish.
After the sqlite command is run, it should look like this:
This is a <b>PERFECT</b> example of
what <span class="keep-this-tag">I AM TRYING TO</span> accomplish.
As you can see, only the first tag was changed and not the second one, even though they are both <span> tags, because I only want to change the <span> tags with the attributes emphasis and bold.
How do you think I can tackle this problem?
I'm facing a small problem regarding Knockout JS databind on a span. I want to bind a number alongside a percentage symbol. My original HTML markup is this one:
<span>10</span><span>%</span>
Then, I'd try to make the number dynamic with the following expression (I'm forfeiting the JS as it works corrctly and I don't think it's necessary for my case):
<span data-bind="text: cartTotalPrice" /><span>%</span>
Misteriously, the that contains the % symbol disappears, only displaying the binded number. But then if I do the following, the number and the symbol are correctly displayed:
<span data-bind="text: cartTotalPrice() + '%'" />
Why does this happen? Is it normal?
Thanks.
I believe the problem is that you are not closing your span tag. Use an explicit closing </span>.
<span data-bind="text: cartTotalPrice"></span><span>%</span>
Let's say I typed in a <textarea>:
I
Love
You
Then I save it to phpMyAdmin database. Then I use MySQL to retrieve it from database and display it onto a <div>. Now the output that show in the <div> is :
I Love You
How do I make the <div> show exactly like the database field and textarea which has multiple rows?
If the text is stored exactly as it was entered into the <textarea> (i.e. it still contains the newline; check this by viewing the source of your page), you can use the CSS property white-space: pre on your <div>.
See this jsFiddle example; note how the content of both <div> tags are the same, but produce different output, due to the use of the white-space property in the second <div>.
Replace line returns with <br> tags.
If the textarea supports use of HTML tags (similar to the Stack Overflow answer box that I'm typing in now), then you could type:
I <br>
love <br>
you
and it would render in the way you want it to.