Limit number of lines shown in a textbox, but not limiting the user to write


Tags: html,css

Problem :

I have a case I am not sure how to figure it out.

I am trying to do a design to put a button over a textbox, to make my layout looks nice, but when users start typing information in textbox, it hides behind the button. I know I have 1 of 2 solutions, but I don't know how to do it:

1- either to find another way to do the layout.

2- limit the number of lines for the user to enter, but this way I am going to have a restriction for long data.

Below is my HTML and CSS:

body{
  background: #000;
}
.nl-main{
  width: 300px;
  border: 1px solid white;
  border-radius: 6px;
  padding: 10px;
}

.header{
  padding: 3px;
}
.header span{
  color: white;
}
.nl-txt-main, .nl-btn-main{
  display: inline-block;
}

.nl-btn-main .nl-btn{
  border-radius: 5px;
  background: blue;
  color: white;
  left: -50px;
    position: relative;
}

.nl-txt-main .nl-txt {
  width: 200px;
  border-radius: 5px;
}
  <div class="header">
    <span>Search our database</span>
  </div>
  <div class="nl-controls">
     <div class="nl-txt-main">
       <input type="text" class="nl-txt"/>
    </div>
    <div class="nl-btn-main">
      <input type="button" value="Send" class="nl-btn"/>
    </div>
  </div>

I want the button to be like part of the textbox itself, When you try to run the code, and write a long sentence in the textbox, it will hide under the button. How do I solve it?

Thank you.



Solution :

Remove left:-50px; from you button

body{
  background: #000;
}
.nl-main{
  width: 300px;
  border: 1px solid white;
  border-radius: 6px;
  padding: 10px;
}

.header{
  padding: 3px;
}
.header span{
  color: white;
}
.nl-txt-main, .nl-btn-main{
  display: inline-block;
  margin:0;
}

.nl-btn-main .nl-btn{
  background: blue;
  color: white;
  left: -4px;
  position: relative;
  border-bottom-right-radius: 5px;
  margin:0;
   border-top-right-radius: 5px;
}

.nl-txt-main .nl-txt {
  width: 200px;
   border-bottom-left-radius: 5px;
  margin:0;
   border-top-left-radius: 5px;
}
<div class="header">
    <span>Search our database</span>
  </div>
  <div class="nl-controls">
     <div class="nl-txt-main">
       <input type="text" class="nl-txt"/>
    </div>
    <div class="nl-btn-main">
      <input type="button" value="Send" class="nl-btn"/>
    </div>
  </div>


    CSS Howto..

    How to make two tooltip ids independently close, and remember cookie?

    How can I create DIV “rows” while having a DIV float beside them?

    How to make border for UL if Li has style “float:left;”?

    How to place two divs next to each other -HTML/CSS

    How should you comment css? [closed]

    How do I make text-transform:uppercase work properly with Greek?

    How to make corners of progress bar round in css

    How to animate back after click with CSS?

    how to give css only the 1st label span?

    HTML & CSS: Vertical Flow Layout (columnar style), how to implement?

    How to give style (image) for browse button in CSS?

    How to make a sidebar that stretches to the page length?

    How to compile or convert sass / scss to css with node-sass (no Ruby)?

    How to vertically align a list on one item, with HTML/CSS/JavaScript?

    How to add specific CSS attributes to all text-containing elements

    CSS: How to make background of an element stretch across the entire page?

    How to add padding to the left and right side of grid in Bootstrap WITHOUT padding between grid boxes using col-sm-3

    How to make a dynamic layout only by CSS

    How specify two css classes: from property and conditional class

    How to set border to 0 in this table

    how to keep the aspect ratio of an image in bounding box - CSS

    CSS - how to make the iframe inside the div center aligned and the main div also center?

    HTML - How do I insert a tag into each line of a
     block without hard coding?

    How to change the width of an HTML upload field with CSS?

    How to get this partially diagonal shape from an image in CSS

    how to enlarge an element and show text on clicking

    How to create dynamic responsive four columns with border style?

    How to get the type of the DOM element to fix the CSS Selector

    How to change the background-color of jumbrotron?

    How to find resources(CSS , JS Etc) that are blocking in Chrome