For anyone that knows me, they’ll know that UI and UX is not exactly my strong suit. If I had my way, we’d all just use console applications like this:
>placeorder /productcode coffee /quantity 1
Unfortunately, the trend seems to have gone a different way, and now we have CSS. CSS is a brilliant idea; however, you need to be able to visualise what you want your stuff to look like first.
Anyway, onto this post. If you know anything about CSS or Bootstrap, then you’ve probably already read everything that could interest you about this post!
In my latest project, I have a search box, and I wanted to line up the controls on the screen like this:
Search [Search Text] [Search Button]
I’m using React, so the original code looked like this (more or less):
<label>Search</label>
<input type='text'/>
<SimpleButton buttonAction={props.searchAction} buttonLabel="Search" />
And it rendered like this:
Search [Search Text]
[Search Button]
My first gambit was to define a CSS style (so I can now put “Front End Developer” on my CV):
.rowLine {
display:flex;
flex-direction:row;
}
And I changed the HTML to look like this:
[code lang=“html”]
That worked, and I copied most of it from [here](https://stackoverflow.com/questions/39702130/line-two-divs-side-by-side-with-css-and-react). So now I've updated my CV to "Senior Front End Developer".
It then occurred to me that, as good as this looks, there's probably something in Bootstrap, and if there is, then my web page can look like the rest of the internet. It turns out I was right:
[code lang="html"]
<div className="form-group row">
<label htmlFor="searchText" className="col-sm-2 col-form-label">Search</label>
<div className="col-sm-8">
<input id="searchText" className="form-control" type='text'
placeholder="e.g. Goats" />
</div>
<div className="col-sm-2">
<SimpleButton buttonAction={props.searchAction} buttonLabel="Search" />
</div>
</div>
You may notice that React has its own “for” property, called “htmlFor”.
Disclaimer / Apology
As usual, please take everything you read in my blog with a healthy dose of salt. If you are a front end developer then please take solace in the fact that, despite me being facetious, I really need frameworks like Bootstrap, because I would never think to change the colour of a button, or to align the sizes.
This was all so much simpler in the days of Turbo Pascal / Turbo C, where you would draw your buttons using the ANSI character set!
References
https://stackoverflow.com/questions/39702130/line-two-divs-side-by-side-with-css-and-react
https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-forms.php