i am trying to make a nav bar with horizontal overflow auto it gets vertical overflow auto i tried giving the span display flex but then the text in side buttons goes down and it also have no effect on overflow can anyone help please
my code
#navigationBar {
display: flex;
justify-content: center;
text-align: center;
border: 1px solid;
border-right: none;
border-left: none;
height: 40px;
background: white;
overflow-x: auto;
}
#navigationBar span {
display: flex;
overflow-x: auto;
}
.options {
font-size: 15px;
padding: 6;
margin: 4;
font-family: monospace;
border-radius: 15px;
border: 1px solid;
}
<nav id="navigationBar">
<span id="catogory">
<button class="options" id="options-All">All</button>
<button class="options">Islamic</button>
<button class="options">Educational</button>
<button class="options">Arts & Creative</button>
<button class="options">TV & Media</button>
<button class="options">Arabic</button>
<button class="options">Urdu</button>
<button class="options">Hindi</button>
<button class="options">Turkish</button>
<button class="options">English</button>
<button class="options">Ideas</button>
<button class="options">Business</button>
<button class="options">Legal</button>
<button class="options">IT & Tech</button>
<button class="options">knowledge</button>
<button class="options">Health</button>
<button class="options">Ask For Something</button>
<button class="options">Human Resourses</button>
<button class="options">Other</button>
<span>
</nav>
First thing, the snippet you provided has CSS and HTML together with no proper syntax.
Second thing, you don't need extra span, so you can remove it.
At last, just update your CSS with the below changes, and it will work.
Note- As you mentioned that the button's text goes down, so giving it a style white-space: nowrap; would do the job.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#navigationBar {
display: flex;
border: 1px solid;
border-right: none;
border-left: none;
padding: 20px 0;
background: white;
overflow-x: auto;
}
.options {
display: inline-block;
padding: 6px;
border-radius: 15px;
margin: 4px;
border: 1px solid;
white-space: nowrap;
font-family: monospace;
font-size: 15px;
}
</style>
</head>
<body>
<nav id="navigationBar">
<button class="options" id="options-All">All</button>
<button class="options">Islamic</button>
<button class="options">Educational</button>
<button class="options">Arts & Creative</button>
<button class="options">TV & Media</button>
<button class="options">Arabic</button>
<button class="options">Urdu</button>
<button class="options">Hindi</button>
<button class="options">Turkish</button>
<button class="options">English</button>
<button class="options">Ideas</button>
<button class="options">Business</button>
<button class="options">Legal</button>
<button class="options">IT & Tech</button>
<button class="options">knowledge</button>
<button class="options">Health</button>
<button class="options">Ask For Something</button>
<button class="options">Human Resourses</button>
<button class="options">Other</button>
</nav>
</body>
</html>
Related
i am trying to copy a website it has a nav bar with buttons in side, those buttons only have border-radius to sides i tried giving border-radius but my buttons turned into horizontally oval shape
<html>
<head>
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
#navigationBar {
background-color: #e4e4e4;
height: 40px;
}
</style>
</head>
<body>
</nav>
<nav id="navigationBar">
<button class="options">Islamic</button>
<button class="options">Educational</button>
<button class="options">Arts & Creative</button>
</nav>
</body>
</html>
Using percentages for border-radius will cause this ugly oval shape. Set a pixel amount (12px here):
<html>
<head>
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
#navigationBar {
background-color: #e4e4e4;
padding: 10px;
}
.options{
min-width: 100px;
min-height: 50px;
border-radius: 12px 0px;
}
</style>
</head>
<body>
</nav>
<nav id="navigationBar">
<button class="options">Islamic</button>
<button class="options">Educational</button>
<button class="options">Arts & Creative</button>
</nav>
</body>
</html>
Maybe not this width & height ratio, but you can adjust it. Good idea is to merge style to css files.
With border-top-right-radius and border-bottom-right-radius and value which stands next to them you can modify the shape of the border.
<html>
<head>
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
#navigationBar {
background-color: #e4e4e4;
padding: 10px;
}
.options{
min-width: 100px;
min-height: 50px;
border-top-right-radius: 20%;
border-bottom-right-radius: 20%;
}
</style>
</head>
<body>
</nav>
<nav id="navigationBar">
<button class="options">Islamic</button>
<button class="options">Educational</button>
<button class="options">Arts & Creative</button>
</nav>
</body>
</html>
You have to play with border radius. In this case you can use:
.options{ border-radius: 0 10px 10px 0; }
giving 15px border-radius would work
.options {
border-radius: 15px;
}
A image I designed on Figma:
My attempt:
.pagenumber {
display: flex;
width: 252.27px;
height: 45px;
justify-content: space-between;
align-items: center;
padding: 6.761954261954262% 0 0 37.680647534952171%;
}
button {
background: none;
border: none;
}
.no {
width: 65.750981091687478%;
padding: 0 12px 0 22.5px;
}
.numbers {
background: #ffe400;
border-radius: 50%;
height: 45px;
width: 45.24px;
}
.no a {
color: black;
font-family: Lobster;
font-size: 187.5%;
}
<div class="pagenumber">
<div class="arrowbtn">
<button type="submit" onclick="history.back(-1)"><i class="fas fa-greater-than fa-flip-horizontal fa-2x" style="color: #ffe400;"></i></button>
</div>
<div class="no">
<button class="numbers">1</button>
<button class="numbers">2</button>
<button class="numbers">3</button>
</div>
<div class="arrowbtn">
<button type="submit" method="get" action="/page2"><i class="fas fa-greater-than fa-2x" style="color: #ffe400;"></i></button>
</div>
</div>
I wanna a page number button like this image but I don't know how to make space between 1,2,3 button. The space between the buttons is 15.08px. If you find some drawback from my code pls notice me.
Try adding the flex properties to your .no class instead and update the width.
If you're just wanting a simple way to get spacing between your elements just set a desired width without using calc and space-between will do the rest.
If you're looking to get the exact spacing you desire then I recommend using calc to calculate what the width of the parent element should be to fit your required spacing.
My calculation explained:
Multiply the width of the 3 number elements (45.24px * 3)
Add that to the multiplication of the exact spacing you want between the number elements (15.08px * 2), in this case multiplying the desired spacing by 2 since you have 3 elements and only require 2 spaces in between.
Note that if you use the calc method you will have to update the calculation each time you update the number of elements you want to display.
.pagenumber {
display: flex;
width: 252.27px;
height: 45px;
justify-content: space-between;
align-items: center;
padding: 6.761954261954262% 0 0 37.680647534952171%;
}
button {
background: none;
border: none;
}
.no {
display: flex;
align-items: center;
justify-content: space-between;
width: calc(45.24px * 3 + 15.08px * 2);
padding: 0 12px;
}
.numbers {
background: #ffe400;
border-radius: 50%;
height: 45px;
width: 45.24px;
}
.no a {
color: black;
font-family: Lobster;
font-size: 187.5%;
}
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<div class="pagenumber">
<div class="arrowbtn">
<button type="submit" onclick="history.back(-1)"><i class="fas fa-greater-than fa-flip-horizontal fa-2x" style="color: #ffe400;"></i></button>
</div>
<div class="no">
<button class="numbers">1</button>
<button class="numbers">2</button>
<button class="numbers">3</button>
</div>
<div class="arrowbtn">
<button type="submit" method="get" action="/page2"><i class="fas fa-greater-than fa-2x" style="color: #ffe400;"></i></button>
</div>
</div>
<div class="pagenumber">
<div class="arrowbtn">
<button type="submit" onclick="history.back(-1)"><i class="fas fa-greater-than fa-flip-horizontal fa-2x" style="color: #ffe400;"></i></button>
</div>
<div class="no">
<button class="numbers">1</button>
<button class="numbers">2</button>
<button class="numbers">3</button>
</div>
<div class="arrowbtn">
<button type="submit" method="get" action="/page2"><i class="fas fa-greater-than fa-2x" style="color: #ffe400;"></i></button>
</div>
</div>
<style>
.pagenumber {
display: flex;
width: 252.27px;
height: 45px;
justify-content: space-between;
align-items: center;
padding: 6.761954261954262% 0 0 37.680647534952171%;
}
button {
background: none;
border: none;
}
.no {
padding: 0 12px 0 22.5px;
}
.numbers {
background: #ffe400;
border-radius: 50%;
height: 45px;
width: 45px;
margin-right: 15.08px;
}
.no :nth-last-child(1) {
margin-right: 0px;
}
.no a {
color: black;
font-family: Lobster;
font-size: 187.5%;
}
</style>
Remove the width on no and set margin-right on numbers will do.
Do you mean something like this?
button {background: yellow; border-radius:50%}
<button>1</button>
<button>2</button>
<button>3</button>
Hi to get space between your number button you just need to apply margin like margin: 0 5px or something on your number class and if you want to remove lines which is on number button apply text-decoration: none on anchor tag
like that...
<style type="text/css">
.pagenumber {
/*display: flex;*/
/*width: 252.27px;*/
height: 45px;
justify-content: space-between;
align-items: center;
padding: 6.761954261954262% 0 0 37.680647534952171%;
}
button {
background: none;
border: none;
}
.no {
width: 65.750981091687478%;
padding: 0 12px 0 22.5px;
}
.numbers {
background: #ffe400;
border-radius: 50%;
height: 45px;
width: 45.24px;
margin: 0 5px;
}
.no a {
color: black;
font-family: Lobster;
font-size: 187.5%;
text-decoration: none;
font-weight: bold;
}
</style>
<div class="pagenumber">
<div class="arrowbtn">
<button type="submit" onclick="history.back(-1)"><i class="fas fa-greater-than fa-flip-horizontal fa-2x" style="color: #ffe400;"></i></button>
</div>
<div class="no">
<button class=""><</button>
<button class="numbers">1</button>
<button class="numbers">2</button>
<button class="numbers">3</button>
<button class="">></button>
</div>
<div class="arrowbtn">
<button type="submit" method="get" action="/page2"><i class="fas fa-greater-than fa-2x" style="color: #ffe400;"></i></button>
</div>
</div>
I'm trying to make circular tabs menu using bootstrap 4. I have tried below code using buttons and displaying inline.
I have attached the expected out image below.So first button will be active by default. Only the active button background should have color. Remaining all should be in grey colour. Can any one let me know how to achieve that
Here is the code
h1 {
color: green;
}
.xyz {
background-size: auto;
text-align: center;
padding-top: 100px;
}
.btn-circle.btn-sm {
width: 30px;
height: 30px;
padding: 6px 0px;
border-radius: 15px;
font-size: 8px;
text-align: center;
}
.btn-circle.btn-md {
width: 50px;
height: 50px;
padding: 7px 10px;
border-radius: 25px;
font-size: 10px;
text-align: center;
}
.btn-circle.btn-xl {
width: 70px;
height: 70px;
padding: 10px 16px;
border-radius: 35px;
font-size: 12px;
text-align: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
<body class="xyz">
<button type="button" class="btn btn-primary btn-circle btn-sm">Blue</button>
<button type="button" class="btn btn-secondary btn-circle btn-sm">Gray</button>
<button type="button" class="btn btn-success btn-circle btn-sm">Green</button>
<button type="button" class="btn btn-danger btn-circle btn-sm">Red</button>
<button type="button" class="btn btn-warning btn-circle btn-sm">Yellow</button>
<button type="button" class="btn btn-light btn-circle btn-sm">White</button>
<button type="button" class="btn btn-dark btn-circle btn-sm">Black</button>
</body>
</html>
You need some Javascript for this:
turn all buttons to gray on the first click i.e. add 'blank' class
turn the button that was clicked to blue i.e. add 'active' class
you had all types of classes to start off with, which is why !important is needed to force our color through... but for your requirement, you don't need all these colored classes
$(document).ready(function() {
$(".btn").click(function() {
$(".btn").each(function() {
($(this).hasClass('blank')) ? null: $(this).addClass('blank');
($(this).hasClass('active')) ? $(this).removeClass('active'): null;
});
$(this).addClass('active');
});
});
h1 {
color: green;
}
.xyz {
background-size: auto;
text-align: center;
padding-top: 100px;
}
.btn-circle.btn-sm {
width: 30px;
height: 30px;
padding: 6px 0px;
border-radius: 15px;
font-size: 8px;
text-align: center;
}
.btn-circle.btn-md {
width: 50px;
height: 50px;
padding: 7px 10px;
border-radius: 25px;
font-size: 10px;
text-align: center;
}
.btn-circle.btn-xl {
width: 70px;
height: 70px;
padding: 10px 16px;
border-radius: 35px;
font-size: 12px;
text-align: center;
}
.btn.btn-sm.btn-circle.blank {
background: lightgray;
border-color: lightgray;
}
.btn.btn-sm.btn-circle.active {
background-color: blue !important;
border-color: blue;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<div class="xyz">
<button type="button" class="btn btn-primary btn-circle btn-sm">Blue</button>
<button type="button" class="btn btn-secondary btn-circle btn-sm">Gray</button>
<button type="button" class="btn btn-success btn-circle btn-sm">Green</button>
<button type="button" class="btn btn-danger btn-circle btn-sm">Red</button>
<button type="button" class="btn btn-warning btn-circle btn-sm">Yellow</button>
<button type="button" class="btn btn-light btn-circle btn-sm">White</button>
<button type="button" class="btn btn-dark btn-circle btn-sm">Black</button>
</div>
I have issues with rendering some elements in Google Chrome. When I test the code with Firefox or Edge, everything is fine. It seems like Chrome computes a smaller width for "col-sm-1" or it is ignoring the padding.
I have the following html:
/*dropdown size*/
.dropdown-sm {
font-size: 1.25rem;
}
/* Custom dropdown */
.custom-dropdown {
position: relative;
display: inline-block;
vertical-align: middle;
margin-right: 10px;
/* margin: 10px; */
}
.custom-dropdown select {
background-color: #00c292;
color: #fff;
font-size: inherit;
padding: .5em;
padding-right: 2.5em;
border: 0;
margin: 0;
border-radius: 3px;
text-indent: 0.01px;
text-overflow: '';
-webkit-appearance: button;
}
.custom-dropdown::before,
.custom-dropdown::after {
content: "";
position: absolute;
pointer-events: none;
}
.custom-dropdown::after {
content: "\25BC";
height: 1em;
font-size: .625em;
line-height: 1;
right: 1.2em;
top: 50%;
margin-top: -.5em;
}
.custom-dropdown::before {
width: 2em;
right: 0;
top: 0;
bottom: 0;
border-radius: 0 3px 3px 0;
}
.custom-dropdown select[disabled] {
color: rgba(0, 0, 0, .3);
}
.custom-dropdown select[disabled]::after {
color: rgba(0, 0, 0, .1);
}
.custom-dropdown::before {
background-color: rgba(0, 0, 0, .15);
}
.custom-dropdown::after {
color: rgba(0, 0, 0, .4);
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="checkbox.css">
</head>
<body>
<main role="main">
<div id="boottom-page" class="container-fluid">
<div class="row">
<div class="col-sm-1">
<span class="custom-dropdown dropdown-sm">
<select data-name="change-role">
<option>Change role to...</option>
<option>User</option>
<option>Author</option>
<option>Admin</option>
</select>
</span>
</div>
<div class="col-sm-2">
<div>
<div>
<button type="button" class="btn btn-info">Change </button>
<button type="button" class="btn btn-info">Delete</button>
</div>
</div>
</div>
</div>
</div>
</main>
</body>
</html>
Both Firefox and Edge render them just fine:
but Chrome breaks the layout:
What can I do to fix the layout issues for Chrome?
Tested your code in Firefox and Chrome. They are nearly looking the same, nothing is breaking the layout.
But on your screenshot they are on different sizes.
I think there are different zoomlevels set in your browsers. Please
check if both are on 100%;
To avoid Chrome breaks the layout, add min-width to col-sm-1 and col-sm2.
HTML with new classes: dropdown-container and button-container
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="checkbox.css">
</head>
<body>
<main role="main">
<div id="boottom-page" class="container-fluid">
<div class="row">
<div class="col-sm-1 dropdown-container">
<span class="custom-dropdown dropdown-sm">
<select data-name="change-role">
<option>Change role to...</option>
<option>User</option>
<option>Author</option>
<option>Admin</option>
</select>
</span>
</div>
<div class="col-sm-2 button-container">
<div>
<div>
<button type="button" class="btn btn-info">Change </button>
<button type="button" class="btn btn-info">Delete</button>
</div>
</div>
</div>
</div>
</div>
</main>
</body>
</html>
CSS
.dropdown-container {
min-width: 130px;
}
.button-container {
min-width: 230px;
}
I try to make a tag list (like in stackoverflow) using a bootstrap 3 input group.
The result should look similar to this with a full height button on the right:
The base for my considerations looks like this:
<div class="container-fluid">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
Here is my attempt to make a tag list out of it (please note that it should have multiple lines)
HTML:
<div class="container-fluid">
<div class="input-group">
<div class="form-control">
<ul>
<li><span class="label label-default">Default</span></li>
<li><span class="label label-primary">Primary</span></li>
<li><span class="label label-success">Success</span></li>
... even more labels ...
<li><span class="label label-default">Default</span></li>
<li><span class="label label-primary">Primary</span></li>
<li><span class="label label-success">Success</span></li>
</ul>
<input type="text">
</div>
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
CSS:
ul {
padding-left: 0;
display: inline;
list-style-type: none;
}
li {
display: inline-block;
}
Running demo in fiddle
However, that doesn't work as expected.
To create the tag portion, you can use bootstrap-tagsinput by Tim Schlechter and then style it similar to Bootstrap's Input Group with some custom styling like this:
Demo in jsFiddle & Stack Snippets
.input-group .bootstrap-tagsinput {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
width: 100%
}
.input-group-btn {
height: 0px;
}
.input-group-btn .btn {
height: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.js"></script>
<div class="input-group">
<input type="text"
class="bootstrap-tagsinput form-control"
data-role="tagsinput"
value="Amsterdam,Washington,Sydney,Beijing,Cairo" />
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
Dismissable Alert
If you're just trying to style a removable element, you can do that similar to Bootstrap's Dismissable Alert, with some custom styling which will look like this:
Demo in jsFiddle & Stack Snippets:
.alert.alert-tag {
display: inline-block;
padding: 5px;
padding-bottom:2px;
margin: 5px;
}
.alert-tag.alert-dismissible {
padding-right: 25px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<div class="alert alert-warning alert-dismissible fade in alert-tag" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
Label
</div>
You need edit your item for something like this:
<span class="tag label label-primary">Primary<span data-role=
"remove"></span></span>
Add this to your css:
.bootstrap-tagsinput {
background-color: #fff;
border: 1px solid #ccc;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
display: inline-block;
padding: 4px 6px;
margin-bottom: 10px;
color: #555;
vertical-align: middle;
border-radius: 4px;
max-width: 100%;
line-height: 22px;
cursor: text;
}
.bootstrap-tagsinput input {
border: none;
box-shadow: none;
outline: none;
background-color: transparent;
padding: 0;
margin: 0;
width: auto !important;
max-width: inherit;
}
.bootstrap-tagsinput input:focus {
border: none;
box-shadow: none;
}
.bootstrap-tagsinput .tag {
margin-right: 2px;
color: white;
}
.bootstrap-tagsinput .tag [data-role="remove"] {
margin-left: 8px;
cursor: pointer;
}
.bootstrap-tagsinput .tag [data-role="remove"]:after {
content: "x";
padding: 0px 2px;
}
.bootstrap-tagsinput .tag [data-role="remove"]:hover {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.bootstrap-tagsinput .tag [data-role="remove"]:hover:active {
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
And... add bootstrap-tagsinput to your from-group before ul:
<div class="form-control bootstrap-tagsinput">