Page 1 of 1

[1.3.b70] Change style of form buttons

Posted: Fri Sep 10, 2010 7:55 pm
by aliasmask
Specifically, the padded area around the content. There is about a 2px border and then there is about an 10px pad to the left and right of content. Can we get rid of the padded area and if someone wants to put that extra space in there, they can do it with html in the value.

Ideally, I would like to be able to style the whole button, but the above would suffice. I want to make small submit buttons (more reliable than links when clicked) for very tiny image icons, but with all that padding, it's not very tiny.

Below I have an example of a small image blown up x4.
  • The top button is the normal button with an image that is 8x6.
  • The second image shows the button after being selected. Inside the dots is where the content exists. The yellow highlighted area is the padding I wish wasn't there.
  • The bottom image is an example of the button without the extra padding and also shows the actual size of the large and smaller button.

Re: [1.3.b70] Change style of form buttons

Posted: Fri Sep 10, 2010 10:26 pm
by Azhrei
That can't be changed with CSS in your HTML form? That's what CSS is for...

Re: [1.3.b70] Change style of form buttons

Posted: Fri Sep 10, 2010 10:48 pm
by aliasmask
Azhrei wrote:That can't be changed with CSS in your HTML form? That's what CSS is for...

Nope. Float doesn't work, negative margins... stuff like that. Unless I'm doing something wrong. As far as I know, NO CSS works as a part of the input tag. The only changes I can do are in the value of the tag and that doesn't effect the padding.

edit:

Code: Select all

<!-- Does not work -->
<
input type="submit" style="font-weight:700" value="X">
<
span style="font-weight:700"><input type="submit" value="X"></span>
<!--
 Does work -->
<
input type="submit" value="<html><span style='font-weight:700'>X</span></html>"> 

Re: [1.3.b70] Change style of form buttons

Posted: Sat Sep 11, 2010 9:29 pm
by biodude
Have you tried changing padding or margins in the html in the input contents directly?

Code: Select all

<input type="submit" value="<html><span style='padding: 0 ; margin: 0 ;'>X</span></html>">
<input type="submit" value="<html><head><style><!-- html { margin: 0 ; padding: 0 ; } --></style></head><body>X</body></html>">

That last one may not play nice with macro code (due to the curly braces), but I'm just thinking out loud.
As far as I can recall, the CSS in MapTool is not applied to input tags (classes), and the trick of nesting html inside the value attribute might create a whole new html context, so any external stylesheet is also not applied from the main form. What if...

Code: Select all

<input type="submit" value="<html><head><link rel='stylesheet' href='[R: macroLinkText(...)]'></head><body>X</body></html>">

and the link tag href pointed to a stylesheet with margin & padding specified?

Sorry, I don't have time to test all this now, but thought these ideas might be helpful. Good luck.

Re: [1.3.b70] Change style of form buttons

Posted: Mon Sep 13, 2010 5:42 am
by CoveredInFish
All of those are displayed the same (AKA no effect).

Re: [1.3.b70] Change style of form buttons

Posted: Sat Sep 25, 2010 4:40 am
by aliasmask
Here's an example of various browsers displaying the following code:

Code: Select all

<input  type="submit" value="x">

It would be nice if it could be formated like google chrome or internet explorer. The Firefox is a little big for my tastes. I imagine there is some button CSS somewhere in the maptool code where this can be changed. No CSS put in a macro will effect submit buttons because the maptool code forces the format.