I have got the following search input box within a navbar.
The thing that confuses me is that the appended search icon looks as if its bigger then the input search field. This seems to be due the "inline" shadow used within the search box.
How can make the icon look better without having to remove the shadow?
<nav>
<!-- removed -->
<!-- Right side items -->
<form class="navbar-nav form-inline flex-column flex-sm-row" style="flex-basis: 350px;">
<div class="input-group flex-sm-fill">
<input class="form-control" id="search-box" type="search" placeholder="Search">
<div class="input-group-append">
<span class="input-group-text"><i class="fa fa-search" aria-hidden="true"></i></span>
</div>
<div class="card shadow px-4 border-top-0" id="result-box" style="display: none; position: absolute; top: 46px;">
<ul class="list-unstyled" id="search-result"></ul>
</div>
</div>
</form>
</div>
</nav>
Related
I'm looking for a way to have a text input and two buttons next two each other, with the buttons taking as much horizontal space as they need and the input taking the remaining space. I'd also like to have small margins between the elements and I' prefer to achieve this using Bootstrap 4 classes.
I hoped I could use three col-auto divs, but this way the input gets a fixed with of about 150px:
<!-- Input. This should be as wide as possible. -->
<div class='col-auto'>
<input class='form-control'
type='text'>
</div>
<!-- 1st button -->
<div class='col-auto'>
<button class='btn btn-primary'>
DO that
</button>
</div>
<!-- 2nd button -->
<div class='col-auto'>
<button class='btn btn-primary'>
Do that
</button>
</div>
Is there an elegant way to achieve what I want?
First, make sure you are using the lastest Bootstrap CSS CDN Link:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
Next, here is the code, try this out:
<div class="container-fluid">
<!-- 1st button -->
<div class="row">
<div class='col-auto'>
<button class='btn btn-primary'>Do This</button>
</div>
<!-- 2nd button -->
<div class='col-auto'>
<button class='btn btn-primary'>Do This</button>
</div>
<!-- Input. This should be as wide as possible. -->
<div class='col w-100'>
<input class='form-control' type='text'>
</div>
</div>
</div>
In summary, use container-fluid, and then row, then use col-auto on the buttons, and col and w-100 on the input.
U can make a Bootstrap grid with a single row and 3 columns, two of the same size and one with a larger size.
I make this example code, try it out
<div class="row">
<div class="col-sm-6" >
<input class='form-control'
type='text' >
</div>
<div class="col-sm-3" >
<button class='btn btn-primary' style="width: 100%;">
DO that
</button>
</div>
<div class="col-sm-3">
<button class='btn btn-primary' style="width: 100%;">
DO that
</button>
</div>
</div>
I'm making a very simple form for an Electron app I am making to experiment with the software, however, I am stuck on the most basic of things... the interface design.
I'm using Bootstrap 4 for my interface and am trying to centre the form vertically, however, I am getting mix results using various suggestions made on other's questions on the same topic. They either do not work or squeeze all my content onto a single line and generally mess the current layout up.
Any suggestions on how I can vertically align the items in the container below?
<!-- Search Field -->
<div class="container">
<div class="row justify-content-center">
<div class="col-sm-auto">
<h1 class="text-white">Shorten M' URL!</h1>
</div>
</div>
<div class="row justify-content-center">
<div class="col-sm-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Enter URL...">
<span class="input-group-btn">
<button class="btn btn-primary" type="button">Shorten!</button>
</span>
</div>
</div>
</div>
</div>
Are you looking for this?:
.vh-100 {
height: 100vh;
}
<div class="container vh-100 bg-dark">
<div class="row vh-100 justify-content-center align-items-center">
<div class="col-6 text-center">
<h1 class="text-white">Shorten M' URL!</h1>
<br>
<div class="input-group">
<input type="text" class="form-control" placeholder="Enter URL...">
<span class="input-group-btn">
<button class="btn btn-primary" type="button">Shorten!</button>
</span>
</div>
</div>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
Basically you have to have the container to fit the screen height. Once there, you can align it's items vertically.
I have a fixed top menu with an image on the left, an input to it's right and another input on the far right. I want the center input to stretch to fill all remaining space between the image and the other input.
Normally in semantic-ui I'd consider a fluid input, but that doesn't seem to work at all inside a semantic-ui menu. When 'fluid' is applied the input becomes smaller.
How can I get the center input to stretch to full-width between the other two? Is there a way to do this with just semantic-ui?
<div class="ui fixed borderless menu">
<div class="header">
<a href="/" class="">
<img src="logo.png">
</a>
</div>
<div class="item">
<div class="ui left icon input">
<i class="search icon"></i>
<input type="text" placeholder="search">
</div>
</div>
<div class="right item">
<div class="ui left icon input">
<i class="map outline icon"></i>
<input type="text" placeholder="location">
</div>
</div>
</div>
You can set flex-grow to 1 for the item's css style.
<div class="category search item" style="flex-grow:1;">
<div class="ui icon input">
<input class="prompt" placeholder="Search..." type="text">
<i class="search link icon"></i>
</div>
<div class="results"></div>
</div>
Tested and Work with Semantic UI 2.2.13
Set the display property of the elements to display: inline-block.
Set the width properties for the elements to relative values, i.e. use percents instead of pixels.
Set the values of the width properties for the elements so that they add up to 100%.
Remove any extra margins and/or padding from the page.
* {
margin: 0;
padding: 0;
}
I'm using Bootstrap 3.3.7 and am having difficulty getting the search box and button to drop underneath the heading text when viewed on small screen.
I'd like to get it to stack as follows:
Large screen (as it is currently):
[Title] [search input] [submit button]
Smaller screen:
[Title]
[search input] [submit button]
Small screen:
[Title]
[search input]
[submit button]
Any help much appreciated. I've been at this for ages and my CSS skills are too lacking for me to make any decent headway. Thanks.
Large screen:
Smaller screen (button gets cut off):
Small screen:
Here's my code:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<!-- all the navigation stuff -->
</div>
</nav>
<!-- main content -->
<div class="container" role="main">
<div class="page-header">
<form action="" method="GET" class="form-inline pull-right">
<div class="form-group form-group-lg has-feedback">
<label class="sr-only" for="search">Search</label>
<input type="text" class="form-control" name="q" id="search" placeholder="Search">
<span class="glyphicons glyphicons-xl glyphicons-group form-control-feedback"></span>
</div>
<button type="submit" class="btn btn-lg btn-success">
<span class="glyphicons glyphicons-search" aria-hidden="true"></span>Search
</button>
</form>
<h2>Quite Long Header Text</h2>
</div>
<!--rest of page content -->
</div>
update
Thank you # Robert C. This is how things look with your suggestion:
and
and
The button has reduced in size which is great, but the input field now spans the entire width. I think it would all work just fine if the small button and input field were in the same row. This would mean that even on small devices I'd only need two stacks.
Could you suggest how I might go about reducing the size of the input box so that it will allow the button to stick to its left side on the same 'row'?
Thanks a lot
You will need to add some wrappers to make sure everything is lined up (or, alternatively remove the padding on your <h2>) but something along the following should provide you a Bootstrap Grid solution:
<div class="container" role="main">
<div class="row">
<div class="col-md-8 col-sm-8 col-xs-12">
<h2>Quite Long Header Text</h2>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<form action="" method="GET" class="form-main">
<div class="col-md-10 col-sm-10 col-xs-12">
<label class="sr-only" for="search">Search</label>
<div class="input-group">
<input type="text" class="form-control input-search" name="q" id="search" placeholder="Search">
<span class="input-group-addon group-icon"><span class="glyphicon glyphicon-user"></span>
</div>
</div>
<div class="col-md-2 col-sm-2 col-xs-12">
<button type="submit" class="btn btn-success">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span><span class="hidden-sm hidden-xs"> Search </span>
</button>
</div>
</div>
</div>
</div>
You can see a Bootply fiddle here: http://www.bootply.com/bhvdBwcX4b
To view the Bootply fiddle on smaller screens be sure to click the mobile icon, as simply resizing your browser will result in a rendering error warning.
Of the top of my head you need to use col and rows to work it out. Here is the col part...
<!-- main content -->
<div class="col-lg-6 col-md-6 col-sml-12">
<h2>Quite Long Header Text</h2>
</div>
<div class="col-lg-6 col-md-6 col-sml-12">
<form action="" method="GET" class="form-inline">
<div class="form-group form-group-lg has-feedback">
<label class="sr-only" for="search">Search</label>
<input type="text" class="form-control" name="q" id="search" placeholder="Search">
<span class="glyphicons glyphicons-xl glyphicons-group form-control-feedback"></span>
</div>
<button type="submit" class="btn btn-lg btn-success">
<span class="glyphicons glyphicons-search" aria-hidden="true"></span>Search
</button>
</form>
</div>
I have restructured my previous solution for your problem. Have a look at the example here CODEPEN.
Hope it will be helpful to you
HTML:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<!-- all the navigation stuff -->
</div>
</nav>
<!-- main content -->
<div class="section-main">
<div class="container" role="main">
<div class="row">
<div class="col-xs-12 col-md-6">
<h2>Quite Long Header Text</h2>
</div>
<div class="col-xs-12 col-md-6">
<form action="" method="GET" class="form-main form-inline nofloat-xs pull-right pull-left-sm">
<div class="form-group form-input-fields form-group-lg has-feedback">
<label class="sr-only" for="search">Search</label>
<div class="input-group">
<input type="text" class="form-control input-search" name="q" id="search" placeholder="Search">
<span class="input-group-addon group-icon"> <span class="glyphicon glyphicon-user"></span>
</span>
</div>
<button type="submit" class="btn btn-lg btn-success btn-submit">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span> Search
</button>
</div>
</form>
</div>
</div>
<!--rest of page content -->
</div>
</div>
CSS:
.form-main {
margin-top: 15px;
}
.form-input-fields {
margin-bottom: 0;
}
.section-main {
margin-top:40px;
background-color: lightgrey;
padding: 20px 0;
}
.group-icon {
background-color:#fff;
border:0;
}
.input-search {
border:1px solid #fff;
box-shadow:none;
}
#media (max-width: 992px) {
.pull-left-sm {
float: left !important;
}
}
#media (max-width: 767px) {
.nofloat-xs {
float: none !important;
}
.btn-submit {
margin-top:10px;
}
}
enjoy :)
I would like to open the dropdown to the left of the link opening the dropdown, so it is visible on tiny screens like iPhone has. Is there some standard way to do it?
Here is my dropdown definition - it would be nice to get some setting(class) telling the dropdown to align right, not left side with the link.
<div class="four wide mobile three wide computer column">
<div class="ui compact dropdown doNotClose">
<i class="dropdown icon"></i>
<span class="ui tiny header">Filters</span>
<div class="menu">
<div class="item">
<div class="ui toggle checkbox">
<input type="checkbox" checked>
<label>Acknowledge</label>
</div>
</div>
<div class="item">
<div class="ui toggle checkbox">
<input type="checkbox" checked>
<label>Active</label>
</div>
</div>
</div>
</div>
</div>
It is possible to do it by adding pointing class to the dropdown.
You can find a JSFiddle example here: http://jsfiddle.net/ypvpajrL/
Source: https://github.com/Semantic-Org/Semantic-UI/issues/3645
Add this style next to menu class
style="right: 0;left: auto;"
example;
<div class="ui simple dropdown icon button" style="margin:0;">
<i class="calendar icon"></i>
Date
<div class="menu" style="right: 0;left: auto;">
<a class="ui item">Today</a>
<a class="ui item">Yesterday</a>
</div>
</div>