Brooke  Giles

Brooke Giles

1548820490

Why isn't my position: sticky element sticking in my flexbox container?

I have a container that is set to display: flex. My child element is set to position: sticky with a top set, but the element is not sticking at all, it just continues with the flow of the page. I've tried to set the align-items property to no avail.

What else am I missing to make this stick? It's basically just sticking the sidebar to the top of its column.

.single-casestudy .casestudy-content {
    align-items: flex-start;
}
.row {
    box-sizing: border-box;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex: 0 1 auto;
    -webkit-box-flex: 0;
    flex: 0 1 auto;
    -ms-flex-direction: row;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -1rem;
    margin-left: -1rem;
}
.single-casestudy .results {
    font-size: 24px;
    font-family: "Lato", sans-serif;
    color: #333f48;
    line-height: 1.349;
    text-align: center;
    margin-bottom: 60px;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    align-self: flex-start;
}

@media only screen and (min-width: 62em)
.col-md-4 {
-ms-flex-preferred-size: 33.333%;
flex-basis: 33.333%;
max-width: 33.333%;
}

@media only screen and (min-width: 62em)
.col-md-4 {
box-sizing: border-box;
-ms-flex: 0 0 auto;
-webkit-box-flex: 0;
flex: 0 0 auto;
padding-right: 1rem;
padding-left: 1rem;
}
<div class=“row casestudy-content”>
<div class=“col-xs-12 col-md-4 results”>
content here
</div>
<div class=“col-xs-12 col-md-8 thecontent”>
more content here
</div>
</div>


#html #css #css3

What is GEEK

Buddha Community

Daisy Rees

1548825046

I think your position sticky is working just fine. The demo below shows the first flex-item positioned as sticky, and a lot of content is placed in the second flex-item. Because first flex-item (.results) is positioned to stick at the top of the flex-box, when the user scrolls, the content in .results sticks, but the content in .thecontent scrolls. Once the user scrolls past the end of flex-box, the sticky content will then go off the page because it is stuck to the top of the flex-box.

I changed the col widths of the flex-items and added a filler at the end of the page content for better demonstration purposes in the snippet.

.filler {
  height: 1000px;
}

.single-casestudy .casestudy-content {
  align-items: flex-start;
}

.row {
  /*  box-sizing: border-box; */
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex: 0 1 auto;
  -webkit-box-flex: 0;
  flex: 0 1 auto;
  -ms-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  margin-right: -1rem;
  margin-left: -1rem;
}

.single-casestudy .results {
  font-size: 24px;
  font-family: "Lato", sans-serif;
  color: #333f48;
  line-height: 1.349;
  text-align: center;
  margin-bottom: 60px;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  align-self: flex-start;
  background-color: coral;
}

@media only screen and (min-width: 62em) .col-md-4 {
  -ms-flex-preferred-size: 33.333%;
  flex-basis: 33.333%;
  max-width: 33.333%;
}

@media only screen and (min-width: 62em) .col-md-4 {
  box-sizing: border-box;
  -ms-flex: 0 0 auto;
  -webkit-box-flex: 0;
  flex: 0 0 auto;
  padding-right: 1rem;
  padding-left: 1rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="row single-casestudy">
  <div class="col-6 results">
    Sticky content here
  </div>
  <div class="col-6 thecontent">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus
    vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis
    imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing
    elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula,
    facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae
    dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla
    et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis
    in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis.
    Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque
    enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit
    risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
    imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed
    ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus
    gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum,
    nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent
    convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla
    congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque
    enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit
    risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar
    nibh tempor porta. Cras ac leo purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue
    eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum
    dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio,
    vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus
    interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum.
    Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis
    dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc
    sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.
    Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices
    nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper
    ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Lorem ipsum dolor
    sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum
    augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet
    sed ornare turpis. Donec vitae dui eget tellus gravida venenatis.
  </div>
</div>

<div class="filler"></div>

Christa  Stehr

Christa Stehr

1602964260

50+ Useful Kubernetes Tools for 2020 - Part 2

Introduction

Last year, we provided a list of Kubernetes tools that proved so popular we have decided to curate another list of some useful additions for working with the platform—among which are many tools that we personally use here at Caylent. Check out the original tools list here in case you missed it.

According to a recent survey done by Stackrox, the dominance Kubernetes enjoys in the market continues to be reinforced, with 86% of respondents using it for container orchestration.

(State of Kubernetes and Container Security, 2020)

And as you can see below, more and more companies are jumping into containerization for their apps. If you’re among them, here are some tools to aid you going forward as Kubernetes continues its rapid growth.

(State of Kubernetes and Container Security, 2020)

#blog #tools #amazon elastic kubernetes service #application security #aws kms #botkube #caylent #cli #container monitoring #container orchestration tools #container security #containers #continuous delivery #continuous deployment #continuous integration #contour #developers #development #developments #draft #eksctl #firewall #gcp #github #harbor #helm #helm charts #helm-2to3 #helm-aws-secret-plugin #helm-docs #helm-operator-get-started #helm-secrets #iam #json #k-rail #k3s #k3sup #k8s #keel.sh #keycloak #kiali #kiam #klum #knative #krew #ksniff #kube #kube-prod-runtime #kube-ps1 #kube-scan #kube-state-metrics #kube2iam #kubeapps #kubebuilder #kubeconfig #kubectl #kubectl-aws-secrets #kubefwd #kubernetes #kubernetes command line tool #kubernetes configuration #kubernetes deployment #kubernetes in development #kubernetes in production #kubernetes ingress #kubernetes interfaces #kubernetes monitoring #kubernetes networking #kubernetes observability #kubernetes plugins #kubernetes secrets #kubernetes security #kubernetes security best practices #kubernetes security vendors #kubernetes service discovery #kubernetic #kubesec #kubeterminal #kubeval #kudo #kuma #microsoft azure key vault #mozilla sops #octant #octarine #open source #palo alto kubernetes security #permission-manager #pgp #rafay #rakess #rancher #rook #secrets operations #serverless function #service mesh #shell-operator #snyk #snyk container #sonobuoy #strongdm #tcpdump #tenkai #testing #tigera #tilt #vert.x #wireshark #yaml

How To Center Vertically A Flexbox Container With A Column Of Flex Items

Figure 1, below, shows how the application looks before centering the content with Flexbox. What I want to do, is to center the content section of the web page - that is, everything between the header and footer.

Figure 1

The second picture, figure 2, illustrates what I want to achieve with Flexboox.

Figure 2

The solution

The solution to achieve the result in figure 2 is to use the Flexbox property align-items and set it to center. The code snippet below shows how I solved the issue.

COPY

.main {
  display: flex;
  flex-direction: column;
  align-items: center;
}

Below, you can see the full code used for the webpage. The code is from a Vue component, but it’s mostly HTML and CSS so it should look somewhat familiar. The only exception is the <CourseCard/>, which might look a bit unfamiliar. Think of it as three different divs wrapped inside .main.

#flexbox #css #flexbox container

Lindsey  Koepp

Lindsey Koepp

1603763460

AWS Bottlerocket vs. Google Container-Optimized OS: Which Should You Use and When

What’s the difference between popular Container-Centric OS choices, Google’s Container-Optimized OS, and AWS’s Bottlerocket? The concepts underlying containers have been around for many years. Container technologies like Docker, Kubernetes, and an entire ecosystem of products, as well as best practices, have emerged in the last few years. This has enabled different kinds of applications to be containerized.

Web service providers like Amazon AWS and Google are giving a further boost to container innovation, for enterprises to adopt and use containers at scale. This will help them to reap the benefits containers bring, including increased portability and greater efficiency.

Linux-based OS, AWS Bottlerocket is a new option, designed for running containers on virtual machines (VMs) or bare-metal hosts. In this article, you will learn the core uses and differences between the two open-source OS.

**AWS Bottlerocket **

It is an open-source, stripped-down Linux distribution that’s similar to projects like Google’s Container-Optimized OS. This single-step update process helps reduce management overhead.

_It makes OS updates easy to automate using container orchestration services such as Amazon Elastic Container Service (ECS) and Amazon Elastic Kubernetes Service (EKS). _

**Google Container-Optimized OS **

It’s an OS image for Google Compute Engine VMs that’s optimized for running Docker containers. It allows you to bring up your Docker containers on Google Cloud Platform securely, and quickly. It is based on the open-source Chromium OS project and is maintained by Google.

But before diving into the core differences, let us give you a basic overview of containers, VMs, and container-optimized OS, and its underlying challenges to better understand the differences.

If you are already aware of all the underlying processes of containers, then you can skip to the main differences for AWS Bottlerocket vs Google Container-Optimized OS.

#containers #amazon-aws #google-cloud #container-optimized-os #aws-containers #docker-containers #linux-based-os #orchestration

CSS Flexbox: What I learned from Flexbox Zombies

I started playing an educational game called Flexbox Zombies, which has been teaching me the fundamentals of flexbox in a fun way. In the game, you fight zombies by using features of flexbox to aim your crossbow at the zombies.

MDN docs explain flexbox as:

a one-dimensional layout method for laying out items in rows or columns. Items flex to fill additional space and shrink to fit into smaller spaces.

The Flexbox Zombies game teaches flexbox through a story, with each lesson building on the previous, thus reinforcing the fundamentals of flexbox in a fun and effective way.

#flexbox #css #css flexbox #flexbox zombies

Brooke  Giles

Brooke Giles

1548820490

Why isn't my position: sticky element sticking in my flexbox container?

I have a container that is set to display: flex. My child element is set to position: sticky with a top set, but the element is not sticking at all, it just continues with the flow of the page. I've tried to set the align-items property to no avail.

What else am I missing to make this stick? It's basically just sticking the sidebar to the top of its column.

.single-casestudy .casestudy-content {
    align-items: flex-start;
}
.row {
    box-sizing: border-box;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex: 0 1 auto;
    -webkit-box-flex: 0;
    flex: 0 1 auto;
    -ms-flex-direction: row;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -1rem;
    margin-left: -1rem;
}
.single-casestudy .results {
    font-size: 24px;
    font-family: "Lato", sans-serif;
    color: #333f48;
    line-height: 1.349;
    text-align: center;
    margin-bottom: 60px;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    align-self: flex-start;
}

@media only screen and (min-width: 62em)
.col-md-4 {
-ms-flex-preferred-size: 33.333%;
flex-basis: 33.333%;
max-width: 33.333%;
}

@media only screen and (min-width: 62em)
.col-md-4 {
box-sizing: border-box;
-ms-flex: 0 0 auto;
-webkit-box-flex: 0;
flex: 0 0 auto;
padding-right: 1rem;
padding-left: 1rem;
}
<div class=“row casestudy-content”>
<div class=“col-xs-12 col-md-4 results”>
content here
</div>
<div class=“col-xs-12 col-md-8 thecontent”>
more content here
</div>
</div>


#html #css #css3