The on_the_spot gem allows inline editing of data. In general this is something I prefer over forms: I do not want to switch to a new page to edit something, I want to edit it where I see it (I understand there are some very good cases for the standard show/edit pages).
So a very long while ago I created a small gem to edit data inline. It relies on the jEditable javascript, which is still working.
But how do you style the dynamically injected form?
In my projects, I use the translation files as follows, e.g. in on_the_spot.en.yml I write :
en:
on_the_spot:
ok: <button class="btn btn-primary btn-sm">Ok</button>
cancel: <button class="btn btn-default btn-sm">Cancel</button>
tooltip: Click to edit
access_not_allowed: Access not allowed
This will make sure the buttons are styled correctly. But if you try this, the input is too narrow, and everything is just squished together.
So add this little sprinkle of css to make everything look a little better:
.on_the_spot_editing {
input, select {
width: auto !important;
height: 30px !important;
margin-right: 5px !important;
//display: block;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
-o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
textarea {
width: 80%;
}
.btn {
margin: 1px !important;
}
}
What inline editing solution are you using with rails?
I am currently contemplating to switch over to start using vue.js for javascript sprinkles like this.
Comments
Add comment