Currently, I am developing a blog and aiming to position the blog posts on the left side while having the admin panel on the right. Essentially, I want both user and developer interfaces to be fully functional on one page. The developer side should be scrollable while the user interface remains fixed.
Below is the CSS code:
.h-100-vh {
height: 100vh !important;
overflow-y: hidden;
}
.scroll-y {
overflow-y: auto !important;
overflow-x: hidden !important;
}
.rounded-xxlg-top {
border-top-left-radius: 14px;
border-top-right-radius: 14px;
}
.rounded-xxlg-bottom {
border-bottom-left-radius: 14px;
border-bottom-right-radius: 14px;
}
.nav-tabs .nav-link.active {
color: white !important;
background-color: #007bff !important;
}
Here is a snippet of the HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Wicked Blog</title>
<link rel="stylesheet" href="assets/bootstrap-4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/custom.css">
</head>
<body>
<div class="container-fluid" style="position: sticky;">
<div class="row mt-3">
<div class="col-md-8 blog-left">
<div class="shadow-sm">
<div class="header py-3 bg-primary text-center rounded-xxlg">
<img src="assets/media/images/brand/logo/logoBW.png" width="140" alt="" class="img-fluid">
<h1 class="text-white mt-3">Welcome to <span>Wicked Blog</span></h1>
</div>
<main class="py-5">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p><!-- Placeholder text, shortened for brevity -->
</main>
</div>
</div>
<div class="col-md-4 blog-right shadow-lg">
<!-- Tab panes -->
<div class="tab-content px-3 py-4">
<?php if(isset($_GET['avw']) && $_GET['avw'] == 'new-blog'): ?>
<div class="tab-pane active">
<form action="" method="post">
<div class="form-group">
<label>Title</label>
<input type="text" class="form-control" placeholder="Enter Title">
</div>
<div class="form-group">
<label>Content</label>
<textarea name="content" class="form-control" cols="30" rows="5"></textarea>
</div>
<div class="form-group form-check">
<label>Category</label>
<select name="category" id="category" class="form-control form-select">
<option value="">--Pick Category--</option>
<option value="">option</option>
</select>
</div>
<div class="form-group">
<label for="">Cover Image</label>
<input type="file" name="coverImage" class="form-control form-control-file">
</div>
<div class="preview-box p-5 m-5 bg-dark">
</div>
<div class="text-center">
<button type="submit" name="saveBlog" class="btn btn-success">Save</button>
<button type="reset" class="btn btn-danger">Cancel</button>
</div>
</form>
</div>
<?php endif ?>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I have attempted to set a fixed height for the entire page using the overflow-y property and even experimented with the position:fixed attribute, but unfortunately, the entire page remains scrollable.