-1

I have a button and a textarea:

enter image description here

.text2
{
    font-size:15px;
    resize:none;
    background-color:#FFFFFF;
    width:80%;
    height:300px;
    margin: 5px 0 10px 0;
}

#btn1
{
    margin-top: 5px;
    margin-bottom: 10px;
}
<textarea id="input1"   class="text2" type="text" placeholder="Please enter your writing..." onpropertychange="cop()" oninput="cop()"></textarea>
<button onclick="saveText()" type="button" class="btn btn-primary" id="btn1"><span class="glyphicon glyphicon-folder-close" aria-hidden="true"></span> save as</button>

Now I want to make them align right or left just like this:

enter image description here

How can the run code snippet button and the textarea be aligned left?

Jason Aller
  • 3,541
  • 28
  • 38
  • 38
maxwellhertz
  • 473
  • 1
  • 6
  • 18
  • Your button and your ` – Obsidian Age Feb 09 '18 at 03:16
  • yeah...I want to put – maxwellhertz Feb 09 '18 at 03:22
  • Possible duplicate of [How do I right align div elements?](https://stackoverflow.com/questions/7693224/how-do-i-right-align-div-elements) – Rob Feb 09 '18 at 05:20

2 Answers2

0

To move your button below your <textarea>, you have a number of options.

You could make the <textarea> take up a width of 100%, so that the button wouldn't have space to occupy, thus forcing it to the next row:

.text2 {
  font-size: 15px;
  resize: none;
  background-color: #FFFFFF;
  width: 100%;
  height: 300px;
  margin: 5px 0 10px 0;
}

#btn1 {
  margin-top: 5px;
  margin-bottom: 10px;
}
<textarea id="input1" class="text2" type="text" placeholder="Please enter your writing..." onpropertychange="cop()" oninput="cop()"></textarea>
<button onclick="saveText()" type="button" class="btn btn-primary" id="btn1"><span class="glyphicon glyphicon-folder-close" aria-hidden="true"></span> save as</button>

Or you could keep 80% width and set the button as a block-level element with display: block:

.text2 {
  font-size: 15px;
  resize: none;
  background-color: #FFFFFF;
  width: 80%;
  height: 300px;
  margin: 5px 0 10px 0;
}

#btn1 {
  margin-top: 5px;
  margin-bottom: 10px;
  display: block;
}
<textarea id="input1" class="text2" type="text" placeholder="Please enter your writing..." onpropertychange="cop()" oninput="cop()"></textarea>
<button onclick="saveText()" type="button" class="btn btn-primary" id="btn1"><span class="glyphicon glyphicon-folder-close" aria-hidden="true"></span> save as</button>

Hope this helps!

Obsidian Age
  • 41,205
  • 10
  • 48
  • 71
0

There are multiple way to do that. The basic idea is to make your text area DOM occupy the entire row. Depends on your need, you can either mark text area as display: block, or using flex-column.

Using display: block

.text2
{
    font-size:15px;
    resize:none;
    background-color:#FFFFFF;
    width:80%;
    height:300px;
    margin: 5px 0 10px 0;

    /* add this line to make this element occupy the entire line */
    display: block;
}

#btn1
{
    margin-top: 5px;
    margin-bottom: 10px;
}
<textarea id="input1"   class="text2" type="text" placeholder="Please enter your writing..." onpropertychange="cop()" oninput="cop()"></textarea>
<button onclick="saveText()" type="button" class="btn btn-primary" id="btn1"><span class="glyphicon glyphicon-folder-close" aria-hidden="true"></span> save as</button>

Using flex

/* wrap child element in flex with column direction works too */
.wrapper {
    display: flex;
    flex-direction: column;
}

.text2
{
    font-size:15px;
    resize:none;
    background-color:#FFFFFF;
    width:80%;
    height:300px;
    margin: 5px 0 10px 0;
}

#btn1
{
    margin-top: 5px;
    margin-bottom: 10px;
}
<div class="wrapper">
    <textarea id="input1"   class="text2" type="text" placeholder="Please enter your writing..." onpropertychange="cop()" oninput="cop()"></textarea>
    <button onclick="saveText()" type="button" class="btn btn-primary" id="btn1"><span class="glyphicon glyphicon-folder-close" aria-hidden="true"></span> save as</button>
</div>
ddio
  • 26
  • 3