Bootstrap Styling with Phoenix's Delete Method

Question

I have a variety of links that show up in my bootstrap navbar such as logging in, registering, visiting pages, and logging out. When I use the delete method in the link helper I lose my default bootstrap CSS. For example the following link helper:

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

generates the following html:

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

However if I want the delete method, such as 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 within a form and I've lost my default CSS.

I fixed it by using a custom 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? This is terribly inconvenient that I have to redefine CSS styles for delete links.

Answer 1

I had exactly the same problem and I added a bootstrap css class navbar-text as shown below for Bootstrap 3. That's 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 classes nav-item nav-link:

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