1

I have a custom webpart called Available seminars:

webpart

I want to modify the width of certain columns.

On the Internet it is written that I have to use

<style type='text/css'>  
    .ms-vh-div[DisplayName='<ColumnName>'] {  
        width: 250px;  
    }  
</style> 

But the problem is that I can't edit the source of Available Seminars. (See the blue border in the image). I can edit the source of my content editor, but not of my custom webpart.

When I click on Edit Source, this shows up:

<div class="ms-rtestate-read ms-rte-wpbox" contenteditable="false" unselectable="on">
   <div class="ms-rtestate-notify  ms-rtestate-read 75788cb9-fede-4c30-931f-34dfb6a75048" id="div_75788cb9-fede-4c30-931f-34dfb6a75048" unselectable="on">
   </div>
   <div id="vid_75788cb9-fede-4c30-931f-34dfb6a75048" unselectable="on" style="display: none;">
   </div>
</div>
<div class="ms-rtestate-read ms-rte-wpbox" contenteditable="false" unselectable="on">
   <div class="ms-rtestate-notify  ms-rtestate-read 1ba441c2-b2e9-42a7-b0cc-506e02119f5c" id="div_1ba441c2-b2e9-42a7-b0cc-506e02119f5c" unselectable="on">
   </div>
   <div id="vid_1ba441c2-b2e9-42a7-b0cc-506e02119f5c" unselectable="on" style="display: none;">
   </div>
</div>
<div class="ms-rtestate-read ms-rte-wpbox" contenteditable="false" unselectable="on">
   <div class="ms-rtestate-notify  ms-rtestate-read 92217f41-4296-4700-9b00-0a556b46141d" id="div_92217f41-4296-4700-9b00-0a556b46141d" unselectable="on">
   </div>
   <div id="vid_92217f41-4296-4700-9b00-0a556b46141d" unselectable="on" style="display: none;">
   </div>
</div> 
<br/>

And when I add

<style type='text/css'>  
    .ms-vh-div[DisplayName='<Title>'] {  
        width: 450px;  
    }  
</style> 

then nothing happens.

Does someone know a solution to this?

Here's what shows up when I go to title with the dev tools:

enter image description here

1 Answer 1

1

Try this, it works for me

.ms-vh-div[displayname='Title'] {
    width: 450px;
}

enter image description here

6
  • Sorry, but this still doesn't work for me. But I think the code is not the problem. The problem is that I can't edit the source of the "Available Seminars" webpart Jan 15, 2020 at 13:15
  • Still not doing it.. When I save it and open the source again, it changes to <style type="text/css"> .ms-vh-div[DisplayName='Title<span id='ms-rterangeselectionplaceholder-start'></span><span id='ms-rterangeselectionplaceholder-end'></span>'] { width: 450px; } </style> Jan 15, 2020 at 13:19
  • Add don't use developer mode while you editing content editor web part. Try to close Developer Mode and add style again.
    – Raf
    Jan 15, 2020 at 13:21
  • Also I suggest to use Script Editor Web Part instead of Content Editor Web Part
    – Raf
    Jan 15, 2020 at 13:22
  • Edited post with image of what pops up when navigating to title column Jan 15, 2020 at 13:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.