CODEWITHSUNDEEP
htmlcssgoogle-apps-scriptskeleton-css-boilerplate
aleptian
aleptian

Reputation: 81

text-align:center is not working on Apps Script HTML sidebar

So I am making an HTML sidebar in Google Sheets using Apps Script. I am also using the Skeleton CSS framework.

So I'd like the submit button here to be centered:

Sidebar

I've tried this: making an align class in CSS, and then applying it to the button. I forgot to mention that all my other elements are aligned except the buttons.

  <style>
    body{
      background-color: white; 
      color: black; 
    }
    .align{
      text-align: center; 
    }
    .margin{
      margin-bottom: 10px; 
    }
    h1{
      font-size: 20pt; 
    }

    h2{
      font-size: 16pt; 
    }

    </style>

Here is my HTML code:

  <body>
    <h1 class = "align ">Welcome to the clothing expense custom menu bar!</h1>
    <h2 class = "align">Here are the custom functions you can use:</h2>
    <p class = "align"> See how much you've spent on a brand.</p>
    <form onsubmit="runFunc()">
      <input class = "u-full-width " id="brand" type = "text" placeholder="Enter brand name">
      <div>
        <button type="submit" class="button-primary align">Submit</button>
      </div>
    </form>


    <p class = "align"> See how much you've spent on a type of clothing.</p>

    <form onsubmit="runFuncTwo()">
      <input class = "margin u-full-width" id="type" type = "text" placeholder="Enter clothing brand">
      <div>
        <button type="submit" class="button-primary align">Submit</button>
      </div>
    </form>
  </body>

Thanks!

Upvotes: 1

Views: 673

Answers (3)

Zrelli Majdi
Zrelli Majdi

Reputation: 1260

css:

 h1{
      font-size: 20pt; 
      width:100%;
    }

    h2{
      font-size: 16pt; 
      width:100%;

    }

html:add all text content within span tag:

<h1 class = "align "><span>Welcome to the clothing expense custom menu bar! </span></h1>

Upvotes: 1

Bruno Gomes
Bruno Gomes

Reputation: 36

All of these 3 solutions should work, I would choose the second or third one.

If you make the div full-width and add align to it, it should work

<div class="u-full-width align">
    <button type="submit" class="button-primary">Submit</button>
</div>

You can also make the div a flex, like so (Use classes instead of inline style)

<div class="u-full-width" style="display:flex; justify-content: center">
    <button type="submit" class="button-primary">Submit</button>
</div>

You can also add margin:auto and float:none to the button (Use classes instead of inline style)

<button type="submit" class="button-primary"
        style="margin:auto; float:none">Submit</button>

Upvotes: 2

iorgu
iorgu

Reputation: 3009

The code is:

    button.button-primary.align {
    width: 100%;
    max-width: 150px;
    margin: 0 auto;
    display: block;
}

And here it is in action:

body{
      background-color: white; 
      color: black; 
    }
    .align{
      text-align: center; 
    }
    .margin{
      margin-bottom: 10px; 
    }
    h1{
      font-size: 20pt; 
    }

    h2{
      font-size: 16pt; 
    }
    /*new code from here*/
    
    button.button-primary.align {
    width: 100%;
    max-width: 150px;
    margin: 0 auto;
    display: block;
}
<body>
    <h1 class = "align ">Welcome to the clothing expense custom menu bar!</h1>
    <h2 class = "align">Here are the custom functions you can use:</h2>
    <p class = "align"> See how much you've spent on a brand.</p>
    <form onsubmit="runFunc()">
      <input class = "u-full-width " id="brand" type = "text" placeholder="Enter brand name">
      <div>
        <button type="submit" class="button-primary align">Submit</button>
      </div>
    </form>


    <p class = "align"> See how much you've spent on a type of clothing.</p>

    <form onsubmit="runFuncTwo()">
      <input class = "margin u-full-width" id="type" type = "text" placeholder="Enter clothing brand">
      <div>
        <button type="submit" class="button-primary align">Submit</button>
      </div>
    </form>
  </body>

Upvotes: 1

Related Questions