CODEWITHSUNDEEP
htmlruby-on-railsruby-on-rails-4
Mini John
Mini John

Reputation: 7941

Wrap span tags with f.submit

I was trying to style my Submit button on a Form.. The normal submit code:

<%= f.submit "Text here" %>

My style:

    <div class="ui-button button1">
      <span class="button-left">
        <span class="button-right"> Post your Answer </span>
      </span>
    </div>

Basically i need the submit button to wrap the span tags so it becomes a functional button... But somehow i can't figure out how.

What am i missing ?

EDIT The Css for the Button

.button1 { height: 38px; }
.button1 .button-left,
.button1 .button-right { height:38px;backgroundimage:url("http://i.imgur.com/7ZIueSj.png")}
.button1 .button-left { padding-left: 35px; background-position: 0 0; }
.button1 .button-right { padding-right: 35px; background-position: 100% -114px; height: 38px; line-height: 35px; font-size: 13px; color: #fefefe; text-shadow: 0 0 5px #dd3400; overflow:hidden }
.ko-kr .button1 .button-right { font-family: Dotum; }
.button1:hover .button-left { background-position: 0 -38px }
.button1:hover .button-right { color: #fff; background-position: 100% -152px; }

.button1.disabled .button-left,
.button1.processing .button-left { background-position: 0 -76px; cursor:default }
.button1.disabled .button-right,
.button1.processing .button-right { color: #a79fa0; text-shadow: 0 0 5px #000; background-position:100% -190px; cursor:default }

Upvotes: 0

Views: 916

Answers (2)

Simone Carletti
Simone Carletti

Reputation: 176412

The f.submit is just an helper, based on submit_tag helper, that writes an HTML input tag. There is nothing special in there.

Likewise, the helper button_tag is designed to render a button, a submit button by default. You can use it or, even simpler, you can simply replace it with pure HTML.

<button type="submit">
<div class="ui-button button1">
  <span class="button-left">
    <span class="button-right"> Post your Answer </span>
  </span>
</div>
</button>

Whether it's a good idea to include all this markup inside a button... well, this is another story.

You cannot replace the button with a link a because there is no submit type for a link. You can simulate it via javascript, but it discourage you to follow this way.

Upvotes: 2

Billy Chan
Billy Chan

Reputation: 24815

"submit" is a form element, while "a" is HTML link.

Of course you are free to add any style or inside tags there, but you should not change a submit tag to a link.

Upvotes: 0

Related Questions