Try our conversational search powered by Generative AI!

Input fields in CMS UI



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%.

Mar 21, 2018 13:36

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:

That way you can override any styles you dont like for any of the fields in the CMS

Mar 22, 2018 23:49

Hi Joel,

If you want to override the css by defining custom css 

module clientResourceRelativePath="" tags="EPiServerPublicModulePackage">
    <add assembly="XXX.Web" />

    <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"/>

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;


Edited, Mar 23, 2018 0:08

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/, 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 :)

Mar 23, 2018 7:08

I guess it may be connected to field validation and leaving some room for the red exclaimation?

Edited, Mar 23, 2018 15:31

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 :)

Mar 23, 2018 15:35
This topic was created over six months ago and has been resolved. If you have a similar question, please create a new topic and refer to this one.
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.