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 can I change my div box to a link?

    jquery ui droppable : how to dropp an element outside a div with overflow:hidden?

    How do I get the background image to not repeat and take up the entire section?

    How do I join my list and div using css?

    HTML5/CSS3 how to force text to require a certain width for rendering

    How to draw lines in ionic

    Rails - how to place text onto an image within a code loop

    How to change font color of select2 control using css

    How to get CSS or XPath locator from a button class

    How to change url of image which is generated dynamically just by using CSS and media queries?

    How to make search bar responsive using CSS

    How do I inline the :before element when unable to include a CSS/style section?

    How to make text in transparent div opaque? [duplicate]

    How to CSS style angular directive?

    How to make html lists horizontal in css?

    How to make the section and aside touch the footer?

    How to prevent CSS transform skew from breaking child element position?

    Pagination: How to display a long text as book pages?

    How to create a folding ribbon heading with inside gradient?

    how to change height of ellipse in radial gradient in css for background property

    How to create DRY CSS when using transform & keyframes

    HTML5 contenteditable div: show placeholder only if div has 1 child

    How can i add a css rule for this code?

    How do you align the vertical center of text to the vertical center of an image?

    How to stretch background image of a table cell with CSS?

    How do i shift the text in twitter bootstrap navbar to center?

    How do I blur an element with scroll, until it's blurred to a certain point?

    Twitter Bootstrap 3 - how to properly replace glypicons with custom made icons?

    How can I trigger a jQuery alert when an iframe AND its CSS is loaded and rendered?

    How do I prevent my menu div element to not overlay the footer div element?