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 do I get text in my html page to display features using the css stylesheet?

    How to center a child element in CSS, even if it is larger than the parent?

    How do I get an infinite vertically scrolling image in CSS?

    How to call a javascript function with a css button? [closed]

    How did he get the sidebar to remain on the left, even as the right side of the page can scroll?

    How to make infinite movement of a div?

    How can I make buttons flash different background colors when clicked/

    How to include materialize-css npm package with webpack

    How to transform xPath to CSS Selector

    two divs in one div with img in each two, how to autoresize but keep row formation?

    How to add event handlers to DIVS with CSS classes containing a particular string?

    How to remove Clear:Both in CSS

    How to change css using jquery in a php loop

    How to make a navigation bar have equal spacing?

    How to I create two containers with different backgrounds? [duplicate]

    navigation drop-down menu in wrapper not showing second level

    How can I remove vertical padding from ionic icon?

    how to have the text under the logo css

    How to isolate PrimeFaces Widget from being affected by main site CSS

    How can I overlay an image in a fluid layout (zurb foundation)

    CSS How to use margins with different divs

    How to CSS select each first div without class after div with class?

    How do I create a mobile version of Nav Bar [closed]

    How to design aggregations filter in css for week, month?

    How can i select the div from CSS?

    Show some characters above a picture on hover

    CSS Background Color Not Showing

    How to make information appear only when hovered over using jquery and css?

    How to dynamically change a class css styling?

    How to make my twitter bootstrap overlap all other elements?