Добавление кнопки подтверждения в конец поля ввода Rails Bootstrap simple_form - PullRequest
Новая
       9

Добавление кнопки подтверждения в конец поля ввода Rails Bootstrap simple_form

0 голосов
/ 12 марта 2020 
rails 6
bootstrap
simple_form

У меня есть views / books / index.html / slim, как показано ниже: 

#BooksIndex
  table.table.table-striped.table-hover
    thead
      tr.d-flex
        th.col-10
          = t('books.name')
        th.col-1
        th.col-1
    tbody
      - @Books.each do |Book|
        tr.d-flex
          td.col-sm-10 = Book.name
          td.col-sm-1 = link_to edit_Book_path(Book)
            i.fas.fa-edit.fa-lg
          td.col-sm-1 = link_to Book, data: { confirm: t('are_you_sure') }, method: :delete
            i.fas.fa-trash-alt.fa-lg
#AddBookForm
  = simple_form_for(@Book || Book.new) do |f|
    .form-inputs
      = f.input :name, placeholder: t('Books.views.index.enter_name_of_Book_you_like_to_add'), label:false
    span.form-actions
      button.btn.btn-primary type="submit"
       = "Create Book"

#AddBookForm создает следующее представление: enter image description here

Когда я отправляю, он выдает следующее: 

Started POST "/Books" for 127.0.0.1 at 2020-03-12 12:46:44 -0700
Processing by BooksController#create as HTML
  Parameters: {"authenticity_token"=>"....", "Book"=>{"name"=>"Fun"}}

Я хотел бы иметь кнопку Submit в конце поля ввода текста, например:

enter image description here

Я пробовал разные варианты диапазона, используя столбцы, но он всегда отображается на следующей строке. Есть идеи?

1 Ответ

0 голосов
/ 13 марта 2020

На самом деле это больше вопрос bootstrap, но здесь он идет 

 = simple_form_for(@Book || Book.new), html: { class: "form-inline" } do |f|
   = f.input :name, placeholder: t('Books.views.index.enter_name_of_Book_you_like_to_add'), class: "form-control", label_html: { class: "mr-2"}
  button.btn.btn-primary.ml-2 type="submit"
   = "Create Book"

Я добавил свойство label_ html, чтобы вы могли указать тег label, поскольку эта часть должна отображаться в соответствии с вашим ожидаемым результатом.

Проверьте синтаксис, так как я привык к хамлу. но если вы хотите, чтобы кодовая ручка видела, как это выглядит, проверьте это: https://codepen.io/jean182/pen/ZEGxWQB

...