Can you inspect element and look at which stylesheet is being referenced? Is this out of the box or a custom one?
You can also use this as a reference to style elements within the CSS: http://www.jondjones.com/learn-episerver-cms/episerver-frontend-developers-guide/how-to-add-your-own-custom-css-in-the-episerver-editor
That way you can override any styles you dont like for any of the fields in the CMS
Hi Joel,
If you want to override the css by defining custom css
module clientResourceRelativePath="" tags="EPiServerPublicModulePackage"> <assemblies> <add assembly="XXX.Web" /> </assemblies> <clientResources> <add name="tags-vendor" path="Resources/Scripts/Vendor/jquery-2.1.0.min.js" resourceType="Script" sortIndex="1" /> <add name="tags-vendor" path="Resources/Scripts/Vendor/jquery-ui.min.js" resourceType="Script" sortIndex="2" /> <add name="tags-vendor" path="Resources/Scripts/Vendor/tag-it.js" resourceType="Script" sortIndex="3" /> <add name="tags-styles" path="Resources/Styles/jquery.tagit.css" resourceType="Style" sortIndex="1" /> <add name="tags-styles" path="Resources/Styles/tagit.ui-zendesk.css" resourceType="Style" sortIndex="2" /> <add name="tags-styles" path="Resources/Styles/tagit.overrides.css" resourceType="Style" sortIndex="3" /> <add name="epi-cms.widgets.base" path="Resources/Styles/edit-mode.css" resourceType="Style"/> <add name="epi-cms.widgets.base" path="Resources/Scripts/edit-mode.js" resourceType="Script"/> </clientResources>
Note: these are just exmples that we use in out proj.
edit-mode.css can contain any css that you want to override we have for example.
/* Display help text underneath the field label */ .Sleek .dijitTabPaneWrapper .epi-form-container__section__row label[title]:after, .Sleek form > ul.epi-form-container__section .epi-form-container__section__row label[title]:after { content: attr(title); display: block; font-size: 0.7em; font-style: italic; margin: 0.3em 0 0 0; color: grey; }
Cheers
Hi Murtaza and Aniket!
Thanks for your solutions, always good knowing you can fix things by code. Epi continues to be excellent at extending the platform!
The CSS in place came from /EPiServer/Shell/10.10.6.0/ClientResources/epi/themes/sleek/sleek1.css, which I assume is the built in theme for CMS UI.
My biggest problem is however not that I have that issue, me and my team/customers knows about this because we've had experience with the product for a while. This problem I have with it is that it's default epi, so all new customers that don't know the ins and outs of Epi CMS will stumble upon this width: 90% !important role.
If it's there for some reason, some feature that can utilize that space, it should still not be there if the feature doesn't utilize it. It's simply bad UX. You should understand a UI and how it works by looking at it. If it's complex, I can maybe buy that you need to read the documentation first, but never that you need to actually experience it to understand it :)
I guess it may be connected to field validation and leaving some room for the red exclaimation?
Yeah that seems about right. I'd still say it's a bug, the padding shouldn't be there when there isn't a red exclaimation :)
Hey,
I'm not sure if this has been answered before or not, I couldn't find anything by googling, but unfortunately usually it's kind of hard to find stuff on this forum by searching..
How come input fields have their inner element set to "width: 90% !important" by some Sleek template CSS? Is there some feature that you can addon that makes use of this space? Regardless, I find it to be quite confusing to have different spacing left and right and as you can see in the gif it's easy to think that there is nothing more when there is more content hiding behind the last 10%.