I have below coding which I'm trying to put a number in a circle, a glyphicon and label below. The glyphicon and the label had align center already, but I still can't get the circle and the number to align center. Any idea how to do it guys?
html:
<div id="ttlwait" class="col-xs-3">
<div id="circlePos" class="col-xs-12">
<div id="waitnum" class="numberCircle" style="text-align:center;">0</div>
<div style="text-align:center;">
<span id="gly-user1" class="glyphicon glyphicon-user" style="color:red;"></span>
</div>
<p id="gly-userw" style="text-align:center;">People</p>
</div>
css:
#ttlwait{
background-color:yellow;
}
.numberCircle{
font-size:8vmin;
color:red;
border: 2px solid red;
border-radius: 50%;
height:12vmin;
width:12vmin;
}
JSFIDDLE
Just add display:inline-block to the .numberCircle, and center all items inside the container.
CSS
.numberCircle {
font-size:8vmin;
color:red;
border: 2px solid red;
border-radius: 50%;
height:12vmin;
width:12vmin;
display: inline-block;
}
HTML
<div id="ttlwait" class="col-xs-3">
<div id="circlePos" class="col-xs-12 text-center">
<div id="waitnum" class="numberCircle" style="text-align:center;">0</div>
<div style="text-align:center;"> <span id="gly-user1" class="glyphicon glyphicon-user" style="color:red;"></span>
</div>
<p id="gly-userw" style="text-align:center;">People</p>
</div>
Don´t forget to center all elements inside the container, you can
achieve this by setting .text-center class, or use text-align: center
DEMO HERE
Related
I would like to avoid this CSS Autoscaling bug that leaves huge blanks for long movie names. Would someone help me how to solve it? Here is my DIV and CSS code.
HTML:
<div class="col-md-2 w3l-movie-gride-agile">
<a href="single.html" class="hvr-shutter-out-horizontal"><img src="imagen/malefica.jpg" class="img-responsive" />
<div class="w3l-action-icon"><i class="fa fa-play-circle" aria-hidden="true"></i></div>
</a>
<div class="mid-1 agileits_w3layouts_mid_1_home">
<div class="w3l-movie-text">
<h6>Maléfica: La dueña de Mal</h6>
</div>
<div class="mid-2 agile_mid_2_home">
<p>2019</p>
<div class="block-stars">
<ul class="w3l-ratings">
<li><i class="fa fa-star" aria-hidden="true"></i>7.4</li>
</ul>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="ribben">
<p>NEW</p>
</div>
</div>
CSS:
.w3l-movie-gride-agile {
text-align: center;
box-shadow: 0px 0px 10px rgb(255 255 255 / 35%);
margin-right: 0%;
margin-bottom: 3%;
position: relative;
padding-left: 0;
}
.col-md-2 {
width: 16.66666667%;
}
You can use flexbox to solve the issue
.w3l-movie-gride-agile{ display:flex; justify-content:space-around; align-items:space-between; width:100%; height:500px}
Our shopping site has a dropdown menu with main categories and sub-categories. When you hover over a main category, the sub-category menu pops out on the right. The issue is that both menus are contained in the same scrolling container. So you scroll down to find a main category below the current viewport, you hover over a main category and the sub-category pops up on the left, but you have scrolled down, so you only see part of none of the sub-categories. So our current fix, which is not really working is to scroll the container to the top of the sub-categories, which is also the top of the categories. So now your mouse is over a different category and a different set of sub-categories pop out. So basically you cannot view sub-categories for categories below the viewport. Ideally we would make them seperate containers with seperate scrollbars. But that will not look good at all and will not be acceptable.
Note: This only happens when the browser window height is shrunk far enough to cause a vertical scroll bar. Obviously if the window is big enough, no scroll bar is needed and we have no issues.
Here is what it currently looks like. You hover over the 'Electrical' category and the sub-category pops out to the right.
We are using javascript and vue.js, no jquery. I learned this code will scroll the sub-category menu into view, which is not what we want.
var el = document.querySelector('.nav-flyout-menu');
el.scrollIntoView(true);
I think what I want is to actually move, as in set style.top of the sub-category menu to top of the current viewport. I played around with that a little and couldn't anything to work right. Does anyone know how we can successfully solve this issue. Is setting the style.top dynamically the best method? How do I figure out what to set it to? I have tried something like this:
var topBound = document.querySelector('.nav-flyout-menu').getBoundingClientRect().top;
if(topBound < 0) {
let newTop = Math.abs(topBound) + 42;
document.querySelector('.nav-flyout-menu').style.top = newTop + "px";
}
This code worked sometimes and sometimes not.
Update: As requested, here is a fiddle that I have created showcasing my issue. It is not exactly like our site, but I think it is close enough. Make the example height small enough to force a scroll bar and hover over each category. When you scroll down to view the bottom categories, you won't be able to see the top of the subcategories. That is exactly the problem we are currently facing. I think I want to change the top value when it shows the current subcategory. But I can't figure out how to calculate that top value. I used jQuery just to whip out the fiddle example, but we are not using jQuery on our site.
$("a.dropdown-item").hover(
function () {
$(".nav-flyout-menu").removeClass("show");
let category = $.trim($(this).text());
category = category.replace(/\s+/g, '-').toLowerCase();
$("." + category).addClass("show");
},
function () {
}
)
.navbar {
width: 100%;
display: flex;
position: relative;
padding: 0.5rem 1rem;
background-color: #0000cc;
flex-direction: row;
}
.navbar a {
color: #ffffff;
}
.navbar .dropdown-menu a {
color: #000000;
}
ul {
list-style: none;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: block;
float: left;
min-width: 10rem;
padding: .5rem 0;
margin: 0;
font-size: 1rem;
color: #212529;
text-align: left;
list-style: none;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0,0,0,.15);
border-bottom: .5rem solid #cc0000;
padding-right: 1.5rem;
}
.navbar-nav .dropdown-menu {
position: static;
float: none;
}
.navbar-container .dropdown-menu {
max-height: calc(100vh - 150px);
overflow-y: auto;
}
.dropdown-item {
display: block;
width: 100%;
padding: .5rem 1.5rem;
clear: both;
text-align: inherit;
white-space: nowrap;
background-color: transparent;
border: 0;
}
.nav-flyout-root {
position: relative;
display: inline-block;
float: left;
}
.nav-flyout-menu {
display: none;
flex-direction: column;
float: left;
min-width: 10rem;
padding: .5rem 0;
margin: 0;
font-size: 1rem;
color: #212529;
text-align: left;
list-style: none;
background-color: #fff;
background-clip: padding-box;
}
.nav-flyout-menu.show {
display: inline-flex;
}
.flyout-menu-item {
font-weight: 400;
color: #212529;
text-align: inherit;
white-space: nowrap;
background-color: transparent;
border: 0;
display: block;
width: 100%;
padding: .5rem 1.5rem;
clear: both;
}
.submenu div {
display: block;
}
.dropdown-item:focus, .dropdown-item:hover, .dropdown-item a:focus, .dropdown-item a:hover {
color: #fff!important;
text-decoration: none;
background-color: #430984;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navbar-container">
<div class="navbar">
<ul>
<li>
First
<div class="dropdown-menu">
<div class="d-flex">
<div class="nav-flyout-root">
<a class="dropdown-item">
Computers
</a>
<a class="dropdown-item">
Laptops
</a>
<a class="dropdown-item">
Monitors
</a>
<a class="dropdown-item">
Hard Drives
</a>
<a class="dropdown-item">
Keyboards
</a>
<a class="dropdown-item">
Mice
</a>
<a class="dropdown-item">
Computers
</a>
<a class="dropdown-item">
Laptops
</a>
<a class="dropdown-item">
Monitors
</a>
<a class="dropdown-item">
Hard Drives
</a>
<a class="dropdown-item">
Keyboards
</a>
<a class="dropdown-item">
Mice
</a>
</div>
<div class="nav-flyout-menu position-relative computers">
<div class="flyout-menu-header text-nowrap">
All Computers
</div>
<div class="d-flex flex-grow-1 flex-column submenu">
<div>
Dell
</div>
<div>
HP
</div>
<div>
Asus
</div>
<div>
Compaq
</div>
<div>
Dell
</div>
<div>
Samsung
</div>
<div>
Acer
</div>
</div>
</div>
<div class="nav-flyout-menu position-relative laptops">
<div class="flyout-menu-header text-nowrap">
All Laptops
</div>
<div class="d-flex flex-grow-1 flex-column submenu">
<div>
Acer
</div>
<div>
HP
</div>
<div>
Sony
</div>
<div>
Compaq
</div>
<div>
Vaio
</div>
<div>
Apple
</div>
<div>
Acer
</div>
</div>
</div>
<div class="nav-flyout-menu position-relative monitors">
<div class="flyout-menu-header text-nowrap">
All Monitors
</div>
<div class="d-flex flex-grow-1 flex-column submenu">
<div>
Qnix
</div>
<div>
HP
</div>
<div>
Sony
</div>
<div>
Dell
</div>
<div>
Asus
</div>
<div>
22"
</div>
<div>
23"
</div>
</div>
</div>
<div class="nav-flyout-menu position-relative hard-drives">
<div class="flyout-menu-header text-nowrap">
All Hard Drives
</div>
<div class="d-flex flex-grow-1 flex-column submenu">
<div>
Western Digital
</div>
<div>
Samsung
</div>
<div>
HP
</div>
<div>
Seagate
</div>
<div>
Kingston
</div>
<div>
Crucial
</div>
<div>
SSD
</div>
</div>
</div>
<div class="nav-flyout-menu position-relative keyboards">
<div class="flyout-menu-header text-nowrap">
All Keyboards
</div>
<div class="d-flex flex-grow-1 flex-column submenu">
<div>
Logitech
</div>
<div>
Microsoft
</div>
<div>
Gearhead
</div>
<div>
Razer
</div>
<div>
Cherry MX
</div>
<div>
Mech Blue
</div>
<div>
Mech Red
</div>
</div>
</div>
<div class="nav-flyout-menu position-relative mice">
<div class="flyout-menu-header text-nowrap">
All Mice
</div>
<div class="d-flex flex-grow-1 flex-column submenu">
<div>
Steel Series
</div>
<div>
Microsoft
</div>
<div>
Logitech
</div>
<div>
Razer
</div>
<div>
Cooler Master
</div>
<div>
HyperX
</div>
<div>
Roccat
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
You can add a class to the active sub-menu element
var el = document.querySelector('.nav-flyout-menu');
el.classList.add("nav-active-sub-menu");
And control it's style with css. Something like:
.nav-active-sub-menu{
position: absolute;
top: 0;
}
Finally got this! I knew this had to be able to be accomplished with some simple javascript. I was right. Element.scrollTop was the key. I don't think this would be possible with CSS alone, someone correct me if I am wrong.
We have an event listener for when a main menu item is hovered to show the submenu. In that listener, I put this code:
let scrollTop = vm.$el.parentElement.parentElement.parentElement.scrollTop;
document.querySelector('.nav-flyout-menu').style.top = scrollTop + "px";
This seems to be working in all my tests.
I have been trying to create a bootstrap drop down box with some additional buttons inside. I have the main functionality sorted but the aesthetics are not quite right.
The issue I am having is that the Anchor elements are not filling the space up to the buttons on the right. I have tried experimenting with different combinations of block and inline-block which I have read elsewhere should fill the space but when it does it pushes the buttons down to the next line. When I do manage to get the buttons and anchor elements on the same line the selection area for the anchor does not extend the entire way up to the buttons.
I am currently tearing my hair out trying to get it to work but am having no luck so if anyone can offer any assistance it will be greatly appreciated.
Update:
Thanks to #Matus Jurika for suggesting using calc to adjust the sizing of the anchor element.
Updated working fiddle: fiddle
I sugget using calc for width:
.anchorDiv {
display: inline-block;
width: calc(100% - 74px);
}
Working Fiddle:
https://jsfiddle.net/q3fra0bm/36/
This here is snippet for your solution. I am just using bootstrap row class.
.comboRow {
margin-bottom: 3px;
}
.comboItem {
display: block !important;
/*width: 67%;*/
}
.comboButtons {
float:right;
margin-top: 3px;
width: 74px;
display: block;
}
.comboItemContainer {
width: 100%;
display: inline-block;
}
.anchorDiv {
display: inline-block;
}
.close {
/*float: right;*/
/*margin-right: 10px;*/
}
.close .edit {
margin-right: 5px;
}
#presetDropdownButton {
position:absolute;
}
.glyphicon {
font-size: 15px;
}
#presetDropdown {
width: max-content;
}
#newPresetEntry {
width: 50%;
height: 24px;
margin-left: 18px;
padding-left: 6px;
padding-right: 6px;
}
.dropdown-menu > li > div > div > a {
padding: 3px 20px;
clear: both;
font-weight: 400;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
display: block;
}
.dropdown-menu > li > div > div > a:focus {
color: #262626;
text-decoration: none;
background-color: #f5f5f5;
}
.dropdown-menu > li > div > div > a:hover {
color: #262626;
text-decoration: none;
background-color: #f5f5f5;
}
.pl-0 {
padding-left: 0 !important;
}
.pr-0 {
padding-right: 0 !important;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="dropdown" id="presetDropdownButton">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Presets
<span class="caret"></span>
</button>
<ul class="dropdown-menu" id="presetDropdown">
<li class="comboRow">
<div class="row">
<div class="col-md-9 col-xs-9 pr-0">
<a class="comboItem" href="#" value="1">Preset 1</a>
</div>
<div class="col-md-3 col-xs-3 pl-0">
<button type="button" class="close deletePreset" aria-label="Delete" style="margin-right: 10px;">
<span aria-hidden="true">×</span>
</button>
<button type="button" class="close edit editPreset" aria-label="Edit" style="margin-right: 3px;">
<span aria-hidden="true">✎</span>
</button>
<button type="button" class="close edit savePreset" aria-label="Save" style="margin-right: 3px;">
<span style="font-size: 18px;" aria-hidden="true">💾</span>
</button>
</div>
</div>
</li>
<li class="comboRow">
<div class="row">
<div class="col-md-9 col-xs-9 pr-0">
<a class="comboItem" href="#" value="1">Preset 2 with longer name</a>
</div>
<div class="col-md-3 col-xs-3 pl-0">
<button type="button" class="close deletePreset" aria-label="Delete" style="margin-right: 10px;">
<span aria-hidden="true">×</span>
</button>
<button type="button" class="close edit editPreset" aria-label="Edit" style="margin-right: 3px;">
<span aria-hidden="true">✎</span>
</button>
<button type="button" class="close edit savePreset" aria-label="Save" style="margin-right: 3px;">
<span style="font-size: 18px;" aria-hidden="true">💾</span>
</button>
</div>
</div>
</li>
<li class="comboRow">
<div class="row">
<div class="col-md-9 col-xs-9 pr-0">
<a class="comboItem" href="#" value="1">Preset 3 with even longer name</a>
</div>
<div class="col-md-3 col-xs-3 pl-0">
<button type="button" class="close deletePreset" aria-label="Delete" style="margin-right: 10px;">
<span aria-hidden="true">×</span>
</button>
<button type="button" class="close edit editPreset" aria-label="Edit" style="margin-right: 3px;">
<span aria-hidden="true">✎</span>
</button>
<button type="button" class="close edit savePreset" aria-label="Save" style="margin-right: 3px;">
<span style="font-size: 18px;" aria-hidden="true">💾</span>
</button>
</div>
</div>
</li>
</ul>
</div>
This should do the trick.
.comboItemContainer {
width: 100%;
position: relative;
}
.anchorDiv {
display: inline-block;
width: 100%;
padding: 0 80px 0 0;
}
.comboButtons {
width: 74px;
display: block;
position: absolute;
top: 0px;
right: 0px;
}
I made the container relative so that I can freely use absolute positioning on its children with a (0,0) origin relative to the container. Then I made the buttons absolute, made it top 0 and right 0. Added 100% width on the anchor and 80px padding-right.
This may look hacky but I'm not really that good in Flex and absolutely zero in Grid
This is almost certainly cross browser though
I'm having trouble centering a button in the bootstrap jumbotron. I have tried using text align center, margin auto 0 px, and other solutions on Stack Overflow. I have my button inside a container which is inside the jumbotron. I don't want to center the container because then the text on the jumbotron would also be centered, which I don't want. I just want the button to be centered.
Here is my HTML Code
<div class="jumbotron">
<div class="container" >
<h2>Keep your heart as if you have just entered this world and your mind as if you have lived it one hundred times.</h2>
<button type="button" class="btn btn-primary text-center">
Projects
</button>
</div>
</div>
Here is my CSS Code
.jumbotron {
padding: 20em;
background-image: url("../img/website-background.jpg") !important;
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.jumbotron .container h2 {
color: white;
position: relative;
bottom: 100px;
}
.jumbotron .container button {
text-align: center;
}
On .jumbotron .container apply text-align: center; which will also align the heading in center so target .jumbotron .container h2 and align it left if you want using text-align: left;
OR
Just apply text-center class on container div inside jumbotron and then target the heading and align its text as left.
<div class="jumbotron">
<div class="container text-center">
<h2 class="text-left">Keep your heart as if you have just e it one hundred times.</h2>
<button type="button" class="btn btn-primary text-center">Projects</button>
</div>
</div>
Codepen: https://codepen.io/Omi236/pen/JJVENE?editors=1100
Wrap it in a div with text-center class.
<div class="jumbotron">
<div class="container" >
<h2>Keep your heart as if you have just entered this world and your mind as if you have lived it one hundred times.</h2>
<div class="text-center">
<button type="button" class="btn btn-primary text-center">
Projects
</button>
</div>
</div>
</div>
Wrap your button inside a div & apply the following styles on that:
.wrapper {
width: 100px;
margin: 150px auto;
}
HTML would be like:
<div class="wrapper">
<button type="button" class="btn btn-primary text-center">
</div>
This question has probably been asked many times, I tried all suggestions and answers I could find on SO with no success.
What I am trying to achieve is a set of boxes (divs) layed out as follow:
The order does not really matter as long as there is no empty space between these boxes.
Here is what I have:
<div class="MyList">
<div class="ListItem" style="height:75px;"><span>Box 1</span></div>
<div class="ListItem" style="height:65px;"><span>Box 2</span></div>
<div class="ListItem" style="height:45px;"><span>Box 3</span></div>
<div class="ListItem" style="height:85px;"><span>Box 4</span></div>
<div class="ListItem" style="height:25px;"><span>Box 5</span></div>
</div>
and
.MyList
{
overflow:auto;
background:lightgray;
width:240px;
}
.ListItem {
color: #000;
background: white;
border: 1px solid grey;
min-height: 2em;
width: 100px;
padding: 0.5em 0.5em 0em 0.5em;
border-radius: 3px;
float: left;
cursor: pointer;
}
And here is the result (fiddle):
So far, I could get this:
I can't:
Use css column attribute as it is not supported in IE :(
Use javascript (Columnizer) to split my divs into two sets.
This is because I am turning these tiles into draggables and the javascript code
considerably hinders the usability of my application.
I can't use special selectors for left and right boxes as the list of boxes is dynamic (knockout generated)
Is this even achievable?
.leftBoxes
{
display: inline;
float: left;
width: 49%;
}
.rightBoxes
{
display: inline;
float: right;
width: 49%;
}
#box1
{
height: 100px;
}
#box2
{
height: 20px;
}
Create two floating to the left <divs>s as a columns (no "column" property), and put boxes in them in desired order.
<div class="MylistPart">
<div>
<div class="ListItem" style="height:75px;"><span>Box 1</span></div>
<div class="ListItem" style="height:65px;"><span>Box 2</span></div>
</div>
<div class="MylistPart">
<div class="ListItem" style="height:45px;"><span>Box 3</span></div>
<div class="ListItem" style="height:85px;"><span>Box 4</span></div>
<div class="ListItem" style="height:25px;"><span>Box 5</span></div>
</div>
</div>
.MyList
{
overflow:auto;
background:lightgray;
width:240px;
}
.ListItem {
color: #000;
background: white;
border: 1px solid grey;
width:100px;
padding: 0.5em 0.5em 0em 0.5em;
border-radius: 3px;
cursor: pointer;
}
.MylistPart{
float:left;
width:110;
background:lightgreen;
}
EDIT
I edited your solution and added the floating and it is now working fine (jsFiddle
Although special selectors are used for the left and right side columns, these can easily be used with dynamic content where the initial array of boxes has to be split into two parts and then let knockout loop through these two parts to display them.
Why not create a <table>?
<div class="MyList">
<div class="ListItem" style="height:75px;"><span>Box 1</span></div>
<div class="ListItem" style="height:65px;"><span>Box 2</span></div>
<div class="ListItem" style="height:45px;"><span>Box 3</span></div>
<div class="ListItem" style="height:85px;"><span>Box 4</span></div>
<div class="ListItem" style="height:25px;"><span>Box 5</span></div>
</div>
Would change to
<div>
<table>
<tbody>
<tr>
<td>
<div class="ListItem" style="height:75px;"><span>Box 1</span></div>
<div class="ListItem" style="height:45px;"><span>Box 3</span></div>
<div class="ListItem" style="height:25px;"><span>Box 5</span></div>
</td>
<td>
<div class="ListItem" style="height:65px;"><span>Box 2</span></div>
<div class="ListItem" style="height:85px;"><span>Box 4</span></div>
</td>
</tr>
</tbody>
</table>
</div>
*I love tables :P
Here's the JFiddle Re-edit.