CODEWITHSUNDEEP
javascriptjqueryhtmlcss
lucke111222
lucke111222

Reputation: 47

Position a button next to a text in a created div

When I create an div I want to position my button to the right of the text. It works fine when i just put in some text like "PHP" but when write in a longer word like "Javascript" the button moves down so it is under the text. I have tried using float and display but it does not seem to work. Any ideas on how I can do this?

$(document).ready(() => {
    //You can use IDs here because these elements are unique
    const $addBtn = $("#läggatill");
    const $inputBox = $("#myText");
    const $flexBox = $("#flexbox");

    $addBtn.click(() => {
        //Creating a new box that contains everything we need and saving it to a variable
        //I'm using ES6 template strings to embed the value of $inputBox
        const $box = $(`
        <div class="box">
                <div class="newrect">
                ${$inputBox.val()}
            <button class="hej">X</button></div>
            <div class="dropdown">
                <p class="text" id="text">Add description</p>
            <textarea maxlength="255" class="autoExpand"></textarea>
            </div>
        </div>
        `);
        //Adding event listeneres for the box elements
        $box.find(".hej").click(function () {
            //Removing the parent .box wrapper DIV
            $(this).closest(".box").remove();
        });
        $box.find(".newrect").click(() => {
            const $dropdown = $box.find(".dropdown");
            //If the dropdown is invisible, show it. Otherwise, hide it
            if ($dropdown.css("display") === "none") {
                $box.find(".dropdown").show();
            } else {
                $box.find(".dropdown").hide();
            }
        });

        //Appending the box to the flexBox
        $box.appendTo($flexBox);
    });
});

// Expands all textareas with the class autoExpand
$(document)
    .one('focus.autoExpand', 'textarea.autoExpand', function(){
        var savedValue = this.value;
        this.value = '';
        this.baseScrollHeight = this.scrollHeight;
        this.value = savedValue;
    })
    .on('input.autoExpand', 'textarea.autoExpand', function(){
        var minRows = this.getAttribute('data-min-rows')|0, rows;
        this.rows = minRows;
        rows = Math.ceil((this.scrollHeight - this.baseScrollHeight) / 16);
        this.rows = minRows + rows;
    });
/* Start of lägga till kompetens */
  
.newrect {
    min-width: 105px;
    max-width: 220px;
    margin-top: 1%;
    margin-right: 1%;
    margin-left: 1%;
    margin-bottom: 0%;
    padding: 5px 10px 5px 10px;
    border: 1px solid green;
    border-radius: 40px;
    text-align: center;
    background-color: white;
    z-index: 2;
    cursor: pointer;
  }
  
  .flexbox{
    display: flex;
    flex-direction: row;
  }

  .box {
    z-index: 1;
  }
  
  .skriv {
    border-radius: 40px 40px 40px 40px;
    outline: none;
    padding: 0 2%;
    width: 51%; 
    margin: 2%;
  }
  
  .läggatill {
    border: 1px solid black;
    background-color: white;
    border-radius: 5px 5px 5px 5px;
    outline: none;
    margin: 2% 5%;
    width: 23%;
    max-width: 200px;
    float: right;
  }
  
  .dropdown {
    display: none; 
    background-color: darkgrey;
    height: 400px;
    margin-top: -20%;
    margin-right: 0%;
    margin-left: 1.5%;
    margin-bottom: 0%;
    z-index: -1;
    padding-top: 10%;
    width: 97%;
  }
  .dropdown textarea{
    width: 90%;
  }
  
  
  .show { 
    display: block; 
  } 
  
  .hej {
    position: relative;
    border: none;
    background-color: transparent;
    color: darkblue;
  }
  
  .autoExpand {
    margin-top: 0%;
    margin-right: 0%;
    margin-left: 5%;
    margin-bottom: 0%;
    z-index: 2;
    display: block;
    overflow: hidden;
    padding: 10px;
    font-size: 14px;
    border-radius: 6px;
    border: 0;
    resize: none;
  }
  
  .text {
    text-align: center;
    margin-top: 30%;
    cursor: default;
  }
  
  /* End of lägga till kompetens */
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/test.css"> <!-- Länk till CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <!-- Bootstrap -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
  
</head>
<body>
    
<!-- Start of lägga till kompetenser function -->
<div class="col-md-12">  
  <div class="reform">

      <input id="myText" maxlength="25" type="text" class="skriv" name="Kompetenser" autocomplete="off" autofocus> <!-- Textfield for kompetenser -->
     
      <input id="läggatill" class="läggatill" type="button" value="Add box"> <!-- Button lägga till --> 
 
  </div>  
</div>
      <div class="flexbox" id="flexbox"></div> <!-- Container for the boxes -->

Upvotes: 2

Views: 69

Answers (2)

EmreKalafat
EmreKalafat

Reputation: 106

I think it's gonna work for you

$(document).ready(() => {
    //You can use IDs here because these elements are unique
    const $addBtn = $("#läggatill");
    const $inputBox = $("#myText");
    const $flexBox = $("#flexbox");

    $addBtn.click(() => {
        //Creating a new box that contains everything we need and saving it to a variable
        //I'm using ES6 template strings to embed the value of $inputBox
        const $box = $(`
        <div class="box">
                <div class="newrect">
                <span class="inputText">${$inputBox.val()}</span>
            <button class="hej">X</button></div>
            <div class="dropdown">
                <p class="text" id="text">Add description</p>
            <textarea maxlength="255" class="autoExpand"></textarea>
            </div>
        </div>
        `);
        //Adding event listeneres for the box elements
        $box.find(".hej").click(function () {
            //Removing the parent .box wrapper DIV
            $(this).closest(".box").remove();
        });
        $box.find(".newrect").click(() => {
            const $dropdown = $box.find(".dropdown");
            //If the dropdown is invisible, show it. Otherwise, hide it
            if ($dropdown.css("display") === "none") {
                $box.find(".dropdown").show();
            } else {
                $box.find(".dropdown").hide();
            }
        });

        //Appending the box to the flexBox
        $box.appendTo($flexBox);
        $inputBox.val('');
    });
});

// Expands all textareas with the class autoExpand
$(document)
    .one('focus.autoExpand', 'textarea.autoExpand', function(){
        var savedValue = this.value;
        this.value = '';
        this.baseScrollHeight = this.scrollHeight;
        this.value = savedValue;
    })
    .on('input.autoExpand', 'textarea.autoExpand', function(){
        var minRows = this.getAttribute('data-min-rows')|0, rows;
        this.rows = minRows;
        rows = Math.ceil((this.scrollHeight - this.baseScrollHeight) / 16);
        this.rows = minRows + rows;
    });
.newrect {
    /* min-width: 105px; */
    /* max-width: 220px; */
    margin-top: 1%;
    margin-right: 1%;
    margin-left: 1%;
    margin-bottom: 0%;
    padding: 5px 10px 5px 10px;
    border: 1px solid green;
    border-radius: 40px;
    text-align: center;
    background-color: white;
    z-index: 2;
    cursor: pointer;
    display: inline-block;
    text-overflow:ellipsis;
    white-space:nowrap;
    line-height: 100%;
  }
  
  .flexbox{
    display: flex;
    flex-direction: row;
  }

  .box {
    z-index: 1;
  }
  
  .skriv {
    border-radius: 40px 40px 40px 40px;
    outline: none;
    padding: 0 2%;
    width: 51%; 
    margin: 2%;
  }
  
  .läggatill {
    border: 1px solid black;
    background-color: white;
    border-radius: 5px 5px 5px 5px;
    outline: none;
    margin: 2% 5%;
    width: 23%;
    max-width: 200px;
    float: right;
  }
  
  .dropdown {
    display: none; 
    background-color: darkgrey;
    height: 400px;
    margin-top: -20%;
    margin-right: 0%;
    margin-left: 1.5%;
    margin-bottom: 0%;
    z-index: -1;
    padding-top: 10%;
    width: 97%;
  }
  .dropdown textarea{
    width: 90%;
  }
  
  
  .show { 
    display: block; 
  } 
  
  .hej {
    position: relative;
    border: none;
    background-color: transparent;
    color: darkblue;
  }
  
  .autoExpand {
    margin-top: 0%;
    margin-right: 0%;
    margin-left: 5%;
    margin-bottom: 0%;
    z-index: 2;
    display: block;
    overflow: hidden;
    padding: 10px;
    font-size: 14px;
    border-radius: 6px;
    border: 0;
    resize: none;
  }
  
  .text {
    text-align: center;
    margin-top: 30%;
    cursor: default;
  }
  
  /* End of lägga till kompetens */
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/test.css"> <!-- Länk till CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <!-- Bootstrap -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
  
</head>
<body>
    
<!-- Start of lägga till kompetenser function -->
<div class="col-md-12">  
  <div class="reform">

      <input id="myText" maxlength="25" type="text" class="skriv" name="Kompetenser" autocomplete="off" autofocus> <!-- Textfield for kompetenser -->
     
      <input id="läggatill" class="läggatill" type="button" value="Add box"> <!-- Button lägga till --> 
 
  </div>  
</div>
      <div class="flexbox" id="flexbox"></div> <!-- Container for the boxes --> 
      
      </body>
      </html>

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

The issue is due to the max-width you set in CSS on .newrect causing the content to overflow. Similarly, the margin-left and margin-right encroached in to the content so .hej occasionally overflowed due to that too.

To fix this, remove max-width from .newrect (or make it much bigger) and use padding to set the horizontal gutters for the content within the .newrect instead:

.newrect {
  min-width: 105px;
  padding; 0 5px 0 15px;
  /* other rules ... */
}


$(document).ready(() => {
  //You can use IDs here because these elements are unique
  const $addBtn = $("#läggatill");
  const $inputBox = $("#myText");
  const $flexBox = $("#flexbox");

  $addBtn.click(() => {
    //Creating a new box that contains everything we need and saving it to a variable
    //I'm using ES6 template strings to embed the value of $inputBox
    const $box = $(`
        <div class="box">
                <div class="newrect">
                ${$inputBox.val()}
            <button class="hej">X</button></div>
            <div class="dropdown">
                <p class="text" id="text">Add description</p>
            <textarea maxlength="255" class="autoExpand"></textarea>
            </div>
        </div>
        `);
    //Adding event listeneres for the box elements
    $box.find(".hej").click(function() {
      //Removing the parent .box wrapper DIV
      $(this).closest(".box").remove();
    });
    $box.find(".newrect").click(() => {
      const $dropdown = $box.find(".dropdown");
      //If the dropdown is invisible, show it. Otherwise, hide it
      if ($dropdown.css("display") === "none") {
        $box.find(".dropdown").show();
      } else {
        $box.find(".dropdown").hide();
      }
    });

    //Appending the box to the flexBox
    $box.appendTo($flexBox);
  });
});

// Expands all textareas with the class autoExpand
$(document)
  .one('focus.autoExpand', 'textarea.autoExpand', function() {
    var savedValue = this.value;
    this.value = '';
    this.baseScrollHeight = this.scrollHeight;
    this.value = savedValue;
  })
  .on('input.autoExpand', 'textarea.autoExpand', function() {
    var minRows = this.getAttribute('data-min-rows') | 0,
      rows;
    this.rows = minRows;
    rows = Math.ceil((this.scrollHeight - this.baseScrollHeight) / 16);
    this.rows = minRows + rows;
  });
/* Start of lägga till kompetens */

.newrect {
  min-width: 105px;
  margin-top: 1%;
  padding; 0 5px 0 15px;
  margin-bottom: 0%;
  padding: 5px 10px 5px 10px;
  border: 1px solid green;
  border-radius: 40px;
  text-align: center;
  background-color: white;
  z-index: 2;
  cursor: pointer;
}

.flexbox {
  display: flex;
  flex-direction: row;
}

.box {
  z-index: 1;
}

.skriv {
  border-radius: 40px 40px 40px 40px;
  outline: none;
  padding: 0 2%;
  width: 51%;
  margin: 2%;
}

.läggatill {
  border: 1px solid black;
  background-color: white;
  border-radius: 5px 5px 5px 5px;
  outline: none;
  margin: 2% 5%;
  width: 23%;
  max-width: 200px;
  float: right;
}

.dropdown {
  display: none;
  background-color: darkgrey;
  height: 400px;
  margin-top: -20%;
  margin-right: 0%;
  margin-left: 1.5%;
  margin-bottom: 0%;
  z-index: -1;
  padding-top: 10%;
  width: 97%;
}

.dropdown textarea {
  width: 90%;
}

.show {
  display: block;
}

.hej {
  position: relative;
  border: none;
  background-color: transparent;
  color: darkblue;
}

.autoExpand {
  margin-top: 0%;
  margin-right: 0%;
  margin-left: 5%;
  margin-bottom: 0%;
  z-index: 2;
  display: block;
  overflow: hidden;
  padding: 10px;
  font-size: 14px;
  border-radius: 6px;
  border: 0;
  resize: none;
}

.text {
  text-align: center;
  margin-top: 30%;
  cursor: default;
}


/* End of lägga till kompetens */
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="css/test.css">
  <!-- Länk till CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <!-- Bootstrap -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

</head>

<body>

  <!-- Start of lägga till kompetenser function -->
  <div class="col-md-12">
    <div class="reform">

      <input id="myText" maxlength="25" type="text" class="skriv" name="Kompetenser" autocomplete="off" autofocus>
      <!-- Textfield for kompetenser -->

      <input id="läggatill" class="läggatill" type="button" value="Add box">
      <!-- Button lägga till -->

    </div>
  </div>
  <div class="flexbox" id="flexbox"></div>
  <!-- Container for the boxes -->

Upvotes: 2

Related Questions