Problem:
I'm trying to create a HTML from which will have two buttons and a text in the middle. Everything looks fine just the right button is being pushed a little down. What is causing this in my HTML mockup?
I would appreciate any kind of help.
Code:
<div class="card-body p-0">
<ul class="nav nav-sidebar" data-nav-type="accordion">
<li class="nav-item-header">headline</li>
<li class="nav-item" style=" margin: 0px 20px 0px 20px;">
<button type="button" class="btn btn-primary btn-icon" style="left: 20px !important; position:absolute !important;"><i class="icon-arrow-left12"></i></button>
<p style="text-align: center;">Text</p>
<button type="button" class="btn btn-primary btn-icon" style="right: 20px !important; position:absolute !important;"><i class="icon-arrow-right13"></i></button>
</li>
</ul>
</div>
Image to demonstrate the problem:
You've put your text inside a <p> paragraph - so that means it will push everything after it to below it.
Try this: https://jsfiddle.net/px7u04aL/
Even without style sheet css - it shows side by side as I think you wanted.
Agree with comment from Martin that it is best not to use absolute unless you really have to.
Try the following code:-
Add CSS property position: relative; in the second li and add top: 0px in right button.
<div class="card-body p-0">
<ul class="nav nav-sidebar" style="position: relative" data-nav-type="accordion">
<li class="nav-item-header">headline</li>
<li class="nav-item" style="position: relative; margin: 0px 20px 0px 20px;">
<button type="button" class="btn btn-primary btn-icon" style="left: 20px !important; position:absolute !important;"><i class="icon-arrow-left12"></i></button>
<p style="text-align: center;">Text</p>
<button type="button" class="btn btn-primary btn-icon" style="right: 20px !important;top: 0px; position:absolute !important;"><i class="icon-arrow-right13"></i></button>
</li>
</ul>
</div>
Related
I have a dropdown in card header i need that to be in top right corner how do i set that in my header.I need welcome message in right side of the card header as below image its beside the title
What I did:-
I added a classes to .card (of bootstrap) with CSS properties of display: "flex" justify-content: "space-between" and flex-direction: row
reference:- https://getbootstrap.com/docs/4.0/utilities/flex/
Style:-
<style>
.card {
/* Add shadows to create the "card" effect */
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
margin: 0 auto;
float: none;
margin-bottom: 10px;
}
/* On mouse-over, add a deeper shadow */
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
body {
background-color: lightblue;
}
</style>
Html:-
<div class="container-fluid" style="padding-top: 50px">
<div class="card d-flex flex-row justify-content-between">
<div
class="card-header text-center"
style="font-family: Sans-Serif; text-transform: uppercase; font-size: 1.5rem"
>
Project Manager Dashboard
</div>
<div class="btn-group dropleft">
<button
type="button"
class="btn btn-outline-secondary"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Hi, Drake
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
<a href="{% url 'logout_view' %}"
><button class="dropdown-item" type="button">Logout</button></a
>
</div>
</div>
</div>
</div>
snip
To set it in the top-right corner just use the align property this would align the element to the right.
<div class="container-fluid" style="padding-top: 50px;">
<div class="card">
<div class="card-header text-center " style="font-family: Sans-Serif; text-transform:uppercase; font-size:1.5rem">
Project Manager Dashboard
<div class="btn-group dropright" align="right" >
<!-- Dropdown menu links -->
<button class="dropdown-item" type="button">Log</button>
</div>
<div class="btn-group dropleft">
<button type="button" class="btn btn-outline-secondary" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Hi, Drake
</button>
</div>
</div>
I have a little problem with a dropdown button. I am trying to adjust my website to mobile. What I want is to have a button that will dropdown to left-hand side of it. Her is my html code;
<!-- A div element for the button that will contain the nav-bar buttons -->
<div style="position: absolute; ; right: 0px; margin-top: 40px;" ngbDropdown class="btn-group dropleft">
<button class="btn adjustbtn dropdown-toggle" style="width: auto; height: 20px;" ngbDropdownToggle></button>
<div ngbDropdownMenu class="dropdown-menu">
<button ngbDropdownItem>All Sports</button>
<button ngbDropdownItem>Basketball</button>
<button ngbDropdownItem>Football</button>
</div>
</div>
But the problem is this button is still dropping down to the right-hand side of it, althoug the arrow at my dropdown button points to left. How can I fix this?
Try this.
<div style="position: absolute; left:auto !important; right: 0 !important; margin-top: 40px;" ngbDropdown class="btn-group dropleft">
<button class="btn adjustbtn dropdown-toggle" style="width: auto; height: 20px;" ngbDropdownToggle></button>
<div ngbDropdownMenu class="dropdown-menu">
<button ngbDropdownItem>All Sports</button>
<button ngbDropdownItem>Basketball</button>
<button ngbDropdownItem>Football</button>
</div>
</div>
I guess you are using ng-bootstrap dropdown.
If yes, you should use its class dropdown-menu dropdown-menu-right.
<div style="position: absolute; ; right: 0px; margin-top: 40px;" ngbDropdown class="btn-group dropleft">
<button class="btn adjustbtn dropdown-toggle" style="width: auto; height: 20px;" ngbDropdownToggle></button>
<div ngbDropdownMenu class="dropdown-menu dropdown-menu-right">
<button ngbDropdownItem>All Sports</button>
<button ngbDropdownItem>Basketball</button>
<button ngbDropdownItem>Football</button>
</div>
</div>
Sample: dropdown examples
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 am trying to create a page header / tool bar. This in an existing theme and there is a DIV at the top where this will reside. The basic premise is on the left a H2 title then on the right a bunch of bootstrap elements (search form, bottons, dropdowns etc.
I have tried all kinds of block, inline-block vertical-align etc. I can get the H2 to pull left and the toolbar to pull right but the toolbar elements all pull up to the top of the container div. I just want a clean looking layout with all the elements aligned along their horizontal axis.
I think the pull-right may be part of the problem. That seems to pull the right div up to the top.
Here is a Bootply link: http://www.bootply.com/BPucyP8mpk
<div class"container">
<div id="left">
<h2 class="">Title</h2>
</div>
<div id="right">
<form class="form form-horizontal">
<input type="text" placeholder="search field" class="form-control">
<button type="submit" class="btn">search</button>
</form>
<button class="btn btn-default">Button</button>
<div class="btn-group">
<button class="btn">Left</button>
<button class="btn">Middle</button>
<button class="btn">Right</button>
</div>
<div class="btn-group"><a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Dropdown<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Choice1
</li>
<li>Choice2
</li>
<li>Choice3
</li>
<li class="divider"></li>
<li>Choice..
</li>
</ul>
</div>
</div>
</div>
UPDATE:
Here is the computed CSS that wraps the header I am trying to format:
border-bottom-width: 1px;
border-top-color: rgb(103, 106, 108);
border-top-style: none;
border-top-width: 0px;
box-sizing: border-box;
color: rgb(103, 106, 108);
display: block;
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 13px;
height: 70px;
line-height: 18px;
margin-left: -15px;
margin-right: -15px;
padding-bottom: 12px;
padding-left: 20px;
padding-right: 20px;
padding-top: 0px;
width: 1318px;
This is from my custom theme I have installed. This is the computed CSS from this wrapper div:
<div class="row wrapper border-bottom white-bg page-heading">
</div>
UPD:
The most suitable method for this task is use Flexbox
Check it out: http://www.bootply.com/CtVmUbzrlr
<div class="row">
<div id="left" class="col-sm-3 col-md-5">
<h2 class="">Title</h2>
</div>
<div id="right" class="col-sm-9 col-md-7">
<form class="form form-horizontal">
<div class="input-group">
<input type="text" placeholder="search field" class="form-control">
<span type="submit" class="input-group-addon">search</span>
</div>
</form>
<button class="btn btn-default">Button</button>
<div class="btn-group">
<button class="btn">Left</button>
<button class="btn">Middle</button>
<button class="btn">Right</button>
</div>
<div class="btn-group"><a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Dropdown<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Choice1
</li>
<li>Choice2
</li>
<li>Choice3
</li>
<li class="divider"></li>
<li>Choice..
</li>
</ul>
</div>
</div>
</div>
.row{
border: 1px solid #000;
}
#right{
display: flex;
align-items: center;
height: 66px;
justify-content: flex-end;
}
.input-group{
width: 200px;
}
Check this out:
<div class="col-lg-4">
<h2 class="">Title</h2>
</div>
<div class="col-lg-8">
<div class="row">
<form class="form form-horizontal">
<div class="col-lg-8">
<input type="text" placeholder="search field" class="form-control">
</div>
<div class="col-lg-4">
<button type="submit" class="btn btn-block">search</button>
</div>
</form>
</div>
<div class="row">
<div class="col-lg-12">
<button class="btn btn-default">Button</button>
<div class="btn-group">
<button class="btn">Left</button>
<button class="btn">Middle</button>
<button class="btn">Right</button>
</div>
<div class="btn-group"><a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Dropdown<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Choice1
</li>
<li>Choice2
</li>
<li>Choice3
</li>
<li class="divider"></li>
<li>Choice..
</li>
</ul>
</div>
</div>
</div>
</div>
you can check bootply also : http://www.bootply.com/LmGjZM6fHH
You need to manage your layout with the col-md-*
This is just for the demo, you can arrange with you own way
What about utilizing the navbar component from bootstrap?
http://getbootstrap.com/components/#navbar
I think the example here pretty much sums up your needs.
Basically I've added classes navbar-btn to the buttons, and navbar-form to the form to get them to align properly. I added the class navbar-right to both the form and the group of buttons.
http://www.bootply.com/IySnkX2ioK
Edit: The navbar-default class was just added to outline the bounds of the navbar, not part of the solution.
First thing is that if you want to have your search box on left - place it first and then button group with dropdown. Second, don't place navbar-rigth inside another navbar-rigth. And the last thing - just wrap your right-side elements in one div and add to it a little padding
Updated link
I'd really appreciate some help on an issue i'm having.
For reference: http://trs-studios.com/test
I'm trying to get the 3 boxes (side to side) to align to the center of the page.
<div class="wrapper">
<a class="btn btn-large" href="URL TO YOUR SUBSITE" target="_blank"></i> MEDIA</a>
<div class="spacer"/>
<a class="btn btn-large" href="URL TO YOUR SUBSITE" target="_blank"></i> STUDIO</a>
<div class="spacer"/>
<a class="btn btn-large" href="URL TO YOUR SUBSITE" target="_blank"></i> DESIGN</a>
</div>
Css for wrapper
.wrapper {
padding-top: 100px;
text-align: center;
}
Css for spacer
.spacer {
display: inline;
margin: 50px 50px;
position: relative;
text-align: center;
}
I'd appreciate any help!
Forget those spacing divs, HTML is not for styling.
Using display: inline-block on your links, you can simply put margin on them.
HTML:
<div class="wrapper">
<a class="btn btn-large" href="URL TO YOUR SUBSITE" target="_blank">MEDIA</a>
<a class="btn btn-large" href="URL TO YOUR SUBSITE" target="_blank">STUDIO</a>
<a class="btn btn-large" href="URL TO YOUR SUBSITE" target="_blank">DESIGN</a>
</div>
CSS:
.wrapper {
text-align: center;
}
.wrapper .btn {
display: inline-block;
margin: 50px 25px;
}
Working demo