Grid Field in Channel Form - no formatting despite having "css/_ee_channel_form_css" loaded in the head of the document
How Do I?
Hi all,
I am using a grid field in a channel form with {field:FIELDNAME} in my case ({field:languages_spoken).
The grid field prints to the screen as expected but completely un-styled and messy. When I check every element in inspector there are no styles attached or coming from the ee channel form css file.
The ee channel form css is being called in the head of my document as <link href=”{path='css/_ee_channel_form_css'}” type=”text/css” rel=”stylesheet” media=”screen”> and if I inspect the source and copy the path into my browser address bar I do in fact see all the css rules and know the file has loaded successfully on the page (https://speakole.craft-ee.uk/index.php/css/_ee_channel_form_css).
I have tried removing the {path='css/_ee_channel_form_css} and replacing with “https://speakole.craft-ee.uk/index.php/css/_ee_channel_form_css” and also tried “https://speakole.craft-ee.uk/css/_ee_channel_form_css” - removed index.php in case the htaccess didn’t strip that.
None of the above methods apply ANY style rules to my grid field AT ALL.
Am I missing something really stupid here?
Is the css not meant to load inside the <head> tags as all other css files do?
Also, my console reports .sortable is not a function??
Has anybody got any ideas on what I can do here?
Thank you
Andrew
This is really strange…
I pasted the address in my browser address bar and then copied all of the css and made my own css file from t.
I use that in the head of the document so I know 100% that css is being called into the document which it is as again i copy the path into browser address bar and I see all the css rules etc.
Now upon inspecting elements I’m finding things such as a class of ‘grid-instruct’ but in the inspector no styles are found for that class. YET if i look at the css in another browser tab and search for ‘grid-instruct’ it’s there!!
So what is happening? The styles are there but not applying. It’s almost as though EE is loading the GRID field before the css styles exist!
Is that what is happening??
Thanks
Andrew
Wow, I figured out the problem.
Well done EE for your usual lack of documentation surrounding this - unbelievable.
The reason no styling is applied is the channel form css file needs the form to have an id of cform!!
I need custom id’s in my form so just have to wrap a div around the form as <div id=”cform”>.
Changing form ID’s is very common yet there is no mention of the impact this has on form styles in the docs anywhere at all it references grid fields in channel form forms.
2 hours of my life i’ll never get back thanks to insufficient information in the EE docs pages.