Input fields in CMS UI

November Happy Hour will be moved to Thursday December 5th.

AI OnAI Off

Home / Forums / Developers (Main Products) Forum / CMS 7.5 - 11 /

Input fields in CMS UI

Joel Yourstone

Vote:

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

#189615

Mar 21, 2018 13:36

Vote:

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

#189682

Mar 22, 2018 23:49

Murtaza Ali

Vote:

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

#189683

Edited, Mar 23, 2018 0:08

Joel Yourstone

Vote:

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

#189692

Mar 23, 2018 7:08