How modify the short string box and make it bigger?

Fredrik von Werder

Vote:

Is there a way to make the short string textbox any larger? It is so short now

Looked into EditorDescriptor but can't find a way to do it...

public override void ModifyMetadata(
			   ExtendedMetadata metadata,
			   IEnumerable attributes)
			{
				base.ModifyMetadata(metadata, attributes);
				
                          // CODE?
			}

Any ideas?

#114405

Dec 11, 2014 12:32

Henrik Fransas

Vote:

If you want it to be multiline, just add:
[UIHint(EPiServer.Web.UIHint.Textarea)]

But you might just want a little more width?

#114406

Dec 11, 2014 13:24

Fredrik von Werder

Vote:

No not textarea, just more width please ... :-)

#114407

Dec 11, 2014 13:32

Vote:

Does this apply to all text boxers or just some specific ones?

If all: There is some examples in Alloy Templates on how to implement your custom css-files.

With that you should be able to change the styling of the text boxes. Use firebug or similar to see if you can find a good selector

#114410

Dec 11, 2014 14:43

Fredrik von Werder

Vote:

All text boxes, yes

ok thanks, I'll have a look at the alloy package

#114412

Dec 11, 2014 14:53

Fredrik von Werder

Vote:

hmm no I can't find anything about this...

#114413

Dec 11, 2014 15:06

Vote:

Check out this article, under the heading "Adding a backgroud device image" you can see how to add css files.

http://world.episerver.com/blogs/Stefan-Torstensson/Dates/2012/12/Adding-a-new-device-to-the-view-resolution-drop-down/

However what the content for the .css file you can find by using the developer tools in your browser

#114415

Dec 11, 2014 15:21

Fredrik von Werder

Vote:

Tanks Alf!

Since I already had a Styles.css in my /ClientResources/Styles, i just added the corresponding classes from dojo there!

If you don't have it there, just must add it, and insert this into the module.config

<clientResources>
      <add name="epi-cms.widgets.base" path="Styles/Styles.css" resourceType="Style"/>
    </clientResources>

For the textbox fix, I just added:

input.dijitInputInner { width: 500px !important; }
div.dijitTextBox { width: 500px !important; }

Just change the width as you prefer

Fredrik

#114441

Dec 11, 2014 15:50