There is initial space before the list. And the list is scrollable.
The space from the beginning needs to be removed while scrolling. Is it possible to do so using css?
I initially added padding before the list. But the padding is always maintaining it's space.
JSX:
<div class="pt-filter-container">
<div
v-for="(item, index) in items"
:key="index"
class="item"
>
{{ item.label }}
</div>
</div>
CSS:
.filter-container {
display: flex;
width: 30em;
overflow-x: auto;
white-space: nowrap;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
.item {
font-size: 14px;
font-weight: 500;
letter-spacing: 0;
line-height: 16px;
color: #5A6872;
margin-right: 8px;
padding: 8px 12px;
border: 1px solid #chip-grey;
border-radius: 4px;
background-color: #FAFAFA;
position: relative;
}
.active {
background-color: #red;
color: #white;
}
}
It's just i need to add margin before the 1st element instead of container that is containing it.
So the actual code will be -
.pt-filter-container {
display: flex;
width: 30em;
overflow-x: auto;
white-space: nowrap;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
.pt-item {
font-size: 14px;
font-weight: 500;
letter-spacing: 0;
line-height: 16px;
color: #5A6872;
margin-right: 8px;
padding: 8px 12px;
border: 1px solid #pt-chip-grey;
border-radius: 4px;
background-color: #FAFAFA;
position: relative;
&:first-child {
margin-left: 18px;
}
}
.active {
background-color: #pt-red;
color: #pt-white;
}
}
I don't know the exact dom and css structure of your project. But can't you use something like this?
overflow-x: hidden
or
ul > li: first-child {
padding-left: 0;
}
Related
still learning flexbox. I can´t find the reason about how the items on the nav element are not vertically aligned with the h1 text. Would love some help! Link for the codepen at the end.
The expected result should be both the nav and the h1, inside the .main-header, vertically aligned.
HTML:
<div class="container">
<header class="main-header clearfix">
<h1>📘 The Code Magazine</h1>
<nav>
<!-- <strong>This is the navigation</strong> -->
Blog
Challenges
Flexbox
CSS Grid
</nav>
</header>
</div>
CCS:
* {
/* border-top: 10px solid #1098ad; */
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
color: #444;
font-family: sans-serif;
border-top: 10px solid #1098ad;
position: relative;
}
.main-header {
background-color: #f7f7f7;
/* padding: 20px;
padding-left: 40px;
padding-right: 40px; */
padding: 20px 40px;
margin-bottom: 60px;
/* height: 80px; */
}
nav {
font-size: 18px;
/* text-align: center; */
}
h1,
h2,
h3 {
color: #1098ad;
}
h1 {
font-size: 26px;
text-transform: uppercase;
font-style: italic;
}
a:link {
color: #1098ad;
text-decoration: none;
}
a:visited {
/* color: #777; */
color: #1098ad;
}
a:hover {
color: orangered;
font-weight: bold;
text-decoration: underline orangered;
}
a:active {
background-color: black;
font-style: italic;
}
nav a:link {
/* background-color: orangered;
margin: 20px;
padding: 20px;
display: block; */
margin-right: 30px;
display: inline-block;
}
.main-header {
display: flex;
align-items: center;
}
Here is the link for the codepen:
https://codepen.io/Swanbe/pen/OJzpjor
Thanks in advance!
For past 10 minutes, I have been debugging your code.
Wrote another code like this to see if the problem persists. But that was vertically aligned.
So I dug deeper and tried changing and tags. Nothing Great.
....
Until I just removed that blue rubber(Emoji or whatever you call that ) and added a property in nav.
nav {
height: 100px;
display: flex;
flex-direction: row;
align-items: center;}
and that's it.
Try removing that emoji and see if it helps.
I am trying to target a pseudo element I am using to change the width of a border.
I am trying to get rid of the top border (first-child)
But its not working. Is this how you target a pseudo element?
<div class="landingHeaderNav">
Click here
Click here
Click here
</div>
.landingHeaderNav a {
color: #000;
display: block;
text-align: center;
text-transform: uppercase;
text-decoration: none;
}
::before {
content: "";
display: block;
margin: 0 auto;
width: 5%;
border-top: 1px solid #000;
}
:first-child {
::before {
border-top:none;
}
Here is the pen: https://codepen.io/tysonmaynes/pen/JeVrLr
In css you have to use as below set the element before pseudo as .landingHeaderNav a:before:
.landingHeaderNav a {
color: #000;
display: block;
text-align: center;
text-transform: uppercase;
text-decoration: none;
}
.landingHeaderNav a:before {
content: "";
display: block;
margin: 0 auto;
width: 5%;
border-top: 1px solid #000;
}
.landingHeaderNav a:first-child::before {
border-top:none;
}
<div class="landingHeaderNav">
Click here
Click here
Click here
</div>
In sass or scss use:
.landingHeaderNav a {
color: #000;
display: block;
text-align: center;
text-transform: uppercase;
text-decoration: none;
&:before {
content: "";
display: block;
margin: 0 auto;
width: 5%;
border-top: 1px solid #000;
}
&:first-child::before {
border-top:none;
}
}
Alternatively, you can use the negation pseudo-class
.landingHeaderNav a {
color: #000;
display: block;
text-align: center;
text-transform: uppercase;
text-decoration: none;
}
.landingHeaderNav a:not(:first-child)::before {
content: "";
display: block;
margin: 0 auto;
width: 5%;
border-top: 1px solid #000;
}
<div class="landingHeaderNav">
Click here
Click here
Click here
</div>
Hi SO I have what one day might be used on my web page that is a block of tabs (very basic currently) and I want them to be aligned in such a way that there is 5 blocks on the first line and 4 blocks on the second but they both align horizontally to end at the same point (so it doesn't look like one is missing)
here is a link to what I have currently http://jsfiddle.net/xs8d6zuh/2/
html -
<span>twenty letters long</span>
<span>twelve lette</span>
<span>eight123</span>
<span>ten letter</span><br></br>
<span>twenty letters long!</span>
<span>sixteen letters!</span>
<span>1seven</span>
<span>sixsix</span>
CSS -
a {
text-decoration: none;
color: #000000;
border: 2px;
background-color: #f6f0e0;
font-family: Arial;
font-size: 14px;
padding: 6px;
border: 1px solid;
border-color: #d5c898;
display: inline;
width: 123px;
text-align: center;
}
a:hover {
background-color: #000000;
color: #f6f0e0;
}
<div class="container">
Bavaria
twenty letters long
twelve lette
eight123
ten letter
twenty letters long!
sixteen letters!
1seven
sixsix
</div>
CSS
.container {
font-size: 0px;
}
a {
text-decoration: none;
text-align: center;
color: #000000;
background-color: #f6f0e0;
font-family: Arial;
font-size: 14px;
padding: 6px;
border: 1px solid #d5c898;
display: inline-block;
}
a.five {
width: calc(20% - 14px);
}
a.four {
width: calc(25% - 14px);
}
a:hover {
background-color: #000000;
color: #f6f0e0;
}
https://jsfiddle.net/xs8d6zuh/2/
use calc() function
"for first 4 use width:calc(100% / 4);
for remaining 3 use width:calc(100% / 3);"
if u have 7 span elements
Flexbox can do that:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: flex;
flex-wrap: wrap;
}
span {
flex: 1 0 20%;
display: block;
text-align: center;
}
a {
display: block;
text-decoration: none;
color: #000000;
border: 2px;
padding: 6px;
background-color: #f6f0e0;
font-family: Arial;
font-size: 14px;
border: 1px solid;
border-color: #d5c898;
}
a:hover {
background-color: #000000;
color: #f6f0e0;
}
<div class="container">
<span>Bavaria</span>
<span>twenty letters long</span>
<span>twelve lette</span>
<span>eight123</span>
<span>ten letter</span>
<span>twenty letters long!</span>
<span>sixteen letters!</span>
<span>1seven</span>
<span>sixsix</span>
</div>
JSfiddle Demo
I have a css element #main that for some reason is set to 0px x 0px (it was working earlier, I'm not sure what changed.) when #main ul is at 800px x 39px, so therefore the entire element is hidden
Is there a way to have the dimensions of #main automatically change without having to hard-code it in?
I've tried:
overflow: hidden, auto
float: left, center, right
width: 100%
display: block, inline-block, inline
but none of them work.
Here's the link to the html page:
http://goo.gl/Ml2FIo
here's the css code:
/* HEADERS*/
h1 {
margin-top: 80px;
text-align: center;
font-family: Baskerville, 'Baskerville Old Face', 'Hoefler Text', Garamond, 'Times New Roman', serif;
font-size: 50px;
font-weight: 200;
color: #212121;
}
/* MAIN NAVIGATION */
#main {
/*width: 800px;
height: 100px;*/
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
background-color: #fa5858;
position: fixed;
top: 0;
left: 0;
text-align: center;
overflow: auto;
display: inline-block;
}
#main ul {
/*overflow: hidden;*/
margin: 0 auto;
padding: 0;
position: fixed;
width: 800px;
}
#main ul li {
width: 100px;
display: block;
padding: 10px 20px;
text-align: center;
float: left;
list-style: none;
background-color: #FA5858;
border-right: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
}
#main ul li a {
text-decoration: none;
color: #ffffff;
}
/*
#main li a:hover{
opacity: 0.8;
}
*/
/*SIDE NAVIGATION*/
#side {
min-width: 100px;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
background-color: #ffffff;
position: fixed;
top: 0px;
right: 0px;
text-align: center;
overflow: hidden;
margin: 0 auto;
padding: 0;
display: inline-block;
border: 1px solid #fcacac;
padding: 0px 10px;
text-align: center;
float: left;
list-style: none;
}
#side a {
font-size: .75em;
text-decoration: none;
color: #505050;
line-height: 40px;
}
body {
background-image: url("http://commentnation.com/backgrounds/images/argyle_pattern_background_seamless_light_gray.gif");
background-attachment: fixed;
}
/* PARAGRAPH */
section {
background-color: #ffffff;
width: 600px;
margin: 0 auto;
/*margin-: 50px 150px 50px 150px;*/
font-family: Baskerville, 'Baskerville Old Face', 'Hoefler Text', Garamond, 'Times New Roman', serif;
font-size: 1em;
font-weight: lighter;
line-height: 30px;
padding: 20px 50px;
border: 1px solid #fcacac;
text-align: justify;
text-justify: inter-word;
color: #393939;
}
/* FOOTER */
footer {
display: block;
background-color: #ffffff;
padding: 30px 100px;
margin-top: 150px;
position: relative;
/*width: 100%;
bottom: -10px;
left: -10px;*/
border-top: 1px solid #e6e6e6;
}
/* TITLE IMAGE */
#title-img {
/*position: relative;i*/
display: block;
margin-top: 80px;
margin-left: auto;
margin-right: auto;
}
EDIT 1:
I just realized that the #main element is actually visible on a Windows Chrome, but not on Mac Chrome or Safari (which I've been using) while still having the 0px x 0px dimensions.
You can use flex. It's a nice and easy way to set width, margins, paddings for things.
Here's a wonderful "Complete guide to flexbox":
http://css-tricks.com/snippets/css/a-guide-to-flexbox/
You could do something like this:
nav {
display: flex;
flex: 1;
/* you can set some width if you want
width: 400px;
*/
background-color: #eee;
}
nav ul {
margin: 0;
padding: 0;
display: flex;
flex: 1;
list-style-type: none;
background-color: #ddd;
border: 1px solid #00f;
}
nav ul li {
display: flex;
flex: 1;
padding: 5px 10px;
margin-right: 10px;
background-color: #bbb;
border: 1px solid #f00;
}
nav ul li:last-child {
margin-right: 0;
}
<nav>
<ul>
<li>aaaa</li>
<li>bbbb</li>
<li>cccc</li>
<li>dddd</li>
<li>eeee</li>
</ul>
</nav>
You can change width of nav to whatever you like, or not set it at all and give the nav flex: 1 for "100%".
I've been working on my navbar and with the help of this site, managed to find out how to center it using text align. However, there is a weird indent that I cannot account for in my navbar as you can see in the example so when I center it, it's taking the indent into consideration too, so it doesn't look right.
How do I remove this indent and have it centered properly? I'm rather new to this, so advice would be great. Many thanks.
http://jsfiddle.net/f2eNm/
HTML
<div class="links_container">
<div class="nav1">
<ul>
<li>Home</li>
<li>About</li>
<li>Challenges</li>
<li>Progress</li>
<li>Forum</li>
</ul>
</div>
</div>
CSS
*{
margin:0;
}
.links_container {
width: 100%;
height: 25px;
background-color: #33C4AB;
margin-right: auto;
margin-left: auto;
border-bottom-style: double;
border-bottom-width: 2px;
border-color: #000000;
/* [disabled]-webkit-box-sizing: inherit; */
/* [disabled]-moz-box-sizing: inherit; */
/* [disabled]box-sizing: inherit; */
position: absolute;
max-width: 1000px;
}
.nav1 {
display: inline;
float: left;
}
.nav1 ul li {
list-style-type: none;
float: left;
display: block;
}
.nav1 ul li a {
color: #FFFFFF;
text-decoration: none;
background-color: #333333;
display: inherit;
height: 25px;
width: 100px;
text-align: center;
line-height: 25px;
border-left: thin solid #CCCCCC;
}
.noBorder {
border-left-style: none !important;
}
.nav1 ul li a:hover {
background-color: #6B6B6B;
}
.leftedge {
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
.rightedge {
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
You need to change some things.
.nav1
{
text-align: center;
}
.nav1 ul {
margin: 0;
padding: 0;
display: inline-block;
overflow: hidden;
}
http://jsfiddle.net/f2eNm/3/