BoldMinded acquires Ansel, support ending for all add-ons. Read More


Support has been discontinued. Issues remain available as an archive.

Form styling on front-end isn't pulling in the icons for trash(remove), hamburger(reorder), crop(edit)

#42 opened by Megan Miriello

Description

I'm using Channel Forms to render a form on the front-end of my site that allows users to submit images through an {embed} tag in the template. Within that form, there is an image upload area that is being served by Ansel. After you click and select the file that you want to submit through the form, it shows a thumbnail of the image file with a description input field. That table should be displaying 3 icons, one for reordering, one for editing/cropping, one for removing. Instead they are just rendering bullets as a default <li> styling, or showing nothing at all. So for some reason the form isn't pulling in the right css assets for those elements. Any idea why or what I might be doing wrong?

Replies

  • TJ Draper

    Replied 8/29/2017 9:08 PM, Edited 11/2/2017 5:12 PM

    Hi Joanna, I have not been able to replicate this issue. The styling that you're referring to should be coming straight from ExpressionEngine. I suspect there may be some kind of path issue in your EE settings. I may need to get access to this environment to see if I can figure out what is going on since I cannot replicate it in my environment.

  • Megan Miriello

    Replied 9/6/2017 8:58 AM, Edited 11/2/2017 5:12 PM

    Hi TJ, thank you so much for the response. If you look on this page, you'll see the issue we're running into: http://www.dev-christopherwilliamjewelers.com.php56-23.dfw3-2.websitetestlink.com/experience/share-your-experience/

    The styling of this feature in the CP is perfect and appears to be pulling from /themes/ee/cp/css/common.min.css. If I reference that stylesheet inside of this template, it fixes styling of the Ansel table and it looks identical to that in the CP, which is good. But because there's so much extra CSS in that file that I don't need in this template, it also changes certain things in an undesired way across the site.

    Are you able to send me the CSS that just pertains to this file upload feature so that I can include it in this template instead of having to sift through loads of minified CSS and a whole lot of trial and error? I feel like there's a better way and I'm hoping you can help. Thank you!

  • TJ Draper

    Replied 9/8/2017 11:25 PM, Edited 11/2/2017 5:12 PM

    Hi Joanna,

    Most of Ansel's styling comes straight from EE and I’m only providing some ancillary styles. Channel Form should be including the basic styles Ansel needs and I cannot quite figure out why it wouldn't be. If including common.min is the only way to get the styles to work, then that may be what is required. EE's CSS can be a little aggressive so I feel your pain on fixing those issues :( .