Dynamics CRM 2013/2015 owner field in header – full width

Dynamics CRM 2015 is very nice. Especially header fields. Except one small bug – you can’t see owner because field is too short:

Using F12 Developer tools we can see DOM:

Oops this is not in CSS (even worst this is in Dynamics JavaScript)! So the only way to fix this is by unsupported jQuery DOM manipulation. My first try was with JavaScript fired at on form load:

function OnLoad() {
   $(document).ready(function () {
       if ($(".ms-crm-HeaderTileElement.ms-crm-HeaderTileElementPosition1").length)
           $(".ms-crm-HeaderTileElement.ms-crm-HeaderTileElementPosition1").width(200);
   });
}

Works!! …. until save. This is because after saving CRM refreshes some elements but doesn’t fire on my OnLoad function.
You can find interesting way to refresh whole page after save:
https://dynamicsofdynamicscrm.wordpress.com/2014/04/03/refresh-crm-2013-form-using-script/

I found another way – by “enable rule” on ribbon. We need solution with this entity and then just use “Ribbon Workbench” to modify ribbon:

http://www.develop1.net/public/Download%20Ribbon%20Workbench%202013.aspx
We also need simple JavaScript almost the same as we have in Onload. Field width is changed also on windows resize – so with a little help from jQuery we can use this function:

function TrickForOwner() {
   $(document).ready(function () {
       if ($(".ms-crm-HeaderTileElement.ms-crm-HeaderTileElementPosition1").length)
           $(".ms-crm-HeaderTileElement.ms-crm-HeaderTileElementPosition1").width(200);
   });
   $(window).resize(function () {
       if ($(".ms-crm-HeaderTileElement.ms-crm-HeaderTileElementPosition1").length)
           $(".ms-crm-HeaderTileElement.ms-crm-HeaderTileElementPosition1").width(200);
   });
   return true; //because this is trick only
}

Now we can use Ribbon Workbench to add this rule to default button (for example “New”). Be careful because Dynamics is clever and your rule will be fired only if this button is visible:

I found this helpful tutorial how to play with Ribbon Workbench:
http://www.develop1.net/public/post/Dynamically-ShowHide-a-standard-ribbon-button-based-on-a-form-value.aspx

Because ribbon is loaded at the beginning and because form is in iframe we have to use both “on load” and “ribbon rule” JavaScript. I was trying attach event from ribbon to iframe but without success (if you have any idea how to do it with single JS please let me know). I can probably use also this interesting plugin:
http://weblog.west-wind.com/posts/2008/Sep/12/jQuery-CSS-Property-Monitoring-Plugin-updated
To attach event only to owner field.

Finally here we have owner with full name: