[Help] Expanding width of textbox in macro

I'm using whispering macro but textbox is too small.

Is there any way to expand width of textbox? Like this :

API, script or something? thanks.

You could probably adjust it via the stylus (stylus, NOT stylish) plug in, but there isn't a way native to Roll20.

Edit: Don't do this. Apparently, there is no CSS difference between a query macro input box and any other input box. This will totally hork the Attributes and Abilities tab, for instance.

I've only done very quick testing, but you could try this code as a Stylus style.

.ui-dialog {
    width: 600px !important;
}
.ui-dialog input{
        width: 500px !important; 
}

So, Keith and I have been discussing this off the forums. We've come up with the following stylus code to provide some nice enlargement of the input area while not affecting any other inputs (at least haven't found any others affected yet):

.ui-dialog-content.ui-widget-content p{
    display:flex;
    flex-wrap:wrap;
}
.ui-dialog-content.ui-widget-content p > input{
        flex-grow:1;
}
.ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-draggable.ui-resizable.ui-dialog-buttons{
    min-width:50% !important;
}

Gif wasn't quite what I wanted, here's a leaner one:

Very nice Scott. It's now part of my Stylus suite.

It works perfectly. Thank you so much Scott and Keithcurtis!

Scott C. said:

So, Keith and I have been discussing this off the forums. We've come up with the following stylus code to provide some nice enlargement of the input area while not affecting any other inputs (at least haven't found any others affected yet):

.ui-dialog-content.ui-widget-content p{
    display:flex;
    flex-wrap:wrap;
}
.ui-dialog-content.ui-widget-content p > input{
        flex-grow:1;
}
.ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-draggable.ui-resizable.ui-dialog-buttons{
    min-width:50% !important;
}

I've tested the snippet above and it works fine on the input box inside the frame, but the surrounding popup window remains a fixed width, extremely wide. 

Changing the last section to this seems to fix it:

.ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-draggable.ui-resizable.ui-dialog-buttons {
    min-width: 50% !important;
    width: auto !important;
}

Is this likely to cause problems?

Edit: actually that didnt work once i closed the inspection window. hmm.

The actual fix was reducing the min-width to a lower value, 20% works good for me.

.ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-draggable.ui-resizable.ui-dialog-buttons {
    min-width: 20% !important;
}

Not in a place where I can check, but have you opened a token editing window or character abilities and attributes window to test for abnormalities?

Just checked them, everything seems to be working okay so far.

I found Map page setting window also expands. it's ok, though.

Nice trick!

The Turn Tracker window seems to also be effected by the stylus override given above. 

EDIT: Noon pointed out that labelledby is actually dynamically generated with each new window so you cannot actually use it to select an element. ;-(  Solution below.

I found that by including the "aria-lablledby" attribute you can isolate the various dialog boxes.

ie 

div[aria-labelledby="ui-id-14"] targets the macro/query dialog

This seems to work for the query/macro dialog;    

div[aria-labelledby="ui-id-14"].ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-draggable.ui-resizable.ui-dialog-buttons {
    min-width: 20% !important;
}

huh, interesting, my turn tracker isn't affected. Weird.

My turn tracker is already modified by a different Stylus style (to make it more compact). Maybe the same is true of yours?

keithcurtis said:

My turn tracker is already modified by a different Stylus style (to make it more compact). Maybe the same is true of yours?

Not sure...

I thought of that as well, but I don't think anything in my custom stylus css is affecting the turn tracker. (chrome v70.0.3538.67)

/*macro quickbar */
#macrobar {
  height: auto !important;
  width: 92% !important;
  background-color: rgba(0, 0, 0, 0.44) !important;
  text-align: center !important;
  margin-left: 60px !important;
}
div.macrobox button.btn {
    padding: 0 4px 0 4px;
    font-size: 1.5rem;
    line-height: 1.8rem;
    margin: 0px 0 2px 0;
}
#macrobar_macros {
  white-space: normal !important;
  margin-left: 1% !important;
  margin-right: 1% !important;
  padding-bottom: 0px !important;
}
#macrobar .macrobox {
    margin: 1px 5px 1px 5px ;
}
#macrobar div.macrobox:hover, #macrobar div.macrobox.ui-sortable-helper {
    padding-right: 12px;
    margin-right: -7px;
    border-radius: 3px;
    background-color: #999;
    cursor: move;
}
/*ability tokens */
#secondary-toolbar {
    width: 78% !important;
    opacity:1 !important;
    background-color: rgba(0, 0, 0, 0.44) !important;
} 
#page-toolbar {
  background-color: rgba(0,0,0,0.50) !important;
  width: 80% !important;
  height: 400px !important;
}
#page-toolbar .container {
  width: 100% !important;
  height: 400px !important;
  white-space: normal !important;
  padding-left: 5% !important;
  padding-right: 5% !important;
}
.ui-dialog.dialog-collapsed {
  opacity: .60 !important;
}
div[id="stats"]{
  opacity: 0.3 !important;
}
.charsheet .sheet-pf-wrapper {
      margin-top: 10px !important;
}
.nav-tabs {
    z-index: 100000 !important;
    position: fixed !important;
    background-color: #f0f8ff !important;
    margin:-10px 0 0 0 !important;
    height: 2em !important;
}
.nav-tabs:hover {
    opacity: 1.0 !important;
}
.nav-tabs>li>a {
  padding-top: 6px !important;
  font-size: 1.2em  !important;
  margin-top: -5px !important;
}
div.span6,
div.span12 {
	margin-top:60px !important;
}
/* show mic with names only */
#textchat-notifier {
  position: absolute !important;
  top: -25px !important;
  border: 2px solid #F00 !important;
  opacity: .75 !important;
}
.namesonly .video {
    display: inherit !important;
    min-height: 0px !important;
    height: 0px !important;
}
.namesonly .OT_widget-container {
    display: none !important;
}
.namesonly #publisher_video {
    top: -34px !important;
}

/* large cards */
#playerzone .deckhands .hand .handcontainer {
    width: 600px !important;
}
.hand .handcontainer .cardinhand img {
    max-width: 200px !important;
    max-height: 400px !important;         
}
/* status window */
#radial-menu .markermenu.open {
    width: 280px !important;
    height: 276px !important;
    top: -38px;
    overflow-y: auto;
}

/* API command buttons
.textchatcontainer a[href^="!"], .textchatcontainer a[href^="~"] {
    padding: 1px 4px 1px 4px !important;
    margin: 1px 1px 1px 1px !important;
    border: none !important;
    border-radius: 5px;
    box-shadow: 2px 2px 3px darkslategrey;
}
*/

/*enlarge text input box for queries*/
.ui-dialog-content.ui-widget-content p{
    display:flex;
    flex-wrap:wrap;
}
.ui-dialog-content.ui-widget-content p > input{
        flex-grow:1;
}
/*macro/query dialog*/
div[aria-labelledby="ui-id-14"].ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-draggable.ui-resizable.ui-dialog-buttons {
    min-width: 20% !important;
}
/*init dialog*/
div[aria-labelledby="ui-id-13"].ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-draggable.ui-resizable.ui-dialog-buttons {
    min-width: auto !important;
}

EDIT: Noon pointed out that labelledby is actually dynamically generated with each new window so you cannot actually use it to select an element. ;-(  Solution below.

For your information, I checked out mine and found my Turn order window effected too. Is this Turn Tracker?

I'm using none of Stylus style except this thread's stylus.

EDIT: Noon pointed out that labelledby is actually dynamically generated with each new window so you cannot actually use it to select an element. ;-(  Solution below.

Turn Order, turn tracker are the same in my book.  ;-)   My little substitute code should help.

just change this

.ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-draggable.ui-resizable.ui-dialog-buttons {
    min-width: 20% !important;
}

to

div[aria-labelledby="ui-id-14"].ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-draggable.ui-resizable.ui-dialog-buttons {
    min-width: 20% !important;
}

I updated Stylus code. It works Turn Tracker and even Map Page Setting window as well! Thank you, Vince.

Vince said:

Turn Order, turn tracker are the same in my book.  ;-)   My little substitute code should help.

just change this

.ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-draggable.ui-resizable.ui-dialog-buttons {
    min-width: 20% !important;
}

to

div[aria-labelledby="ui-id-14"].ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-draggable.ui-resizable.ui-dialog-buttons {
    min-width: 20% !important;
}

Oh... Whispering window is also effected from the new code. X0  Textbox is still full of windows, though.

You can't css attribute select by label-id. They change dynamically every new window.

This is an interesting thread and I can't believe this flew under my radar considering I was going to implement this a week ago but got distracted.

Give me a bit.

This should make the text box fit to the area available.

.ui-dialog-content.ui-widget-content > p > strong + input {
    width: 100% !important; width: -moz-available !important; width: -webkit-fill-available !important; width: fill-available !important;
}

Here's a preview.

This shouldn't have any dependencies. That one line should be enough to get the gif results.

If you want the whole window to default to a different size or something that's different.

Like if it fits to the entire VTT and then the box becomes multi-line.

That could be good...

Hmm... I might need some js...

Edit: Oh yeah I wanted it to be tablet optimized because software keyboards resize screens... Eh... Maybe later.

Noon, there have been a lot of revisions on this thread. Is that last bit you posted the entirety of the style? If not, could you post it? I don't seem to be getting the same response (using Chrome at the moment).

Yeah that's it. Works for me in vanilla Chrome 70/ 71 and FF 64

Works fine now. I was not getting proper behavior on Chromebook (because comfy chair). I also moderate on Chrome or Firefox on Mac, but run games solely on Firefox, because reasons. Thanks. "Yer a wizard, Noon!"

Noon said:

You can't css attribute select by label-id. They change dynamically every new window.

Ugh.  I didn't realize that. Thanks Noon

Thank you so much, all of you!

Noon said:

You can't css attribute select by label-id. They change dynamically every new window.

This is an interesting thread and I can't believe this flew under my radar considering I was going to implement this a week ago but got distracted.

Give me a bit.

This should make the text box fit to the area available.

.ui-dialog-content.ui-widget-content > p > strong + input {
    width: 100% !important; width: -moz-available !important; width: -webkit-fill-available !important; width: fill-available !important;
}

"Expected 'auto | <length> | <percentage> | min-content | max-content | fit-content() | -moz-available | -webkit-fill-available' but found 'fill-available'."

Did I miss putting something in or setting something up incorrectly?

Thanks

Warning is fine. It's just there so in the future if the spec gets implemented it will work even better.

If it still works and you don't want the warning just remove the

width: fill-available !important;

at the very end of the declaration. Should work all the same.

Noon said:

Warning is fine. It's just there so in the future if the spec gets implemented it will work even better.

If it still works and you don't want the warning just remove the

width: fill-available !important;

at the very end of the declaration. Should work all the same.

Thank you. I'm fine with the warning.