Text edit box size on custom page content

MarcQuinlivanMarcQuinlivan Registered Users Posts: 56 Big grins

I've had a problem when editing text in a text box, HTML or CSS widget while using a 4K screen.

The text box is tiny - 765 x 265 pixels.

I have created some code to make the boxes bigger:

/* make edit boxes wider on larger screens */

@media screen and (min-width: 1600px) and (max-width: 2100px) {
  .sm-page-widget-inspector-panel {
     width: 1200px !important;
     left: 30% !important;
     top: 25% !important;
  }
  .cm-s-zenburn.CodeMirror {
    height: 500px !important;
  }
}

@media screen and (min-width: 2101px) {
  .sm-page-widget-inspector-panel {
     width: 1800px !important;
     left: 23% !important;
     top: 20% !important;
  }
  .cm-s-zenburn.CodeMirror {
    height: 700px !important;
  }
}

It now looks like this on larger screens:

The only (minor) problem I have now is that the photo selection (and other widget menus) also appear in the same larger size.

It's something I can live with in order to have the larger text editing panels, but is there another way to achieve the same result?

Comments

  • AllenAllen Registered Users Posts: 10,008 Major grins

    Make sure the browser is set to 100% zoom.

    Al - Just a volunteer here having fun
    My Website index | My Blog
  • MarcQuinlivanMarcQuinlivan Registered Users Posts: 56 Big grins

    @Allen 100% zoom won't make the text box any bigger.

    I want to fit more text into the text box rather than just zooming in.

    I have a solution, but I wanted to see if there was a way to stop the other widgets resizing.

  • AllenAllen Registered Users Posts: 10,008 Major grins
    edited April 9, 2019

    At one time I resized the widget using this CSS. Back in 2014-15

    EDIT: looks like still works, just tried it.

        /* start edit box */
    .sm-overlay-container .sm-page-widget-inspector-panel{
      width:920px!important
    }
    
    .sm-page-widget-inspector-panel .sm-panel-content .sm-tabs-content{
      height:500px!important;
      width:920px
    }
    
    .sm-page-widget-inspector-panel .sm-panel-content .sm-tabs-content .CodeMirror{
      height:400px!important
    }
        /* END edit box */
    
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • MarcQuinlivanMarcQuinlivan Registered Users Posts: 56 Big grins

    Thanks @Allen

    That's something I tried too, but from what I remember it had the same effect in that it made the rest of the widgets on the "customise content and design" view resize too (as per my photo in the original post)

    It also makes the publish\discard changes popup wider too.

    I'll see if I can merge both into something that might work.

Sign In or Register to comment.