I'm trying to implement a right-floated search-box in my navbar, but when I resize the browser-window the search-box jumps down one row. I want it to stay to the right and not jump down one row. How can I do that? This is my navbar-code:
<nav class="navbar navbar-expand-lg navmenu justify-content-between">
<a class="navbar-brand themefont" href="/">Försvarshögskolan</a>
<div class="input-group justify-content-end">
<form name="form" class="form-inline" ng-submit="vm.anonymousSearch()" role="form">
<input type="text" class="form-control" placeholder="Svara anonymt med pin..." name="search" id="search" ng-model="vm.search.input" style="background-color: rgba(255, 255, 255, 0.2); color: lightgrey; border-color: grey;">
<span class="input-group-btn">
<button class="btn btn-outline-secondary anonymous-search" type="submit">Sök</button>
</span>
</form>
</div>
</nav>
Jumping down is caused by responsive collapsing. With class navbar-expand-lg such responsive collapsing happens when your resized browser-window is less than 992px in width (because of the -lg suffix). Change mentioned class to navbar-expand so that your search-box stay always to the right:
<nav class="navbar navbar-expand navmenu justify-content-between">
Related
This is a pretty funky issue.
I'm trying to create an frameless app using electron and bootstrap 4 and wanted to style the app a bit.
After a lot of work, I came by the most odd of issues I have encountered in the entire project.
This is not an electron issue tho (hence the lack of the relevant tag).
You see, I have a header element that is 87px height (to contain the navbar and window controls like maximize and close), with a main element under it that contains the actual content of the page.
<header>
<div class="window-control bg-primary">
<button class="btn btn-primary btn-sm float-right" (click)="exitApp()"><fa-icon [icon]="faTimes"></fa-icon></button>
<button class="btn btn-primary btn-sm float-right" *ngIf="isMaximized" (click)="unmaximizeWindow()"><fa-icon [icon]="faMinusSquare" ></fa-icon></button>
<button class="btn btn-primary btn-sm float-right" *ngIf="!isMaximized" (click)="maximizeWindow()"><fa-icon [icon]="faPlusSquare" ></fa-icon></button>
<button class="btn btn-primary btn-sm float-right" (click)="minimizeWindow()"><fa-icon [icon]="faMinus"></fa-icon></button>
</div>
<nav class="navbar navbar-expand navbar-dark bg-secondary">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<span class="text-primary font-weight-bold">9</span>AnimeDl
</a>
<ul class="nav navbar-nav mr-auto">
<li class="nav-item"><a class="nav-link" href="#">Discover</a></li>
</ul>
<form class="form-inline my-2 my-lg-0 mr-2">
<div class="input-group">
<input class="form-control bg-secondary border-0 text-center" aria-describedby="basic-addon1" type="search" placeholder="Search" aria-label="Search" #search (keyup)="searchChange(search.value)">
<div class="input-group-append">
<button class="btn btn-outline-primary bg-secondary text-white" type="button">
<fa-icon [icon]="faSearch"></fa-icon>
</button>
</div>
</div>
</form>
<button class="btn btn-primary" (click)="doDonate()">Donate</button>
</div>
</nav>
</header>
<app-donate-modal *ngIf="nagDonation"></app-donate-modal>
<app-waf-captcha *ngIf="_9anime.isWafActive" [siteKey]="_9anime.siteKey"></app-waf-captcha>
<main [hidden]="!isBusy" class="container-fluid bg-gray-dark">
<div class="content">
<app-loading-spinner></app-loading-spinner>
</div>
</main>
<main [hidden]="isBusy" class="container-fluid bg-gray-dark">
<router-outlet></router-outlet>
</main>
Now I added the following css to my stylesheet:
body {
overflow: hidden;
height: 100%;
}
main {
height: 100%;
padding-top: 25px;
position: absolute;
overflow-y: scroll;
}
.window-control {
height: 31px;
-webkit-app-region: drag;
-webkit-user-select: none;
button {
-webkit-app-region: none;
}
}
::-webkit-scrollbar {
width: 12px; /* for vertical scrollbars */
height: 12px; /* for horizontal scrollbars */
}
::-webkit-scrollbar-track {
background: map-get($theme-colors, "gray-dark");
}
::-webkit-scrollbar-thumb{
background: map-get($theme-colors, "primary");
}
::-webkit-resizer {
display: none;
}
This causes the "regular" scrollbar to be gone from the body and slams it into the main element
Now, here is the funky part.
When I remove the header (display: none) and scroll all the way down this is what I get:
The scrollbar reaches the bottom and says put, the cards show fully with a small padding at the bottom.
Now when I add the header back in again and scroll all the way down, this happens:
The cards don't fully show, there is no padding under it (like in the first screenshot) and the scrollbar scrolls farther than it should scroll.
My question is if anyone knows what is causing this issue and, more importantly, how to solve it.
solved it by adding an 87px thick border on the bottom of the content:
main {
border-bottom: 87px solid #ccc;
}
I' d like to move my navbar-brand, just a bit to the right. The default position overlaps, a little, with another button. How can I do it?
Here is a bit of my html code:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button type="button" id="sidebarCollapse" class="navbar-btn">
<span></span>
<span></span>
<span></sp<an>
</button>
<a class="navbar-brand" href="#" >Agora</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<form class="form-inline mx-auto my-2">
<input class="form-control mr-sm-1" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
Do i have to use CSS?
Code is well accepted :)
i understood that you want to get the button a little bet right from his current position
you can see this example here
so you can use bootstrap positioning classes with the navbar-brand as usual like
ml-*, mr-*
Add this in you CSS file.
.navbar-brand
{
position: absolute;
width: 100%;
left: 0;
text-align: right;
margin: auto;
}
You can check the running demo here. Position is center in demo, adjust the position to right or whatever you like.
This is the code I have for my navbar:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<button type="button" class="navbar-nav btn btn-default navbar-btn navbar-left previous_page" style="display:inline-block">
<span class="glyphicon glyphicon-menu-left"></span>
back
</button>
<div class="text-center" id="progress-bar" style="display:inline-block">
<div data-page="0" class="counter active"></div>
<div data-page="1" class="counter "></div>
<div data-page="2" class="counter "></div>
<div data-page="3" class="counter "></div>
<div data-page="4" class="counter "></div>
</div>
<button type="button" class="navbar-nav btn btn-default navbar-btn navbar-right next_page disabled" style="margin-right:0px;display:inline-block">
next
<span class="glyphicon glyphicon-menu-right"></span>
</button>
</div>
</nav>
On Safari on iPhone 7, 8, X devices, when you FIRST load the page, the navbar appears on 2 different lines like so:
Then, when you refresh or reload it, it appears normal like so:
I'm having a really hard time figuring out how to get it to always appear normal, and am even more boggled by why a secondary page load corrects the issue.
Note, I added display:inline-block to all 3 navbar elements to try to correct this problem. It's done something... BEFORE I added it, when it was just Bootstrap native styling, on the Safari and iPhone 7, 8, X devices, even refreshing wouldn't help, and the navbar would stay split on 2 rows.
I am using Bootstrap 3.3.4
I go through this i found this solution rather than giving it inline you can use bootstrap class checkbox-inline which will make the center div inline and give navbar text-center class. Use pull-left and pull-right instead navbar-left and navbar-right. Hope it will help you :)
<nav class="navbar navbar-default navbar-fixed-top text-center" style="background: red;">
<div class="container-fluid">
<button type="button" class="navbar-nav btn btn-default navbar-btn pull-left previous_page">
<span class="glyphicon glyphicon-menu-left"></span>
back
</button>
<div class="text-center checkbox-inline" id="progress-bar">
<div data-page="0" class="counter active"></div>
<div data-page="1" class="counter "></div>
<div data-page="2" class="counter "></div>
<div data-page="3" class="counter "></div>
<div data-page="4" class="counter "></div>
</div>
<button type="button" class="navbar-nav btn btn-default navbar-btn pull-right next_page disabled">
next
<span class="glyphicon glyphicon-menu-right"></span>
</button>
</div>
</nav>
I had the same problem. I solved it by fixing the height of the navbar. Try giving the navbar a fixed height: i.e
.container_navbar{ height: 60px; ... }
The fixed height works across all devices.
Hope this works for you
Best regards
I don't know why, my navbar isn't centered. My buttons aren't aligned at the center and I want to change the navbar height.
How I could do that? This is the navbar:
And this is the code:
.extra-margin {
margin-bottom: 1%;
}
.extra-padding{
padding-top: 1%;
}
.extra-button{
margin-left: 5%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<header>
<nav class="navbar navbar-dark bg-dark navbar-fixed-top extra-margin">
<ul>
<a class="btn btn-outline-primary" href="{% url 'interface:users' %}">Lista Pacientes</a>
<a class=" btn btn-outline-success" href="{% url 'interface:users' %}">Añadir Paciente</a>
<a class=" btn btn-outline-danger" href="{% url 'interface:users' %}">Eliminar Paciente</a>
</ul>
<form class="navbar-form navbar navbar-right extra-padding" action="{% url 'interface:users' %}" method="post">
{% csrf_token %}
<div class="input-group">
<input type="text" name="search_text" class="form-control" placeholder="ID del Paciente">
<div class="input-group-btn">
<button class="btn btn-outline-warning extra-button" type="submit"> Buscar Paciente
</button>
</div>
</div>
</form>
</nav>
</header>
To put the buttons inline use the following style change:
nav ul
{
margin: 0;
}
In default, the ul has some bottom margin.
https://www.bootply.com/ruS4ad9IoW
You have to change this in your CSS using the #navbar-height.
When you create the navbar have a minimum of 50px.
Now about vertical centered you can use vertical-align: middle; and change the margin to 0 in the ul element, normally ul have a margin
I would like to have some text, then a button, right aligned in a Bootstrap 3
navbar. I can add the corresponding components, but whatever I tried the result is ugly. I never managed to get it right so any help would be appreciated:
<div class="container-fluid">
<div class="row">
<div class="navbar navbar-inverse">
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="nav pull-right">
<p class="navbar-text">text in navbar...</p>
<button class="btn btn-info">then a button</button>
</div>
</div>
</div>
</div>
The text looks ok but the button is stuck in the upper right corner.
Here is a link to bootply
Try adding the following CSS
.navbar .navbar-text{
float: none;
display: inline-block;
}
The default display property of .navbar-text is block, which is forcing it to be in a separate line.