0

This is my code 

<input type="submit" value="Submit Order" 
       onclick="this.value='Uploading..';
                google.script.run.withSuccessHandler(fileUploaded)
                .uploadFiles(this.parentNode);
                return false;">

I can't put it in a DIV element or else it will not function properly so I was wondering how I could center this button.

EDIT: here's my overall code for the webpage : https://jsfiddle.net/n0ya9tbq/

The reason why I can't put it in a DIV element is because I'm using Google Apps Script and in GAS if I put it in a div element i encounter this error : google.script.run not working: Uncaught InvalidArgumentError: Failed due to illegal value in property: 0

Community
  • 1
  • 1
Kali
  • 93
  • 1
  • 8
  • You typically center inline and inline block elements by centering the content *of its parent*. – Jeroen Dec 08 '15 at 19:04
  • In any case, we'd need more code / a full (but *minimal*, e.g. the `onclick` code doesn't seem relevant?) repro of your scenario. It would also help if you share your attempts and research: there's quite a few ways to go about this, depending on the context one solution might be preferable to the other. – Jeroen Dec 08 '15 at 19:06
  • 1
    The onclick may be relevant, he says it won't function in a div... why not? – Culyx Dec 08 '15 at 19:07
  • Centering happens on the **parent** object. So, without any real parent other than the `body` tag, this can be hard. Also, why wouldn't the functionality work if it was placed inside of a `div`? – Nick Snick Dec 08 '15 at 19:08
  • Possible duplicate of [center form submit buttons html / css](http://stackoverflow.com/questions/4221263/center-form-submit-buttons-html-css) – isherwood Dec 08 '15 at 19:09

2 Answers2

2

Just include an ID in the input tag <input type="submit" value="Submit Order" id='centeredbutton' class='buttoncenter' onclick="this.value='Uploading..'; google.script.run.withSuccessHandler(fileUploaded) .uploadFiles(this.parentNode); return false;">

Then use css:

`input#centeredbutton {
position: fixed;
bottom: 50%;
right: 50%;
}`

Or if you have multiple buttons you want centered:

`input.buttoncenter {
position: fixed;
bottom: 50%;
right: 50%;
}`
TyGuy1016
  • 52
  • 6
1

You can do it changing the display property

input[type="submit"] {
  display: block;
  width: 50%;
  margin: 0 auto;
}
<input type="submit" value="Submit Order" 
       onclick="this.value='Uploading..';
                google.script.run.withSuccessHandler(fileUploaded)
                .uploadFiles(this.parentNode);
                return false;">
Hitmands
  • 13,491
  • 4
  • 34
  • 69
  • Works fine without the fixed width, too. – isherwood Dec 08 '15 at 19:08
  • yep, you just need to change the `display` property. Please, accept my answer! – Hitmands Dec 08 '15 at 19:09
  • this centers the button based on the page size but not the container's width size though. If I minimize the page or zoom out of it, the button placement is changed. – Kali Dec 08 '15 at 19:21
  • You can set the width in pixel instead of percentage... Of course if you set `width: 50%;` the button width is based on its parent that represents the 100%... – Hitmands Dec 08 '15 at 19:24
  • having the width changes the size of the button not where the button is located, that's whats happening for me – Kali Dec 08 '15 at 19:28