Layout Issue: Default GitHub Links, Print Option and Table of Contents misplaced at bottom instead of right side on multiple pages

[tamilselvan1102]

This is a Bug Report

Problem: In the [kustomization] page, [Edit this page, Create child page, Create an issue, Print entire section] links are displaying in the bottom of the page.

Proposed Solution: It should be displayed in upper right of the page.

Page to Update: https://kubernetes.io/docs/tasks/manage-kubernetes-objects/kustomization/

[tamilselvan1102]

/language en

[aj11anuj]

This issue is legit and present in most of the pages but the link provided in issue is wrong. This issue is present in these below pages:- Declarative Config Page Imperative Command Page Imperative Config Page Update API object KubeCtl Page Volume Page Persistent Volume Page Projected Volume Page Volume Snapshots Page Container Runtime Page Installing Kubeadm Page Troubleshooting Kubeadm Page Creating a cluster with Kubeadm Page Customizing Components with Kubeadm Page Configuring each Kubelet Kubeadm Page Installing Kubernetes with KOps Page Validate node setup Page Enforcing POD security Page Garbage Collection Page Mixed version proxy Page Container Images Page Runtime Class Page POD disruption Page ReplicaSet Page Network Policies Page Configuration best practices Page Configuration secrets Page Resource management for PODS and Containers Page Organizing Cluster access using KubeConfig files Page POD security standards Service account Page POD topology spread constraint Resource bin packing Page POD priority preemption Page Priority eviction Page Cluster administartion flow control Page Windows user guide Page Device plugins Page Custom resources Page Install KubeCtl Windows Page Kubeadm certificate management Page Kubeadm package repo Page Changing container runtime on a node from Docker engine to Containerd Page Troubleshooting CNI related errors Page Check whether dockershim removal affects you Page Migrating telemetry and security agents from Dockershim Memory default namespace Page CPU default namespace Page Memory constraint namespace Page CPU constraint namespace Page Calico network policy Page Extended resource node Page DNS horizontal autoscaling Page DNS custom nameserver Page Declare network policy Page Encrypt data Page Limit storage consumption Page Running K8s node components as non-root user Page Securing a cluster Page Kubelet Config file Page Share a cluster with Namespace Page kms provider Page Verify signed artifacts Page Assign memory resources to PODS and Containers Page Assign CPU resources to PODS and Containers Page Configure GMSA for PODS and Containers Page Creating HostProcess POD for Containers Page Configure quality service POD Page Configure Persistent volume storage Page Configure security context Page Configure service accounts for storage Pull image private repositry Page Configure Liveness, Readiness for startup probes Page Assign PODS to Containers Configure POD configuremap Page Enforce POD security standards Page Migrate from psp Page Debug services Page Debug running PODS Get a shell to a running container Monitor node health Page Developing and debugging services Page Declarative config Imperative commands Page Imperative config Page Update API object KubeCtl Patch Page Define command argument container Page Define interdependent environment variables Page Expose POD info Page Distribute credentials securely Page Run stateless app deployment Page Horizontal POD autoscaling Page Horizontal POD autoscaler walkthrough Page Configure pdb Page POD failure policy Page Configure access to multiple clusters Page Service access application cluster Page Create an external load balancer Page List all running container images Page Configure aggregation layer Page Custom resource defining version Page Set up extensive API server Page Configure multiple schedulers Page Certificate rotation Page Manage tls in a cluster Page Update daemonSet Page Rollback daemonSet Page Configure java microservices Page Configuring redis Page nss level pss page Restrict a containers syscall Page Expose external IP address Stateless apllication guestbook page Deploying Wordpress and MySql with persistent volume page Server side apply page Authentication page Admission controller page Extensible admission controller page Authorization overview page Using rbac authorization page Well-known labels page Audit annotation page Most of the pages and sub-sections under "Kubernetes API" section and many more pages.

In a nutshell, These pages should look like this but are looking like this. That part at right side is absent in these pages.

/area web-development

[aj11anuj]

/priority backlog

[dipesh-rawat]

/retitle Layout Issue: Default GitHub Links, Print Option and Table of Contents misplaced at bottom instead of right side on multiple pages

[dipesh-rawat]

/remove-language en /remove-priority backlog

[dipesh-rawat]

When the side navigation panel is resized to a smaller size or if the page is zoomed out sufficiently, the page layout reverts to its expected appearance (refer screenshots).

It appears that this issue could also be inadvertently caused due to PR #41695, which aimed to added a splitter for resizing the left navigation panel.

• Zoomed out

• Navigation panel resized

[dipesh-rawat]

/priority important-soon /triage accepted

[sftim]

@tamilselvan1102 a screenshot showing the problem would help us track this work. Would you be willing to add one?

[tamilselvan1102]

wrong layout

[tamilselvan1102]

Expected Layout

[tamilselvan1102]

if you zoom out to 80%. it displaying as expected

[priyanshuchaudhary53]

Problem Explanation:

File location: layouts\docs\baseof.html

<div id="maindoc" class="split pl-md-5 row">
  <main role="main" class="col-xl-8"></main>
  <div class="d-none d-xl-block td-toc d-print-none"></div>
</div>

The issue encountered is related to the responsive behavior of Bootstrap's grid system. In the HTML code, we have a parent <div> with the class split, and inside it, you have two child elements:

The first child <div> with the class col-xl-8 is set to occupy 8 out of 12 columns on extra-large screens (col-xl-8). This means it takes up a significant portion of the available width.

The second child <div> has the classes d-none d-xl-block td-toc d-print-none. The d-none class is used to hide the element by default on all screen sizes. However, it is displayed as a block element (visible) on extra-large screens due to the "d-xl-block" class.

Issue:

When the content inside the second child <div> exceeds a certain width, it causes the second <div> to be displayed below the first <div> on extra-large screens. This stacking behavior is a default behavior in Bootstrap's responsive grid system, designed to create a single-column layout on smaller screens.

Solution:

To prevent the second <div> from stacking below the first one on extra-large screens, we need to add the col-xl-4 class to the second <div>.

Explanation:

The col-xl-4 class instructs Bootstrap to allocate 4 out of 12 columns to the second <div> on extra-large screens. This ensures that both the first and second <div> elements fit side by side within the available width on extra-large screens. As a result of adding the col-xl-4 class, the second <div> now occupies 4 columns, and the first <div> occupies 8 columns on extra-large screens. This adjustment prevents the second <div> from stacking below the first one when its content exceeds a certain width, and it maintains a side-by-side layout on extra-large screens.

[priyanshuchaudhary53]

This issue is fixed in the recent commit of PR #42943

[dipesh-rawat]

Thanks for the fix @priyanshuchaudhary53

[dipesh-rawat]

Looks like the issue reported here is fixed via #42943

/close

[k8s-ci-robot]

@dipesh-rawat: Closing this issue.

In response to [this](https://github.com/kubernetes/website/issues/42947#issuecomment-1712139558): >Looks like the issue reported here is fixed via #42943 > >/close Instructions for interacting with me using PR comments are available [here](https://git.k8s.io/community/contributors/guide/pull-requests.md). If you have questions or suggestions related to my behavior, please file an issue against the [kubernetes/test-infra](https://github.com/kubernetes/test-infra/issues/new?title=Prow%20issue:) repository.