StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POAppend/prepend bootstrap icons with simple_form
primarykey
Id
10547502
data
AcceptedAnswerId
10787039
AnswerCount
2
ClosedDate
CommentCount
3
CommunityOwnedDate
CreationDate
2012-05-11T07:50:50.063
FavoriteCount
11
LastActivityDate
2014-09-24T17:31:50.300
LastEditDate
2012-10-24T09:29:11.793
LastEditorUserId
-1
OwnerUserId
718278
ParentId
0
PostTypeId
1
Score
26
ViewCount
15946
LastEditorDisplayName
text
Body
Twitter Bootstrap icons are pretty deadly <a href="http://twitter.github.com/bootstrap/base-css.html#icons" rel="noreferrer">seen here</a>. Look at the bottom right hand corner of that section. See that email with an icon prepended? That is what I want to do. I want to make simple_form and boostrap play nicely. Here's what I've found that will prepend the icon to the input: <pre><code>= f.input :email, :wrapper => :append do = f.input_field :email </code></pre> But it isn't flush (that could be fixed by changing offsets in CSS) and it's pretty ugly. For reference, here is the CSS fix (add it to your bootstrap_overrides.css.less file): <pre><code>.input-prepend .add-on, .input-append input { float: left; } </code></pre> Does someone know a less hacky way to make simple_form prepend or append an icon with bootstrap? <h3>Update:</h3> The answer below made me have another look at it. HAML usually adds whitespace everywhere, but there is a <a href="http://haml.info/docs/yardoc/file.HAML_REFERENCE.html#whitespace_removal__and_" rel="noreferrer">workaround</a> Here is an update for the original HAML which removes the whitespaces and doesn't require the CSS hack: <pre><code>= f.input :email, :wrapper => :append do = f.input_field :email %span.add-on> %i.icon-envelope </code></pre> That little greater than (>) makes all the difference. The output HTML has no newlines between the input and the span.
Tags
<ruby-on-rails-3><twitter-bootstrap><simple-form>
Title
Append/prepend bootstrap icons with simple_form
singulars
PostAcceptedAnswerId
1. PO
 singulars
 PostTypePostTypeId
 PTAnswer
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. USCommunity
UserOwnerUserId
1. USTsagadai
plurals
PostLinksPostIdRelatedPostId
1. PL
 singulars
 LinkTypeLinkTypeId
 LTLinked
PostLinksRelatedPostIdPostId
1. PL
 singulars
 LinkTypeLinkTypeId
 LTLinked
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. PO
 singulars
 PostTypePostTypeId
 PTAnswer
VotesPostIdCreationDate
1. VO
 singulars
 PostPostId
 POAppend/prepend bootstrap icons with simple_form
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTUpMod
2. VO
 singulars
 PostPostId
 POAppend/prepend bootstrap icons with simple_form
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTUpMod
3. VO
 singulars
 PostPostId
 POAppend/prepend bootstrap icons with simple_form
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTUpMod
CommentsPostId

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.