guiDesigner Bug Report: BG Image uses border margins? in button theme properties does nothing

32 views
Skip to first unread message

Grid Sound and Screen

unread,
Dec 8, 2013, 12:46:33 PM12/8/13
to comman...@googlegroups.com
CF,

It seams that the "BG Image uses border margins?" option in button theme properties changes the CDATA CSS of the theme, but this doesn't seem to do anything on an iPad (iOS 7.0.4 and iViewer Next Build 288). I would expect the image to contract 50 pixels in each direction inside the bounds of the button. See the xml below or in the Gist. I wouldn't say this a terribly useful option, but why have it in the software if it doesn't work anyway? My petition would be to remove the option completely?

    <theme type="button" name=".buttonWithBackgroundImageUsesBorderMargins_off[state='0']"><![CDATA[padding: 50px 50px 50px 50px; background-image: url(Square Favicon.png); color: White; font-size: 12px; font-family: 'Verdana'; font-weight: normal; font-style: none; text-decoration: none; text-align: center; vertical-align: middle; display: table-cell; box-sizing: border-box; -webkit-box-sizing: border-box; -webkit-tap-highlight-color:rgba(0,0,0,0);]]></theme>
    <theme type="button" name=".buttonWithBackgroundImageUsesBorderMargins_off[state='1']"><![CDATA[padding: 50px 50px 50px 50px; background-image: url(Square Favicon.png); color: White; font-size: 12px; font-family: 'Verdana'; font-weight: normal; font-style: none; text-decoration: none; text-align: center; vertical-align: middle; display: table-cell; box-sizing: border-box; -webkit-box-sizing: border-box; -webkit-tap-highlight-color:rgba(0,0,0,0);]]></theme>
    <theme type="button" name=".buttonWithBackgroundImageUsesBorderMargins_on[state='0']"><![CDATA[padding: 50px 50px 50px 50px; -webkit-border-image: url(Square Favicon.png) 50 50 50 50; color: White; font-size: 12px; font-family: 'Verdana'; font-weight: normal; font-style: none; text-decoration: none; text-align: center; vertical-align: middle; display: table-cell; box-sizing: border-box; -webkit-box-sizing: border-box; -webkit-tap-highlight-color:rgba(0,0,0,0);]]></theme>
    <theme type="button" name=".buttonWithBackgroundImageUsesBorderMargins_on[state='1']"><![CDATA[padding: 50px 50px 50px 50px; -webkit-border-image: url(Square Favicon.png) 50 50 50 50; color: White; font-size: 12px; font-family: 'Verdana'; font-weight: normal; font-style: none; text-decoration: none; text-align: center; vertical-align: middle; display: table-cell; box-sizing: border-box; -webkit-box-sizing: border-box; -webkit-tap-highlight-color:rgba(0,0,0,0);]]></theme>

 

Best,
Michael Carter
Grid Sound and Screen

Jarrod Bell

unread,
Dec 8, 2013, 4:59:05 PM12/8/13
to comman...@googlegroups.com
This option makes the background image get sliced into 3 separate pieces which are resized to make buttons stretchable. The left and right slices stay their given size (based on the left and right values of the border margins) and the middle slice is stretched to fill the remaining area in relation to the button size.


Regards,

Jarrod Bell
CommandFusion
www.commandfusion.com


--
You received this message because you are subscribed to the Google Groups "CommandFusion Software" group.
To unsubscribe from this group and stop receiving emails from it, send an email to commandfusio...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

Reply all
Reply to author
Forward
0 new messages