Styling Bootstrap with Phoenix Removal Method

Question

I have many links that appear in my boot navigator, such as logging in, registering, visiting pages and logging out. When I use the delete method in the link helper, I lose my default boot CSS. For example, the following communication assistant:

<li><%= link "Register", to: user_path(@conn, :new) %></li>

generates the following html:

<li><a href="/users/new">Register</a></li>

However, if I need a removal method, for example, when logging out:

<li><%= link "Log out", to: session_path(@conn, :delete, @current_user), method: "delete" %></li>

It generates a form such as:

 <li><form action="/sessions/3" class="link" method="post"> <input name="_method" type="hidden" value="delete"> <input name="_csrf_token" type="hidden" value="QA1vDhw/PhoBcgIwCgJJVCQPJQ4FAAAA/U8oImxsGBgDOF+crLSodA=="> <a data-submit="parent" href="#" rel="nofollow">Log out</a> </form></li> 

Now my anchor tag is on the form and I have lost my default CSS.

I fixed it with a special class:

 .bad-bootstrap-link { position: relative; display: block; padding: 10px 15px; padding-top: 15px; padding-bottom: 15px; color: #777; } 

Is this the only way to do this? Am I missing something? It is terribly inconvenient that I need to override CSS styles for delete links.

Answer 1

I had exactly the same problem and I added the navbar-text css boot class as shown below for Bootstrap 3. This is close enough for me.

 <li><%= link gettext("logout"), to: session_path(@conn, :delete, @current_user), method: "delete", class: "navbar-text" %></li> 

For Bootstrap 4, I use the nav-item nav-link classes:

 <li><%= link gettext("logout"), to: session_path(@conn, :delete, @current_user), method: "delete", class: "nav-item nav-link" %></li> 

Answer 2

You can hide the form and add another link that will submit the form. This is somewhat hacked, but the alternative is dipping into a CSS file or dipping into a JS file.

 <li> <%= link "Logout", to: auth_path(@conn, :logout), method: "delete", class: "hidden", id: "logout-form" %> <%= link "Logout", to: "#", onclick: "document.getElementById('logout-form').parentNode.submit();return false;" %> </li> 

Answer 3

I solved this problem with the following css rule:

 form[method=post].link { display: initial; } 

Before

After