How can I have both my search box and badge horizontally in single row in the navbar ? I'm using materialize CSS
<nav class="orange" role="navigation">
<div class="nav-wrapper container">
<a id="logo-container" href="/" class="brand-logo white-text">C.U.P.S</a>
<ul class="right">
<a class="waves-effect waves-light btn-small indigo" href="cart"> <i class="material-icons left">add_shopping_cart</i> Cart <span class="badge white-text" data-badge-caption={{ count((array) session('cart')) }}></span></a>
<form class="col s12">
<div class="inline">
<div class="input-field col s6">
<input id="search" type="text" class="validate" placeholder="Search...">
</div>
<div class="input-field col s6">
<button class="waves-effect waves-light btn-small indigo" type="submit" name="action">Search</button>
</div>
</div>
</form>
</ul>
</div>
</nav>
If you upload your problem into a CodePen, it is easier for people to try out your code, adapt it and help you. It doesn't take long, I added your stuff in around 5 minutes, with taking care of scripts and links, but it will be a great help for people who want to help you solve your problem.
So, some general stuff about the materialize grid:
To make text fields inline, you need to add the inline class to the input-field-div (can be found in the examples of Materialize Text Inputs). Adding an enclosing div does not work
Columns only work with an enclosing row, which the <form> does not have. This is also part of your problem, more down below
The grid is based on 12 columns. So the form with col s12 will take up the complete row
If you want to split the form 50:50, you need to put the form in their own container. If not, the col will assume, that it is referencing the container around the whole navbar (more about Grids in Materialize
An unordered list (ul-tags) should always have list-items (li-tags) for each individual part of the unordered list
So, regarding your problem: Add list items to your unordered list, one for the badge, one for the search form. Then, you also need to add a div with the row-class to your form, as well as a container for the elements to get back into a local context. Add the inline-class to the right element, and you are good to go. Here's a CodePen with a working example. Hope it helps and you understand why it didn't work before!
edit: update codepen link
Try by this way
<nav class="orange" role="navigation">
<div class="nav-wrapper container">
<a id="logo-container" href="/" class="brand-logo white-text">C.U.P.S</a>
<ul class="right">
<a class="waves-effect waves-light btn-small indigo" href="cart"> <i class="material-icons left">add_shopping_cart</i> Cart <span class="badge white-text" data-badge-caption={{ count((array) session('cart')) }}></span></a>
<form class="col s12">
<div class="row">
<div class="input-field col s6">
<input id="search" type="text" class="validate" placeholder="Search...">
</div>
<div class="input-field col s6">
<button class="waves-effect waves-light btn-small indigo" type="submit" name="action">Search</button>
</div>
</div>
</form>
</ul>
</div>
</nav>
Add row class instead of inline
Related
I'm following this documentation cause I would like to create a
Gmail like 'search bar' where beside the input there's a dropdown button that opens a dropdown with filter options.
Unfortunately in the docs the examples don't cover the input + dropdown button scenario.
I started with this:
<!-- Search bar-->
<div class="input-group mb-3">
<input type="text" class="form-control">
<div class="input-group-append" ngbDropdown role="group" aria-label="Button group with nested dropdown">
<button class="btn btn-outline-success" ngbDropdownToggle></button>
<div class="dropdown-menu" ngbDropdownMenu>
<button class="dropdown-item">One</button>
<button class="dropdown-item">Two</button>
</div>
</div>
</div>
Everything is shown correctly, but the dropdown is not. It is opened under its parent (the button), while I'd like to have it for the whole length of the input. Pretty sure it could be solved with some CSS rule.
From the documentation under Manual Triggers, you could attach the dropdown menu to the input group and trigger the open/close with the appended button on click event.
<!-- Search bar-->
<div class="container">
<div class="input-group mb-3" #myDrop="ngbDropdown" ngbDropdown>
<input type="text" class="form-control" >
<div class="input-group-append" role="group" >
<button (click)="$event.stopPropagation(); myDrop.open();" class="btn btn-outline-success" >Hi</button>
</div>
<div class="dropdown-menu" ngbDropdownMenu>
<button class="dropdown-item">One</button>
<button class="dropdown-item">Two</button>
</div>
</div>
</div>
I would like to place Have an account?, Login button, and Link A Link B directly underneath something something something something, Enter Zip Code input field and Enter Zip Code button.
The way I've set up my Bootstrap (version 3.3.7) and HTML, I'd think that it would've appeared underneath but it's actually displaying the complete opposite of what I expect. Instead, it's all the way on the left side as per the picture below.
Why's is carrying out this behavior? If more information is needed please let me know.
picture of what I'm describing
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="col-7">
<form class="pull-right col-12 zipSection">
<h6 class="pull-right">something something something something</h6>
<div class="form-group">
<input type="text" class="form-control" placeholder="Enter Zip Code">
</div>
<button type="submit" class="btn btn-default center-block enterZipCodeButton">Enter Zip Code</button>
</form>
<div class="col-12">
<p class="col-12">Have an account?</p>
<button type="submit" class="loginButton" onclick="document.location = '/'">Login</button>
Link A
Link B
</div>
</div>
</div>
Your form has a class called pull-right (which has been renamed to float-right in Bootstrap 4). What that does is forces the div to the far right. Since this is bootstrap, everything else adapts, which means the div which theoretically should be under, gets forced up to the top row, and to the left (since left-alignment is the default). A solution to that is to use the class of row from the Bootstrap grid system. Every row you want, you make a new div with a class of row. This way, they will now be under each other.
However, the Have an account? would still be on the left. To fix that, give it a class of pull-right.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-7">
<form class="pull-right col-12 zipSection">
<h6 class="pull-right">something something something something</h6>
<div class="form-group">
<input type="text" class="form-control" placeholder="Enter Zip Code">
</div>
<button type="submit" class="btn btn-default center-block enterZipCodeButton">Enter Zip Code</button>
</form>
</div>
</div>
<div class="row">
<div class="col-12 pull-right">
<p class="col-12">Have an account?</p>
<button type="submit" class="loginButton" onclick="document.location = '/'">Login</button>
Link A
Link B
</div>
</div>
</div>
I am dynamically printing bootstrap columns divs as follows using angular2
[col-md-6][col-md-12][col-md-6][col-md-12][col-md-6][col-md-12][col-md-6][col-md-12]
but the actual grid is appearing as
[col-md-6]
[col-md-12]
[col-md-6]
[col-md-12]
[col-md-6]
[col-md-12]
[col-md-6]
[col-md-12]
I want to arrange columns like
[col-md-6][col-md-6]
[col-md-12]
[col-md-12]
[col-md-6][col-md-6]
[col-md-12]
[col-md-12]
Here is the code
<div class="row">
<span *ngFor="let serviceItem of dashboardServicesList">
<div class="col-md-6 {{serviceItem.service}}-service">
<div class="service">
<a *ngIf="serviceItem.categoryHashmap" (click)="showSegments($event,serviceItem.service)">
<span class="service-title">{{serviceItem.displayName}}</span>
<i class="fa {{serviceItem.chevron}}" aria-hidden="true"></i>
</a>
</div>
</div>
<div *ngIf="serviceItem.categoryHashmap" class="col-md-12 segments {{serviceItem.is_active}} {{serviceItem.service}}">
<ul class="segments-boxes">
<li *ngFor="let item of serviceItem.serviceSegments">
<a target="_blank" href="{{item.url}}">{{item.displayName}}</a>
</li>
</ul>
</div>
</span>
</div>
How to arrange this ? thank you.
The reason why this is happening is because of the sequence you're using.
col-md-6 + col-md-12 = col-md-18
This won't fit on one row and thats why it isn't working.
Fix your sequence and add row's to it, output as example below:
[row][col-md-6][col-md-6][row][row][col-md-12][row][row][col-md-12][row][row][col-md-6][col-md-6][row][row][col-md-12][row]
Hope this helps!
How do you get elements in ion-footer-bar to line up directly below each other rather than stack up next to each other?
For example, this:
Is produced by the code below:
<ion-footer-bar>
<div>
sdsd
</div>
<div class="button-bar">
<a class="button button-positive">First</a>
<a class="button button-positive">Second</a>
</div>
</ion-footer-bar>
In the example above, I'd like each element to be placed directly under each other, as opposed to next to each other.
The solution is to create another footer as you can see in this tuto : https://www.tutorialspoint.com/ionic/ionic_js_footer.htm
In your exemple, the solution would be :
<ion-footer-bar class="bar-subfooter>
<div>
sdsd
</div>
</ion-footer-bar>
<ion-footer-bar class="bar-subfooter>
<div class="button-bar">
<a class="button button-positive">First</a>
</div>
</ion-footer-bar>
<ion-footer-bar>
<div class="button-bar">
<a class="button button-positive">Second</a>
</div>
</ion-footer-bar>
I'm trying to create a navigation bar which contains an input field. I would like the input field to occupy all available space in the navigation bar.
Following this answer, I successfully created a layout similar to what I want, which contains an "addon" icon to the left of the input field (see code here).
But: I don't want the icon near the input field.
The following code controls the input field:
<form class="navbar-form">
<div class="form-group" style="display:inline;">
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
</span>
<input type="text" class="form-control">
</div>
</div>
</form>
The problem is that removing <span class="input-group-addon">...</span> to get rid of the icon, makes the input field contract to a smaller size and loose the rounded edges (which is less important. see code here).
Of course it doesn't make sense to wrap a single input field in an "input-group". But removing the "input-group" wrapper causes the input field to expand and break into a new line (see code here).
After looking at Bootstrap.css I tried to create a new css class which mimics the relevant code of the input-group class. This brings back the input field inline in the navbar, but still does not make it expand to occupy all available space (see code here).
My question is: How do I get the layout I want without the icon?
Bonus: Why are the "input-group" and the icon making the input field expand?
Required browser compatibility: Chrome, Firefox, IE8+
Well, most folks didn't used have to design with tables, but in 99 when I began, tables created the layouts and we used spacer .gifs and all kinds of crap to design with. When you have a display:table on the container and a display:table-cell on the contents inside it, since the .form-control is empty there has to be something else to force the width of the element to take up the space, or it's going to act like an empty cell. So you have to have an empty span with some padding on it to force it.
http://jsbin.com/aXOZEXi/1 -- Bootstrap 3.0 - 3.1
http://jsbin.com/aXOZEXi/2/edit -- Bootstrap 3.2
.test {
display:table;
}
.test > .form-control {
display: table-cell;
margin-left:-3px;
}
.test > span {
display: table-cell;
width:1%;
padding:0 3px;
}
HTML
<form class="navbar-form">
<div class="form-group" style="display:inline;">
<div class="test">
<span><!--shim--></span>
<input type="text" class="form-control">
</div>
</div>
</form>
Replace with this html: (made changes to glyphicon glyphicon-search and background-color, border of input-group-addon) Made the round edges too :)
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsible">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Some Brand</a>
</div>
<div class="navbar-collapse collapse" id="navbar-collapsible">
<ul class="nav navbar-nav navbar-left">
<li>Link 1</li>
<li>Link 2</li>
</ul>
<div class="navbar-form navbar-right btn-group">
<button type="button" class="btn btn-default">Button 1</button>
<button type="button" class="btn btn-default">Button 2</button>
<button type="button" class="btn btn-default">Button 3</button>
</div>
<form class="navbar-form">
<div class="form-group" style="display:inline;">
<div class="input-group">
<span class="input-group-addon" style="background-color:transparent; border:none"><span class=""></span></span>
<input type="text" class="form-control" style="border-bottom-left-radius: 4px;border-top-left-radius: 4px;">
</div>
</div>
</form>
</div>
</div>
</nav>
</div>
Worked really hard to get to what you require. hope you appreciate :)
This will get you pretty much where you want to be
<div class="form-group" style="display:inline;">
<div class="input-group col-lg-6 col-md-5 col-sm-3 center-block col-xs-12">
<input class="form-control" type="text" placeholder="Search">
</div>
</div>
It will not fill exactly all the space but it will fill most of it and will center the search box so it does not look out of place. Added more dynamic column sizing extra small screen uses a dropdown menu so I re-sized the box to fit the screen. to build a fully responsize page as you are describing you should probably nest everything inside a grid because col-?-? is not a fixed width it is a percentage width based on it's container.