Quantcast
Channel: SharePoint 2013 - Development and Programming forum
Viewing all articles
Browse latest Browse all 7589

How to set width of taxonomy field editor in custom layout page

$
0
0

I have a custom master page and layouts. In the layout I have an EditModePanel. Inside that I have included some managed metadata columns. My problem is that SharePoint is writing an inline style attribute to set the width of the div that contains this control. But it isn't able to fit both the text field and the 'browse for a valid choice' icon button on the same line, due to this inline style width attribute. This throws the spacing off completely with the title of the field then a new line under, with the small icon button to the far right, then on a new line is the text field. If I use the browser developer tools to delete the width="778px" then the text field and icon are on one line. I can't override with with my stylesheet because it is inline style which always takes precedence!

What is in my layout page:

<PublishingWebControls:EditModePanel runat=server id="EditModePanel1" CssClass="edit-mode-panel" SupressTag="True"><SharePointWebControls:TextField ID="TextField1" FieldName="Title" runat="server"></SharePointWebControls:TextField><SharePointWebControls:FieldProperty ID="FieldProperty1" FieldName="Title" PropertyName="Description" runat="server" /><SharePointWebControls:FieldProperty ID="FieldProperty3" FieldName="ReviewDate" PropertyName="Description" runat="server" /><Taxonomy:TaxonomyFieldControl ID="TaxonomyFieldControl1" FieldName="ContentKeywords" runat="server"></Taxonomy:TaxonomyFieldControl><Taxonomy:TaxonomyFieldControl ID="TaxonomyFieldControl2" FieldName="OrganisationalUnit" runat="server"></Taxonomy:TaxonomyFieldControl></PublishingWebControls:EditModePanel>

What gets rendered by SharePoint - notice the width="778px. I have a div around the editmodepanel which has width="800". So it appears SharePoint has some JavaScript that measures the width of the container above to then work out what to set as the inline width for this div. But is not making it small enough for both the text box and the icon to fit on the same line.

<div class="ms-formfieldvaluecontainer"><span dir="none"><span id="ctl00_PlaceHolderMain_EditModePanel1_TaxonomyFieldControl2_ctl00"><input type="hidden" id="ctl00_PlaceHolderMain_EditModePanel1_TaxonomyFieldControl2_ctl01" name="ctl00$PlaceHolderMain$EditModePanel1$TaxonomyFieldControl2$ctl01"><div class="ms-taxonomy ms-taxonomy-height ms-long" id="ctl00_PlaceHolderMain_EditModePanel1_TaxonomyFieldControl2_ctl02"><div id="ctl00_PlaceHolderMain_EditModePanel1_TaxonomyFieldControl2_ctl02controlHolder" class="ms-taxonomy-control-holder ms-long"><img src="/_layouts/15/images/EMMCopyTerm.png" title="Browse for a valid choice" alt="Browse for a valid choice" tabindex="0" class="ms-taxonomy-browser-button"><div class="ms-taxonomy-fieldeditor ms-taxonomy-fieldeditor-standard ms-taxonomy-disabled" title="Organisational Unit" style="width: 778px;"><span id="ms-rterangecursor-start" rtenodeid="1"></span><div contenteditable="false" id="ctl00_PlaceHolderMain_EditModePanel1_TaxonomyFieldControl2_ctl02editableRegion" class="ms-taxonomy-writeableregion ms-inputBox ms-rtestate-read" disableribboncommands="True" allowmultilines="false" restrictpastetotext="True"></div><span id="ms-rterangecursor-end"></span></div></div><div id="ctl00_PlaceHolderMain_EditModePanel1_TaxonomyFieldControl2_ctl02suggestionsContainer" class="ms-taxonomy-suggestion-container ms-rtefocus-invalid ms-taxonomy-hidden" unselectable="on"><div class="ms-taxonomy-suggestion-holder" unselectable="on"></div><img src="/_layouts/15/images/CornerGrip.gif" unselectable="on" class="ms-taxonomy-panel-resizer"></div></div></span></span></div>
So how can I get around this limitation of SharePoint?

Viewing all articles
Browse latest Browse all 7589

Trending Articles