Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

Width of macro output does not grown when chat pane width is increased.

1757527743

Edited 1757595781
I have a macro that produces a "card" in the chat pane.&nbsp; Some of the text is long, so I was expecting the width of the card to grow when I increase the size of the chat pane.&nbsp; But it does not.&nbsp; Below is a portion of my macro. What is preventing the card from dynamically growing with the width of the pane? Is the template being used one that is embedded within Roll20, or is this from an installed add-on (13th age)? &amp;{template:power} {{name=Flexible Attack}} {{atwill=1}} {{type=At-Will}} {{action-range-flag=1}} {{action=Flexible Action}} {{Effect-1=1}} {{cust1=1}} {{cust1-subcust1=1}} {{cust1-subcust1-desc= **Special:** Use your natural attack roll to trigger one of your flexible attack powers. If there are somehow none to trigger, your attack functions as a basic attack. }} {{cust1-subcust2=1}} {{cust1-subcust2-desc= [Read More...]( <a href="http://journal.roll20.net/handout/xxxxxxxxxx" rel="nofollow">http://journal.roll20.net/handout/xxxxxxxxxx</a> )}} {{cust2=1}} {{typecustom-2=1}} {{custype2=Choices}} {{cust2-subcust1-desc= blah blah }}
Screenshot:&nbsp; As you can see, the "Flexible Attack" card only takes up half the width.&nbsp; :(
Pete said: What is preventing the card from dynamically growing with the width of the pane? Is the template being used one that is embedded within Roll20, or is this from an installed add-on (13th age)? The width of the card is determined by the roll template, which is controlled by the character sheet that is selected for the game.&nbsp; The card uses CSS to determine the appearance, and the CSS likely defines a set width (something like style="width: 200px;"), instead of a dynamic width ( style="width: 100%;"). You'll have to contact the sheet designer to ask for them to update the CSS for the card output. An alternative is to use a browser extension such as Stylus to modify what you see on the screen. Here's an example of modifying the 'D&amp;D 5E 2014 by Roll20' roll template to be wider.
1757529205

Edited 1757533693
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
Also, if you can modify your macro to use the default template, I believe that one is responsive to panel width.
1757540503

Edited 1757595696
/* Full Width '13th Age by Roll20' Chat Template */ /* Divs for 13th Age chat messages - power example: &nbsp; &nbsp;rightsidebar &nbsp; &nbsp; &nbsp; -&gt; textchat &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;-&gt; content &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; -&gt; message general you &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;-&gt; sheet-rolltemplate-power &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; -&gt; sheet-header sheet-atwill &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; -&gt; sheet-body &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;-&gt; sheet-row ... */ /* Templates on the character sheet: attr - Character attribute rolls. ba - Built-in basic melee and ranged attacks (automatically provided and non-editable). init - Initiative rolls. power - Any power or attack a user adds below the build-in basic attacks on the sheet. Types available to choose on the sheet and their CSS class: At-Will: sheet-atwill Class: sheet-class Custom: sheet-custom Daily: sheet-recharge-daily Encounter: sheet-racial-encounter Magic Item: sheet-magicitem Racial: sheet-racial-encounter Recharge: sheet-recharge-daily Spell: sheet-spell (Note that some CSS classes are shared amongst types.) rec - Recovery rolls. save - Save rolls. */ div[class^="sheet-rolltemplate-power"] &gt; div[class^="sheet-header sheet-atwill"], div[class^="sheet-rolltemplate-power"] &gt; div[class^="sheet-header sheet-custom"], div[class^="sheet-rolltemplate-power"] &gt; div[class^="sheet-header sheet-class"], div[class^="sheet-rolltemplate-power"] &gt; div[class^="sheet-header sheet-racial-encounter"], div[class^="sheet-rolltemplate-power"] &gt; div[class^="sheet-body"], div[class^="sheet-rolltemplate-ba"] &gt; div[class^="sheet-header"], div[class^="sheet-rolltemplate-ba"] &gt; div[class^="sheet-body"], div[class^="sheet-rolltemplate-attr"] &gt; div[class^="sheet-header"], div[class^="sheet-rolltemplate-attr"] &gt; div[class^="sheet-body"], div[class^="sheet-rolltemplate-init"] &gt; div[class^="sheet-header"], div[class^="sheet-rolltemplate-init"] &gt; div[class^="sheet-body"], div[class^="sheet-rolltemplate-rec"] &gt; div[class^="sheet-header"], div[class^="sheet-rolltemplate-rec"] &gt; div[class^="sheet-body"], div[class^="sheet-rolltemplate-save"] &gt; div[class^="sheet-header"], div[class^="sheet-rolltemplate-save"] &gt; div[class^="sheet-body"] { width: 100% !important; }
Much better!