I am using Editable views for fast editing of fields that change a lot. It works fine but the edit field is way to long. I think it must be fixed with css but I don't know how. I am using the Corolla theme. When I use de chrome inspector on that fields this is the result:

block input.form-text, .block input.form-password, .block input.form-file { max-width: 400px; width: 100%; }

When I change the width value it has effect but it will effect al input fields with those css classes. So that is not the solution. I tried to add a css class in field settings in de view module. I called it editable_fields and I have added it to forms.css and corolla.settings.style.css with this line:

editable_fields { width: 30%; }

but it has no effect.

Is there a way to make the field smaller?

It looks like this now:

enter image description here

  • look for the selector responsible for the width with your browser's Dev tools. If there is no cascading selector open a support request in the issue queue. Perhaps there is an additional css file with you can put to your theme – Josh Feb 27 '16 at 16:43
  • editable_fields { you're missing the period . at the start. – No Sssweat Feb 27 '16 at 22:16
  • hi, adding a period does not work. In the inspector I just can't find the css class I added in views. When I use SelectorGadget in chrome the selector of the input fields is div input. But I only get changes if I change the values of .block input.form-text. But then all the input fields are changing, for example the login fields. – RvO Feb 28 '16 at 7:46
  • I just can't find the css class I added in views how did you add the class? – No Sssweat Feb 28 '16 at 10:28
  • I have add it on the field setting page in views. Style setting --> customize field html --> create a css class --> then I filled in editable_fields – RvO Feb 28 '16 at 10:40

I think I have the answer. If I use the id selector on this way I can control the specific fields: [id^="edit-node"] { max-width: 100px; width: 100%;


I was happy to fast, I want to control all of the different edit fields for the first fields it looks great, but for others it does not. The complete id of the first field is id="edit-node-431-field-aantal-und-0-value" The "431" is a variable but also the "aantal".

The css rule above works for everything that starts with edit-node, but i want to add differente rules for different fields. I have tried to put a * or a ^ in de place of the "431" like this: [id^="edit-node-*-field-aantal"] { max-width: 100px; width: 100%; } But that does not work. Any ideas?

  • It works with this css rule: [id*="field-aantal"] – RvO Feb 29 '16 at 17:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.