navbar-item width

[JoshClose]

This is about the Bulma Docs
I'm using Bulma version [0.5.3]
My browser is: Chrome 61.0.3163.100

This is a question. I can't find the answer, so sorry if it's out there and I missed it.

I put a search input in the navbar-start. It's only taking up a small portion of the start. Is there a way to have it be longer or even take up the rest of the navbar-start area? I don't want to put a hard width as I want it to adjust on mobile view.

<div className="navbar-start">
	<div className="navbar-item">
		<form onSubmit={this.handleSearchSubmit}>
			<div className="field has-addons">
				<div className="control">
					<input className="input" type="text" placeholder="Search..." value={searchQuery}
						onChange={e => this.setState({ searchQuery: e.currentTarget.value })} />
				</div>
				<div className="control">
					<button className="button" type="submit">
						<span className="icon">
							<i className="fa fa-search"></i>
						</span>
					</button>
				</div>
			</div>
		</form>
	</div>
</div>

[jgthms]

Have you tried flex-grow: 1 or width: 100%?

[JoshClose]

Looks like a combination of those on a few elements will do it. I take it there's no built in classes for doing full width on a navbar-item then?

[jgthms]

No but feel free to make a PR. I believe this could help other people as well. Something like is-expanded.

[osirismqz]

I was wondering exactly the same thing to get an expanded search form inside the navbar.

I ended up applying flex-grow: 1 to navbar-start navbar-item and the form element and also using is-expanded on the input.

It would be nice to have a built in class to do this :)

[doatech]

Made a pull request for this issue.

[jgthms]

Merged!

[JoshClose]

Awesome! Thanks @doatech I've too busy with work and other side projects to attempt this myself.