Reduce Particular field editor Width!!

  • 1
  • Question
  • Updated 5 years ago
  • Answered
Hello,

I want to reduce width of Particular field editors and not of whole page.So can you please help me with the same?

I also attached one file for same.Here i want to only reduced width of marked columns not of whole page.
Please help with this issue ASAP.

Thanks.
Arpit
Photo of Arpit

Arpit

  • 1,514 Points 1k badge 2x thumb

Posted 5 years ago

  • 1
Photo of Anna Wiersema

Anna Wiersema

  • 10,890 Points 10k badge 2x thumb
Yes Arpit, you can set the width of each column in a field editor in the page builder. Just click on the bar at the top of the column, and then set its width in the properties pane:



You can also determine the size of the whole field editor by placing it within a panel set component and then resizing the panel.
Photo of Arpit

Arpit

  • 1,514 Points 1k badge 2x thumb
Hello Anna,

Thanks for your Reply.What i am doing is Within a panel set i am using the Template and field editor.Now within that Panel i want to reduce only the Field editor width,not the template as text got effected .Is there any way to do this with some CSS for those Particular sections or field editor?

Thanks.
Arpit
Photo of Anna Wiersema

Anna Wiersema

  • 10,890 Points 10k badge 2x thumb
Try this as an inline CSS resource:


.nx-basicfieldeditor {
clear: both;
width: 50%;
}


Just enter the width you want.

NOTE: this will affect every field editor on your page. If you want to target a particular field editor you will have to get more descriptive in your CSS. Like I said in the other topic, examining everything in the developer console will help you figure out how the elements and styles on your page are interacting.