Skip to main content ↑ ↓
Topic: Declarations for inputs, selects and buttons (Read 3173 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

Declarations for inputs, selects and buttons

It seems the fixed height causes issues with some things like PayPal Donate Buttons.
I had to change from: (index.css)

Code: [Select]
/* Declarations for inputs, selects and buttons */
input, .input_text, button, select {
	padding: 0 6px;
	min-height: 2em;
	max-height: 2em;
	height: 2em;
	vertical-align: middle;
}

To:

Code: [Select]
/* Declarations for inputs, selects and buttons */
input, .input_text, button, select {
	padding: 0 6px;
	min-height: 2em;
	/* max-height: 2em;
	height: 2em; */
	vertical-align: middle;
}

In order not to have a very tiny Donate Button.
However, after doing so, did not notice any other inputs being negatively affected.

Re: Declarations for inputs, selects and buttons

Reply #1 –

It's browser-dependent. And depends what you mean by "negatively affected".

ETA: Basically, nailing down all height declarations is the only way to get cross-browser consistency on form elements. It may be better to use a specific override just for your Paypal button if required.
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: Declarations for inputs, selects and buttons

Reply #2 –

Quote from: Antechinus – It's browser-dependent. And depends what you mean by "negatively affected".

ETA: Basically, nailing down all height declarations is the only way to get cross-browser consistency on form elements. It may be better to use a specific override just for your Paypal button if required.

Not too sure on how would do that, the way the donate button is done.

Code: [Select]
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="********">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>

Not too sure how would do like you said on that. Messing with input types, is a bit new to me...lol
I had tried to add a class to the image's input, but it would not work.

EDIT: Just to add, I tested IE, FF, Chrome, and Opera, and no negative changes to any other input after removing the fixed height.
Not checked mobiles yet, though.

Re: Declarations for inputs, selects and buttons

Reply #3 –

Easy to customize that one anyways, add the relative height there, or just wrap it in a div and:
Code: [Select]
div#paypal input { yourcsscode }
But not a bug in Elkarte on this one, having those height declarations can be good for cross-browser compat, to avoid default stylesheets, as ant mentioned :)
~ SimplePortal Support Team ~

Re: Declarations for inputs, selects and buttons

Reply #4 –

Why do you use the div in the selector?
Bugs creator.
Features destroyer.
Template killer.

Re: Declarations for inputs, selects and buttons

Reply #5 –

Because for whatever reason there may be some other thing using the same id, still paypal-related, showing up elsewhere. Found myself swearing several times for that same problem, although it was on smf.
~ SimplePortal Support Team ~

Re: Declarations for inputs, selects and buttons

Reply #6 –

Use a div as selector to hope is not used anywhere else in the same context is not really reliable.
On the same page ids are unique, if your problem is multiple pages... well, use the <body> class, it's there for that very reason. If you want to be sure your id is unique then make it more verbose.
But really, use the div is not the right solution.
Last Edit: March 02, 2016, 05:27:15 am by emanuele
Bugs creator.
Features destroyer.
Template killer.

Re: Declarations for inputs, selects and buttons

Reply #7 –

Would be worth add a default class to all the forms and then use that class to pick only "our" buttons?
Bugs creator.
Features destroyer.
Template killer.

Re: Declarations for inputs, selects and buttons

Reply #8 –

Sounds like you'd need to re-check and re-write the whole thing, I don't fancy the idea.
~ SimplePortal Support Team ~

Re: Declarations for inputs, selects and buttons

Reply #9 –

Not really, a good search and replace can do miracles. :P
Bugs creator.
Features destroyer.
Template killer.
 

Re: Declarations for inputs, selects and buttons

Reply #10 –

I am considering addons as well, some may add these things ;)
~ SimplePortal Support Team ~