<li class=<%= #page_name == "home" ? "active span2" : "span2" %>>
turns into:
<li class="active" span2>
When the statement evaluates true.
My expected result is:
<li class="active span2">
Any ideas why this happens?
The quotes within your tags are essentially declaring the contents within as String objects. The output of the statement is a string, but the string will not be encapsulated in quotes. The value of the class attribute must be in quotes in order for the markup to be valid. Subsequently, you'll need to enclose the entire statement within double quotes:
<li class="<%= #page_name == 'home' ? 'active span2' : 'span2' %>">
The output of your statement is actually
<li class=active span2>
which will be turned to your output by most browsers, in an effort to correct invalid markup.
You'll want to have it render this way:
<li class="<%= #page_name == "home" ? "active span2" : "span2" %>">
Related
I'm currently running into a problem where I am trying to make a li tag have specific classes based on a Ruby variable by using a ternary operator:
<li class=<%= loc == #ruby_var ? "nav-item active" : "nav-item" %>>
...
</li>
I expect the results to be an li element with both the nav-item and active classes if #ruby_var is true:
<li class="nav-item active">
...
</li>
However, for some reason, I am getting unexpected results where it only sets the class to the first part of the string that is in the ternary operator, and leaves the second part outside of the class tag:
<li class="nav-item" active>
...
</li>
I have tried using more than one space in my "nav-item active" string but any white space seems to make the class only accept the first elem in the string.
What is the proper way to use the ternary operator to set an HTML tag's classes?
You can write it like this
<li class="<%= loc == #ruby_var ? "nav-item active" : "nav-item" %>">
# ...
</li>
Note the " outside of the erb expression.
Or you can use tag helper like this
<%= tag.li, class: ["nav-item", (:active if loc == #ruby_var)] do %>
# ...
<% end %>
I like the second option better because I prefer not to mix HTML and ERB when describing a tag.
In the below code snippet i want to replace string in single quote to string in double quote. is there any way to do that
<ul>
<li ng-class="{ 'text-success': $first }" ng-repeat="item in items"
{{item.name}}</li>
</ul>
when i tried doing it by adding escape character, angular logged an error
"Error: [$parse:lexerr] Lexer Error: Unexpected next character at columns 1-1 [] in expression [{\]
This should do what you want.
<ul>
<li ng-class='{ "text-success": $first }' ng-repeat="item in items">
{{item.name}}</li>
</ul>
I don't know why you would want it like this though.
I am using Laravel 5.0, and I would like to make the class of an element 'active' if the url contains the word 'dashboard'. I was able to achieve this in Laravel 5.4 as:
<li class="{{request()->is('dashboard') ? 'active':'inactive'}}">
But this does not work in Laravel 5.0. Can someone provide a solution which would work?
A really clean solution would be creating a helper function to help you like so:
function set_active($uri)
{
return Request::is($uri) ? 'active' : 'inactive';
}
and then in your blade file:
<li class="{{set_active('dashboard')}}">
If you want to check if the url CONTAINS dashboard you need to add some wild cards. right now you're just checking that the path IS dashboard. The example below will set class active any time the path starts with admin/hub
<li class="{{ Request::is('admin/hub*') ? 'active' : '' }}">
<a href="{{ url('admin/hub') }}" id="hub">
<i class="fa fa-desktop"></i> <span>Hub</span>
</a>
</li>
If you want to set the class if the request contains dashboard ANYWHERE use
Request::is('*dashboard*') ? 'active' : ''
You can try something like this:
#if (strpos(Request::url(), 'dashboard') !== false)
<li class="active">
#else
<li class="inactive">
#endif
In a view, I'm trying to add an additional class specification "active" on basis of the page the user is on. I have:
<li <%= if current_page?(root_path) class="hvr-bottom active" : class="hvr-bottom" %>><a href=<%= root_path %>>Home</a></li>
This generates the error:
syntax error, unexpected keyword_class, expecting keyword_then or ';' or '\n' ...
How should I adjust the code to add the additional class only if a specific page is visited?
Your current ternary statement seems to be missing a ?. Try the following:
<li class=<%= current_page?(root_path) ? "hvr-bottom active" : "hvr-bottom" %>> ... </li>
Hope that helps!
I am working with a navigation menu, and wondering how to put multiple classes in a li tag:
This is the li tag
<li class='pil' class='dropdown'>
And this is also what I want in the li tag:
class='{{ ($aktiv == 'dagvakt') ? 'active' : '' }}'
I tried this and it didn't work:
<li class='pil' class='dropdown' class='{{ ($aktiv == 'dagvakt') ? 'active' : '' }}'>
You can add multiple classes to an element by putting them all in the same class attribute and separating them with a space. For example:
<li class='pil dropdown {{ ($aktiv == 'dagvakt') ? 'active' : '' }}'>
As far as I know, the spec only allows class to be declared once, so trying <li class='ex' class='am' class='ple'> won't work.
Only one of each attribute can exist at one time, it should be a space-separated list of classes. Try this:
<li class="pil dropdown {{ ($aktiv == 'dagvakt') ? 'active' : '' }}">
Also careful using quotes ' inside quotes, it's a good idea to use double quote " to assist syntax highlighting and to avoid any conflicts.