I have not worked yet with the Deface gem and have read Spree tutorial on Deface and skipped through the Spree/Deface explanation on Github.I cannot get the following issue working though:
In my Spree stable-2-1 with Rails 4 I have this element <li id="locale-select" data-hook="" style="float: right; margin-right: 10px;"> which is generated by the I18N gem and is available in the _main_nav_bar.html.erb on every page.
I want to add to this <li> element a class="dropdown-menu" element. The data-hook is empty. I have no idea how to accomplish this with Deface and am wondering if it is even possible.
I hope someone here can provide me more information on Deface and explain how to accomplish this task. (Maybe I am following the wrong path and should just find the element in the I18N and override it.)
Faced with the same problem, I read through https://github.com/spree/deface, and it appears once you select the proper element, you may use the :add_to_attributes action to insert HTML attributes.
Related
In VS Code I am having trouble in formatting HTML.
For example, I write a list of tags inline and I press Shift+Alt+F and nothing happens.
I noticed this:
If I write:
<div><span><p></p></span></div>
nothing happens when I do the auto format.
If I write:
<div><div><div></div></div></div>
then it becomes:
<div>
<div>
<div></div>
</div>
</div>
hope this will help you to help me...
We had the same problem in my dev team. Please check or try the following things:
Are the keyboard bindings correct?
Is selected code language HTML?
Have you restarted VS code?
Begin a small piece of the formatting and then try again (for some reason it
thinks its already correct.
There are a certain list of tags that are ignored when auto formatting - these are defined in the setings.json file under
html.format.unformatted":
So go to settings (Command-Comma on a mac) and search for that setting and remove the tags you do want formatting.
The bad news is that it still doesn't format how I think it should - i.e. the isn't indented inside the but it at least puts it on a new line for you!
This is a VS code bug. I installed the 1.17 and it worked very well https://code.visualstudio.com/updates/v1_17
I've been looking around and I can not find an answer to this.
Suppose I put the cursor right between the number 2 and the greater than sign in the following h2's opening tag.
<h2>Hello world!</h2>
And then I type .text-uppercase which gives me:
<h2.text-uppercase>Hello world!</h2>
After which I expand the abbriviation and I get
<h2 class="text-uppercase">Hello world!</h2>
Is there a way to achieve this by another method?
Maybe this works in your editor, in my personal VS Code installation, its not working, the action is Update Tag
your question is not that clear
i think you want this
var h2 = document.getElementsByTagName("h2");
h2.classList.add('text-uppercase');
now you can do it onClick or using some other trigger
happy coding!!!
hope it helps
Good afternoon everyone,
I'm using rails to build a web application (naturally) and I'm currently working on a form.
This form gets created by using the form_for rails helper.
The form_for helper also includes CSRF if it's enabled which it is.
My form output looks like this:
<form accept-charset="utf8" action="/some/path" class="some classes" method="post">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓">
<input name="authenticity_token" type="hidden" value="[csrf token]">
</div>
h3 My Epic Form title
</form>
Now in CSS I'm using :first-child selector quite frequently to remove top spacing on headings or just first-children of any container.
The SASS for this looks like so:
.some.classes h3:first-child
margin-top: 0
This works normally but obviously since the CSRF token is actually the :first-child it doesn't work in forms. I think it's an annoyance and would rather have this thing at the bottom (since :first-child is supported more widely than :last-child) so that I can use :first-child on the element that I want to be the first child.
I'm new to rails unfortunately and did look in the following sections to see if I could find anything on the subject:
Rails security guide CSRF
Googling 'Rails csrf first child in form'
While creating this question I looked through the similar posts.
Found nothing on the subject.
Now it's not a problem to fix this with a different selector but the question here is 'How can I put the CSRF token at the bottom of my form?'
(Yes - googling that also yielded no specific result)
I'd like to know this so that I can change the position of the CSRF tag.
If anyone could help with that (perhaps one with more xp with Rails than me) - it would be greatly appriciated.
In case anyone's interested in the actual CSS/SASS selector solution
.some.classes div[style]:first-child + h3
margin-top: 0
What it does is select a div which is the first-child if it has a style attribute. Since nobody uses inline styles as they are a bad practice (except for this kind of thing ofcourse) you can easily overcome this issue by using this selector.
The selector however reduces the flexibility of your CSS since you can't just do * :first-child (extreme example) but you'd have to do * div[style]:first-child + * as well which just seems plain useless to me.
Before I forget,
Thanks in advance for any feedback this question may get.
I'm trying Slim templates in a new project (after using Haml for quite a while). While overall experience is great, I've run into a problem with spaces being always inserted around tags which normally use display: block
Say,
ul.ampm
li.am am
li.pm pm
generates
<ul class="ampm">
<li class="am">
am
</li>
<li class="pm">
pm
</li>
</ul>
while
.ampm
span.am am
span.pm pm
generates
<div class="ampm">
<span class="am">am</span></span class="pm">pm</span>
</div>
Normally it's not a big issue, but we use responsive layouts which applies display: inline-block to li tags; obviously, having whitespace between them breaks the layout.
I'm aware of
Slim::Engine.options[:pretty] = true
option (and turning it on does remove the offending whitespace), but it makes all generated source hard to read, not just the part I'd like to fix.
< and > in Slim seem to do the opposite to what I need - they're intended to be used for adding whitespace around inline tags.
So...
is it possible to remove whitespace around a single block tag in Slim similar to HAML whitespace eaters? (Without the impact of turning off the pretty option, that is)
if not, is it a fundamental Slim restriction ("by design") or something which is on the roadmap and would be potentially implemented in the future?
Much appreciated.
I worked around this by reverting back to inline HTML in the critical places. For me, it was adding a collection of options to a select:
select
- my_collection.each do |item|
<option value="#{item.id}">#{item.name}</option>
I can put up with this in the few cases where it really matters (as it did for me in the option elements). But if you need better whitespacing throughout your code, I think you're out of luck.
is it a fundamental Slim restriction ("by design") or something which is on the roadmap and would be potentially implemented in the future?
I'm going to go with "no" for both of those. It looks like the Slim team just implemented a naive algorithm and didn't look back. Case in point, this quote from the GitHub issue tracker:
The pretty renderer is not working well under some circumstances since Slim's focus lies on performance. If you have time please provide patches for the pretty renderer of the temple project https://github.com/judofyr/temple and also provide test cases.
I have tried countless plugins, codyfying HTML with escape keys, and my blood is beginning to boil. Switching between Visual and HTML mode is actually changing my content, ie destroying it!!!
OK, i figured out what to do.
First go into visual mode.
Select Preformatted in the formatting drop down. A little grey box is created.
Inside the grey box, copy and paste your raw HTML.
Save it and switch from visual to HTML views a few times. There should be no mangling.
IT IS ABSOLUTELY CRUCIAL that you paste into visual tab, instead of in the text tab, or it will get stuffed up completely (very unintuitive. You would think it would work the other way araound).
Wordpress does a strange thing where if you switch between visual and "text" mode (HTML mode was renamed in 3.5 update) it strips any tags that appear empty which often times may not be. This might be what you are experiencing if I am understanding the problem correctly.
If you are just trying to display code on your website you should be able to wrap the code like this:
<code><p>Example code post</p></code>
This is laid out in these guidelines here: http://codex.wordpress.org/Writing_Code_in_Your_Posts
If it is a block of code that needs to not wrap you could also use the "pre" tag like so:
<pre><code><p>Example code post</p></code></pre>
This is described very well here: <code> vs <pre> vs <samp> for inline and block code snippets
Yes, it is absolutely possible. You can follow any of the above mentioned methods. I prefer the following way.
First of all, decode the HTML code using online html decoder. You can find any on google. Then, You can paste the decoded code on your post. The benefit of this method is that, your indentation won't be lost.
Decoded Code
Rendered View File
Hope, it helps future reader to find a way.
Wordpress is very buggy. It took me a long time to finally succeed. For my Wordpress.org installed on my pc I tried: go to visual mode, add pre-formatted text block, copy/paste decoded or encoded. I tried :
<pre><code><p>Example code post</p></code></pre>
That did not work.
The only way it works for me is:
Go to visual, instead of adding a pre-formatted text block I create a paragraph text block, copy/paste the encoded HTMl and then convert it to preformat.
Hope that helps.
Perhaps, You should try out this plugin
http://wordpress.org/extend/plugins/insert-html-snippet/
Hope this helps!
One way to do is to make the code commented. Something like,
<!--div>
<md-divider class="org__meta-divider md-soc-theme"></md-divider>
<h4 class="org__meta-heading">Technologies</h4>
<ul layout="" layout-wrap="" class="org__tag-container layout-wrap layout-row">
<li class="organization__tag organization__tag--technology">web services</li>
</ul>
</div-->
instead of
<div>
<md-divider class="org__meta-divider md-soc-theme"></md-divider>
<h4 class="org__meta-heading">Technologies</h4>
<ul layout="" layout-wrap="" class="org__tag-container layout-wrap layout-row">
<li class="organization__tag organization__tag--technology">web services</li>
</ul>
</div>