How to Make an Input Field Grow/Shrink as you Type

Mohammed Boudad — Sat, 30 May 2020 22:59:44 +0000

If you have worked with CSS a lot you may have noticed that input fields do not behave like other HTML elements when it comes to making an input field fit the content within it. In this article I'm going to show you a simple trick to make an input field grow and shrink as you type with some little CSS and JavaScript.

For the markup we're going to need an input and a span.



<input type="text">
<span></span>

Now let's apply some styles to our content.



input[type="text"],
span {
    font-family:  'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 1.75rem;
    border: 2px solid #666;
    /* box-sizing: border-box; */
    /* padding: 0.5em 1em; */
}

input[type="text"] {
    width: 6em;
    padding: 0.5em 1em;

    color: #555;
    border-radius: 2em;
    outline: 0;
}

input[type="text"]:focus {
    border-color: #ff7996;
}

span {
    position: absolute;
    left: -9999px;
    display: inline-block;
    min-width: 6em;
}

There's one thing to note here. Borders and font properties applied to the input field need to be applied to the span as well, the padding also needs to be applied to both the span and the input if we set the box-sizing to border-box, you'll know why when we move to JavaScript. Notice that I set a min-width to the span and width to the input field this is just to have a predefined width for our input field so that the it doesn't shrink below that width. Other styles are there just to hide the span and make the input field look pretty.

Now let's move to the actual trick.



const input = document.querySelector('input');
const span = document.querySelector('span');

input.addEventListener('input', function (event) {
    span.innerHTML = this.value.replace(/\s/g, '&nbsp;');
    this.style.width = span.offsetWidth + 'px';
});

In the code above we simply listen to input events on our text input then we replace the content of the span with the content in the input. Notice that we also replace the spaces on this.value by &nbsp due to the fact that in HTML multiple spaces will only be rendered as a single space. After that we apply the width of the span to the input field.

This is how it would look like:

I hope this article was helpful.
Any questions or additions? Leave a comment below.

How to Use Fzf with Ripgrep to Selectively Ignore VCS Files

Mohammed Boudad — Sun, 03 Nov 2019 11:28:43 +0000

As developers, most of the time we want to make sure not to commit some directories (e.g: node_modules) and files (e.g: .env) to a certain repository, so we put them in .gitignore. Now, the problem you may face is when you want to make a quick search for certain files under your working directory using a tool such as fzf you don't want the search result to get cluttered up with files from node_modules which you rarely want to take a look at, but still you want to keep files like .env in the search result and that's what we're going to do using fzf and ripgrep.

Installation

If you have fzf, fzf.vim and ripgrep already installed in your machine then skip to Configuration, otherwise follow the steps below:

To install fzf you can just clone the repository and run the install script:



git clone --depth 1 https://github.com/junegunn/fzf.git ~/.fzf
~/.fzf/install

To install ripgrep use your system's package manager, in my case:



sudo apt-get install ripgrep

Note: the binary name for ripgrep is rg, that means if you want to check if the installation is successful you can just run rg --version (ripgrep won't work).

If you want fzf to work on vim, add the following two lines using vim-plug to your ~/.vimrc:



Plug '~/.fzf'
Plug 'junegunn/fzf.vim'

Configuration

We are going to add some commands to ~/.zshrc (or ~/.bashrc depending on your preferred shell). First add these two lines:



export FZF_DEFAULT_COMMAND='rg --files --hidden --follow --no-ignore-vcs'
export FZF_CTRL_T_COMMAND="$FZF_DEFAULT_COMMAND"

In the lines above we set rg as the source for fzf. We add --files option to print the files that ripgrep would search, followed with:

--hidden: to include hidden files
--follow: to include symbolic links
And finally --no-ingore-vcs to tell it to not ignore version control files

What all these basically do, is tell ripgrep to include all the files in the search.

You can also add some FZF_DEFAULT_OPTS if you like to customize the look of fzf to your preference. These are the options I use:



export FZF_DEFAULT_OPTS='--height 96% --reverse --preview "cat {}"'

In the above command we give fzf some default options:

--height 96%: to make fzf take up 96% of the terminal window
--reverse: to make fzf display in reverse
--preview "cat {}": to get a sneak peak of the selected file's content

Now let's create an alias, which we will give it the name fzfi:



alias fzfi='rg --files --hidden --follow --no-ignore-vcs -g "!{node_modules,.git}" | fzf`
```

In the above command we tell **ripgrep** to exclude `node_modules` and `.git` directories from the search and keep the other files.

Now with this, we made `fzf` command by default search all files in our working directory, and `fzfi` quickly search all the files excluding `node_modules` and `.git` directories, so files which you don't like to commit to your repository, but still like to read or edit such as `.env` are included in the search result.

Using the above alias, you might as well want to quickly search and open a file with **vim**, by adding this alias:

```sh
alias vifi='vim $(fzfi)'
```

This is all regarding making the search from the command line. Now when we want to make a quick search from vim with the same options as the alias `vifi`, we need to create a new command in `~/.vimrc`, and we are going to name it `All`:

```sh
command! -bang -nargs=*  All
  \ call fzf#run(fzf#wrap({'source': 'rg --files --hidden --no-ignore-vcs --glob "!{node_modules/*,.git/*}"', 'down': '40%', 'options': '--expect=ctrl-t,ctrl-x,ctrl-v --multi --reverse' }))

```

With this we can map our new command in normal mode by adding:

```sh
nnoremap <silent> <leader>o :All<cr>
```

This is how it will look like in **vim**:

![fzf in a horizontal split](https://imgur.com/ZchZ5Um.png)

I hope this article was helpful. Happy coding!

Forem: Mohammed Boudad

How to Make an Input Field Grow/Shrink as you Type

How to Use Fzf with Ripgrep to Selectively Ignore VCS Files

Installation

Configuration