0

I have a site with a beautiful jumbotron and a sexy email sign up bar call to action. However my site is german and english and the place holder text in the mail signup form is instructions for what to do. How can I make the button group not act as a button group for when the document is smaller then mobile. I'd prefer not to use JS or Jquery for this.

http://jsfiddle.net/pgbgD/2/

<form action="http://forkables.us2.list-manage.com/subscribe/post" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="row validate" target="_blank" role="form">
<div class="col-md-8 mc-field-group">
<div class="form-group input-group">
<label class="sr-only" for="mce-EMAIL">Your Email address</label>
<input name="EMAIL" type="email" class="form-control input-lg" id="mce-EMAIL" placeholder="Sign up for our Email newsletter">
<span class="input-group-btn">
<button type="submit" id="mc-embedded-subscribe" class="btn btn-primary btn-lg">Sign up</button>    
</span>
</div>
</div>
</form>
Tim Gauthier
  • 81
  • 1
  • 9

1 Answers1

1

I think your question is unclear, you don't describe the result you expect after removing the add-on behavior. Add a picture maybe. I have to guess. I think most of the add-on behavior is the display table so you have to reset this. Try to add the css below after Bootstrap's CSS, wrapped in a media query:

@media (max-width: 767px) { 
/* unset the table display */   
.form-group.input-group,.input-group-btn{display:inline;}
/* give form elements a width of 100% */
.form-group.input-group input, .form-group.input-group button{width:100%;}
/* give the button it's border radius back */
.form-group.input-group button {border-radius: 6px !important;} 
}

Also consider to replace your .sr-only class on the form label with .visible-xs.

If you want remove the placeholder too, you can't do this with CSS only, see: How do I auto-hide placeholder text upon focus using css or jquery?

But you could try (from: Change an HTML5 input's placeholder color with CSS):

@media (max-width: 767px) { 
.form-control::-webkit-input-placeholder { /* WebKit browsers */
    color:transparent;
}
.form-control:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:transparent;
}
.form-control::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:transparent;
}
.form-control:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:transparent;
}

}

Demo: http://bootply.com/80881

Community
  • 1
  • 1
Bass Jobsen
  • 48,736
  • 16
  • 143
  • 224
  • sorry yeah, I want the button to appear below the text/email input on xs screen size, but then behave as it is now on md+ screen sizes. You're sample code seems to work, I will have to attempt to deploy it to see if it makes sense to me, but it looks like an answer. Thanks for answering an obtuse question Bass – Tim Gauthier Sep 14 '13 at 23:00
  • This answer worked, thank you very much. Now I will reconvert the CSS into .less :D fantastic! – Tim Gauthier Sep 16 '13 at 11:57