Anonymous user
Forum:New Metabox development: Difference between revisions
no edit summary
imported>LostInRiverview No edit summary |
imported>LostInRiverview No edit summary |
||
Line 229:
:::::I could be wrong, but I see a <nowiki><center></nowiki> just above the DIV. Since placing "display:table-cell;" within the same DIV that has the width adjustable counteracts the ability to adjust the width, placing it in the element just above it should make it so the resizing is still possible. So that is why I was saying to place the styling in the center tag like this: <nowiki><center style="display:table-cell;"></nowiki> -- [[User:Icemandeaf|Icemandeaf]] ([[User talk:Icemandeaf|talk]]) 23:33, April 9, 2015 (UTC)
::::::It appears to work as intended. Looking on the Sandbox, the design does not collide with floating elements (infoboxes and images), fits alongside instead of wrapping down, and is re-sizable. -- '''[[User:LostInRiverview|<font color="navy">LostInRiverview</font>]]<sup> [[User_talk:LostInRiverview|<font color="green">talk</font>]] • [[User_blog:LostInRiverview|<font color="green">blog</font>]] • [[Special:Contributions/LostInRiverview|<font color="green">contribs</font>]]</sup>''' 23:59, April 9, 2015 (UTC)
:::::::Everything I said above is true, however there is a problem - the template still defaults to the width of the content inside it. Observe:
{{#ifeq:{{{size}}}|small|
<div style="background: #{{#if:|{{{backgroundcolor}}}|{{MetaboxBG|official }} }}; border: 1px solid #E0E0E0; text-align: left; width: {{#if:|{{{width}}}%|40%}}; box-shadow: 1px 1px 3px #777; min-height: 45px; margin-bottom: 1px;">{{#if:Moodlet_no_frame_ask_sim_to_take_a_test.png|<div style="float: left; width: {{#expr: 45 + 5}}px; margin-left: 3px; position: absolute;">[[File:Moodlet_no_frame_ask_sim_to_take_a_test.png|center|{{#if:|{{{imagesize}}}px|45px}}]]</div>|}}<div style="background: #{{#if:|{{{headercolor}}}|{{#if:|{{{bordercolor}}}|{{MetaboxHeader|official }} }} }}; width: auto; margin: 3px;{{#if:Moodlet_no_frame_ask_sim_to_take_a_test.png| padding-left:{{#expr: 45 + 5}}px;| padding-left: 5px;}} font-side: 95%; font-weight: bold; text-shadow: 1px 1px 2px #333; color: white; box-shadow: 1px 1px 3px #777;">{{#if: Metabox "current design"|Metabox "current design"| }}</div><div style="padding-bottom: 3px; {{#if:Moodlet_no_frame_ask_sim_to_take_a_test.png|margin-left: {{#expr: 45 + 5}}px;|margin-left: 5px;}} margin-right: 5px; font-size: 90%;">
Text</div>
</div>
|<center>
<div style="background: #{{#if:|{{{backgroundcolor}}}|{{MetaboxBG|official }} }}; border: 1px solid #E0E0E0; text-align: left; width: {{#if: |{{{width}}}%|85%}}; box-shadow: 1px 1px 3px #777; min-height: 60px; margin-bottom: 1px;">{{#if:Moodlet_no_frame_ask_sim_to_take_a_test.png|<div style="float: left; width: {{#expr: 60 + 5}}px; margin-left: 5px; position: absolute;">[[File:Moodlet_no_frame_ask_sim_to_take_a_test.png|center|{{#if:|{{{imagesize}}}px|60px}}]]</div>|}}<div style="background: #{{#if:|{{{headercolor}}}|{{#if:|{{{bordercolor}}}|{{MetaboxHeader|official }} }} }}; width: auto; margin: 5px;{{#if:Moodlet_no_frame_ask_sim_to_take_a_test.png| padding-left:{{#expr: 60 + 5}}px;| padding-left: 5px;}} font-side: 110%; font-weight: bold; text-shadow: 1px 1px 2px #333; color: white; box-shadow: 1px 1px 3px #777;">{{#if: Metabox "current design"|Metabox "current design"| }}</div><div style="padding-bottom: 5px;{{#if:Moodlet_no_frame_ask_sim_to_take_a_test.png|margin-left: {{#expr: 60 + 10}}px;|margin-left: 5px;}} margin-right: 5px;">
Text</div>
{{clrl}}</div></center>
}}{{#if:|{{#ifeq:{{NAMESPACE}}| | [[Category:{{{cat}}}|{{#if:|{{{catsort}}}|{{{PAGENAME}}}}}]]|}}|}}{{#if: | | {{#ifeq:{{NAMESPACE}}|Template|[[Category:Templates using Metabox|{{PAGENAME}}]]|}}}}
{{#ifeq:{{{size}}}|small|
<div style="background: #{{#if:|{{{backgroundcolor}}}|{{MetaboxBG|official }} }}; display:table-cell; border: 1px solid #E0E0E0; text-align: left; width: {{#if:|{{{width}}}%|40%}}; box-shadow: 1px 1px 3px #777; min-height: 45px; margin-bottom: 1px;">{{#if:Moodlet_no_frame_ask_sim_to_take_a_test.png|<div style="float: left; width: {{#expr: 45 + 5}}px; margin-left: 3px; position: absolute;">[[File:Moodlet_no_frame_ask_sim_to_take_a_test.png|center|{{#if:|{{{imagesize}}}px|45px}}]]</div>|}}<div style="background: #{{#if:|{{{headercolor}}}|{{#if:|{{{bordercolor}}}|{{MetaboxHeader|official }} }} }}; width: auto; margin: 3px;{{#if:Moodlet_no_frame_ask_sim_to_take_a_test.png| padding-left:{{#expr: 45 + 5}}px;| padding-left: 5px;}} font-side: 95%; font-weight: bold; text-shadow: 1px 1px 2px #333; color: white; box-shadow: 1px 1px 3px #777;">{{#if: Metabox "fixed design"|Metabox "fixed design"| }}</div><div style="padding-bottom: 3px; {{#if:Moodlet_no_frame_ask_sim_to_take_a_test.png|margin-left: {{#expr: 45 + 5}}px;|margin-left: 5px;}} margin-right: 5px; font-size: 90%;">
Text</div>
</div>
|<center><div style="display: table-cell;">
<div style="background: #{{#if:|{{{backgroundcolor}}}|{{MetaboxBG|official }} }}; border: 1px solid #E0E0E0; text-align: left; width: {{#if: |{{{width}}}%|85%}}; box-shadow: 1px 1px 3px #777; min-height: 60px; margin-bottom: 1px;">{{#if:Moodlet_no_frame_ask_sim_to_take_a_test.png|<div style="float: left; width: {{#expr: 60 + 5}}px; margin-left: 5px; position: absolute;">[[File:Moodlet_no_frame_ask_sim_to_take_a_test.png|center|{{#if:|{{{imagesize}}}px|60px}}]]</div>|}}<div style="background: #{{#if:|{{{headercolor}}}|{{#if:|{{{bordercolor}}}|{{MetaboxHeader|official }} }} }}; width: auto; margin: 5px;{{#if:Moodlet_no_frame_ask_sim_to_take_a_test.png| padding-left:{{#expr: 60 + 5}}px;| padding-left: 5px;}} font-side: 110%; font-weight: bold; text-shadow: 1px 1px 2px #333; color: white; box-shadow: 1px 1px 3px #777;">{{#if: Metabox "fixed design"|Metabox "fixed design"| }}</div><div style="padding-bottom: 5px;{{#if:Moodlet_no_frame_ask_sim_to_take_a_test.png|margin-left: {{#expr: 60 + 10}}px;|margin-left: 5px;}} margin-right: 5px;">
Text</div>
{{clrl}}</div></div></center>
}}
{{#ifeq:{{{size}}}|small|
<div style="background: #{{#if:|{{{backgroundcolor}}}|{{MetaboxBG|official }} }}; display:table-cell; border: 1px solid #E0E0E0; text-align: left; width: {{#if:50|50%|40%}}; box-shadow: 1px 1px 3px #777; min-height: 45px; margin-bottom: 1px;">{{#if:Moodlet_no_frame_ask_sim_to_take_a_test.png|<div style="float: left; width: {{#expr: 45 + 5}}px; margin-left: 3px; position: absolute;">[[File:Moodlet_no_frame_ask_sim_to_take_a_test.png|center|{{#if:|{{{imagesize}}}px|45px}}]]</div>|}}<div style="background: #{{#if:|{{{headercolor}}}|{{#if:|{{{bordercolor}}}|{{MetaboxHeader|official }} }} }}; width: auto; margin: 3px;{{#if:Moodlet_no_frame_ask_sim_to_take_a_test.png| padding-left:{{#expr: 45 + 5}}px;| padding-left: 5px;}} font-side: 95%; font-weight: bold; text-shadow: 1px 1px 2px #333; color: white; box-shadow: 1px 1px 3px #777;">{{#if: Metabox "fixed design" with set width 50% and text|Metabox "fixed design" with set width 50% and text| }}</div><div style="padding-bottom: 3px; {{#if:Moodlet_no_frame_ask_sim_to_take_a_test.png|margin-left: {{#expr: 45 + 5}}px;|margin-left: 5px;}} margin-right: 5px; font-size: 90%;">
{{Lorem Ipsum}}</div>
</div>
|<center><div style="display: table-cell;">
<div style="background: #{{#if:|{{{backgroundcolor}}}|{{MetaboxBG|official }} }}; border: 1px solid #E0E0E0; text-align: left; width: {{#if: 50|50%|85%}}; box-shadow: 1px 1px 3px #777; min-height: 60px; margin-bottom: 1px;">{{#if:Moodlet_no_frame_ask_sim_to_take_a_test.png|<div style="float: left; width: {{#expr: 60 + 5}}px; margin-left: 5px; position: absolute;">[[File:Moodlet_no_frame_ask_sim_to_take_a_test.png|center|{{#if:|{{{imagesize}}}px|60px}}]]</div>|}}<div style="background: #{{#if:|{{{headercolor}}}|{{#if:|{{{bordercolor}}}|{{MetaboxHeader|official }} }} }}; width: auto; margin: 5px;{{#if:Moodlet_no_frame_ask_sim_to_take_a_test.png| padding-left:{{#expr: 60 + 5}}px;| padding-left: 5px;}} font-side: 110%; font-weight: bold; text-shadow: 1px 1px 2px #333; color: white; box-shadow: 1px 1px 3px #777;">{{#if: Metabox "fixed design" with set width 50% and text|Metabox "fixed design" with set width 50% and text| }}</div><div style="padding-bottom: 5px;{{#if:Moodlet_no_frame_ask_sim_to_take_a_test.png|margin-left: {{#expr: 60 + 10}}px;|margin-left: 5px;}} margin-right: 5px;">
{{Lorem Ipsum}}</div>
{{clrl}}</div></div></center>
}}
{{#ifeq:{{{size}}}|small|
<div style="background: #{{#if:|{{{backgroundcolor}}}|{{MetaboxBG|official }} }}; display:table-cell; border: 1px solid #E0E0E0; text-align: left; width: {{#if:50|50%|40%}}; box-shadow: 1px 1px 3px #777; min-height: 45px; margin-bottom: 1px;">{{#if:Moodlet_no_frame_ask_sim_to_take_a_test.png|<div style="float: left; width: {{#expr: 45 + 5}}px; margin-left: 3px; position: absolute;">[[File:Moodlet_no_frame_ask_sim_to_take_a_test.png|center|{{#if:|{{{imagesize}}}px|45px}}]]</div>|}}<div style="background: #{{#if:|{{{headercolor}}}|{{#if:|{{{bordercolor}}}|{{MetaboxHeader|official }} }} }}; width: auto; margin: 3px;{{#if:Moodlet_no_frame_ask_sim_to_take_a_test.png| padding-left:{{#expr: 45 + 5}}px;| padding-left: 5px;}} font-side: 95%; font-weight: bold; text-shadow: 1px 1px 2px #333; color: white; box-shadow: 1px 1px 3px #777;">{{#if: Metabox "fixed design" with set width 50%|Metabox "fixed design" with set width 50%| }}</div><div style="padding-bottom: 3px; {{#if:Moodlet_no_frame_ask_sim_to_take_a_test.png|margin-left: {{#expr: 45 + 5}}px;|margin-left: 5px;}} margin-right: 5px; font-size: 90%;">
No text</div>
</div>
|<center><div style="display: table-cell;">
<div style="background: #{{#if:|{{{backgroundcolor}}}|{{MetaboxBG|official }} }}; border: 1px solid #E0E0E0; text-align: left; width: {{#if: 50|50%|85%}}; box-shadow: 1px 1px 3px #777; min-height: 60px; margin-bottom: 1px;">{{#if:Moodlet_no_frame_ask_sim_to_take_a_test.png|<div style="float: left; width: {{#expr: 60 + 5}}px; margin-left: 5px; position: absolute;">[[File:Moodlet_no_frame_ask_sim_to_take_a_test.png|center|{{#if:|{{{imagesize}}}px|60px}}]]</div>|}}<div style="background: #{{#if:|{{{headercolor}}}|{{#if:|{{{bordercolor}}}|{{MetaboxHeader|official }} }} }}; width: auto; margin: 5px;{{#if:Moodlet_no_frame_ask_sim_to_take_a_test.png| padding-left:{{#expr: 60 + 5}}px;| padding-left: 5px;}} font-side: 110%; font-weight: bold; text-shadow: 1px 1px 2px #333; color: white; box-shadow: 1px 1px 3px #777;">{{#if: Metabox "fixed design" with set width 50%|Metabox "fixed design" with set width 50%| }}</div><div style="padding-bottom: 5px;{{#if:Moodlet_no_frame_ask_sim_to_take_a_test.png|margin-left: {{#expr: 60 + 10}}px;|margin-left: 5px;}} margin-right: 5px;">
No text</div>
{{clrl}}</div></div></center>
}}
:::::::Now, the template is set to have a default width of 85%, but it's being ignored unless there's enough text to fill the template. The same goes for a customized width - the width is only used if the text inside goes from end to end. -- '''[[User:LostInRiverview|<font color="navy">LostInRiverview</font>]]<sup> [[User_talk:LostInRiverview|<font color="green">talk</font>]] • [[User_blog:LostInRiverview|<font color="green">blog</font>]] • [[Special:Contributions/LostInRiverview|<font color="green">contribs</font>]]</sup>''' 00:53, April 10, 2015 (UTC)
| |||