Issues with CSS properties not functioning correctly within the class.col function

When attempting to apply specific CSS properties to a particular area (e.g., "Dashboard") by assigning the class name "main" to the div.col function in the HTML, I encountered an issue where the CSS property applied affected the entire page. The following is my HTML code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" href="css/adminboard.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/js/all.min.js">
    <link href="https://fonts.googleapis.com/css?family=Rosario&display=swap" rel="stylesheet">

    </head>
  <body>
    <title>Admin Dashboard</title>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark navbar-fixed-top">
  <a class="navbar-brand" href="#">Admin Dashboard</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#"><i class="fas fa-tachometer-alt"></i> Dashboard</a>
      </li>
      <li class="nav-item"><a class="nav-link" href="#"><i class="fas fa-cogs"></i> Settings</a></li>
      <li class="nav-item"><a class="nav-link" href="#"><i class="fas fa-user"></i> Profile</a></li>
      <li class="nav-item"><a class="nav-link" href="#"><i class="fas fa-question-circle"></i> Help</a></li>


    </ul>
    <ul class="navbar-nav ml-auto">

    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
     <li class="nav-item"><a class="nav-link" href="#"><i class="fas fa-user-plus"></i> Add Users</a></li>
      <li class="nav-item"><a class="nav-link" href="#"><i class="far fa-copy"></i> Add Categories</a></li>


    </ul>
  </div>
</nav>

<!--navbar ends here-->

<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 ">
 <ul class="nav flex-column sidebar">
  <li class="nav-item"><a class="nav-link active" href="#">Reports</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Stats</a> </li>
  <li class="nav-item"><a class="nav-link" href="#">Graphs</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Users</a></li>
</ul>

<ul class="nav flex-column sidebar">
<li class="nav-item"><a class="nav-link active" href="#">Reports</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Revenues</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Countries</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Spammers</a></li>
</ul>
</div>
           <div class="col-sm-9 col-md-10 main">

           <h1 class="page-header">Dashboard</h1></div>

    </div>
</div>

    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>


</body>
</html>

CSS code:

[![body{
        font-family: 'Rosario' ;

}

.sidebar{
    margin:10px -8px 20px 20px; 
}

.sidebar>li>a{
    padding:  20px 20px;
}

.main{
    margin-top: 80px;
    background-color: lightgray;

}]

I want my page to look exactly like this.: https://i.sstatic.net/odqIK.png

Currently, it looks like this: https://i.sstatic.net/PgL6l.png

javascripthtmlcssbootstrap-4

Answer №1

Not entirely certain of the best approach for moving forward with this task. Considering your request, here is one way to proceed: Simply include your h1 without wrapping it in a div:

<h1 class="page-header">Dashboard</h1></div>

No need to enclose it in a div tag.

Following that, you can assign classes to your h1 element, set a max-height using CSS properties, and adjust its positioning by adjusting padding values. HTML:

    <!--navbar ends </here>-->
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3 col-md-2 ">
            <ul class="nav flex-column sidebar">
                <li class="nav-item"><a class="nav-link active" href="#">Reports</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Stats</a> </li>
                <li class="nav-item"><a class="nav-link" href="#">Graphs</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Users</a></li>
            </ul>

            <ul class="nav flex-column sidebar">
                <li class="nav-item"><a class="nav-link active" href="#">Reports</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Revenues</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Countries</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Spammers</a></li>
            </ul>
        </div>
        <h1 class="page-header col-sm-9 col-md-10 main">Dashboard</h1>
    </div>
</div>

CSS:

<style>
body {
    font-family: 'Rosario';

}

.sidebar {
    margin: 10px -8px 20px 20px;
}

.sidebar>li>a {
    padding: 20px 20px;
}

.main {
    padding-top: 30px;
    max-height: 100px;
    background-color: lightgray;

}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The Heatmaps.js script encountered an Uncaught ReferenceError

I am currently utilizing the heatmaps.js library along with the Google Maps API to showcase a map with a heatmap overlay. So far, I have successfully displayed the map and retrieved the necessary data from the database. However, I'm encountering an is ...

javascriptphpjqueryapiheatmap

Is it possible to identify horizontal scrolling without causing a reflow in the browser?

If you need to detect a browser scroll event on a specific element, you can use the following code: element.addEventListener('scroll', function (event) { // perform desired actions }); In order to distinguish between vertical and horizontal ...

javascripthtmlreflow

Using Selenium Webdriver to initiate the play function of a video by clicking on the control

Is there a way to play the video on this page by clicking the play button? I noticed a 'playpause' control in the JavaScript, but I'm unsure how to activate it. <div id="videoModal" class="reveal-modal expand open" style="display: block ...

javajavascriptseleniumselenium-webdriverwebdriver

Linking Google Form Data to a MongoDB Database

Looking to integrate Google form with mongodb for data collection. Need help setting it up using NodeJs. Any advice on how to approach this? ...

javascriptnode.jsmongodbmongoosegoogle-forms

Unlock the secrets of programming with the must-have guide to mastering variables

As a newcomer to the world of programming, I may be jumping ahead by asking this question too quickly. While reading a book, I came across something that confused me. Why is it necessary to create a variable for the password box element? Wouldn't the ...

javascripthtml

Why is this component not functioning properly?

I am struggling with making a function to add a component dynamically when I click a button, similar to the code below. However, my attempt at creating a separate method for adding the component instead of using an inline expression is not working. Can som ...

javascriptvue.js

Dynamically populate 7 select boxes with options using JQuery

I have a webpage that includes 14 different dropdown menus, one for each day of the week (Monday to Sunday). Each day has two dropdowns: one for opening time and one for closing time. I used jQuery to populate all 14 dropdowns with a pre-defined list of ho ...

javascriptjqueryhtml

Chrome causing a background-size cover issue

I encountered an issue with this code. It runs smoothly on Firefox 50, but encounters failures on Chrome Version 54.0.2840.99 m (64-bit) on Windows. .test { background: url(datas/images/3.jpg) no-repeat center center fixed; background-size: cover ...

css

Establishing the module exports for the NextJS configuration file

I have explored different solutions for adding multiple plugins to the next.js config file, with composition being the suggested method. However, I am encountering issues with this approach. const Dotenv = require('dotenv-webpack'); const withSt ...

javascriptreactjsnext.js

Webpack doesn't seem to be able to display custom fonts

I have a small project in progress using webpack. One of the tasks I'm facing is loading custom fonts. I followed the official tutorial here, where it explains how to handle assets in webpack configuration. My custom fonts are located within the src ...

javascriptcsswebpackfonts

Adjust the filter settings in angularJS

I am working on a request page with three buttons: Open, Close, and All. Currently, when the page is opened, it displays the 'All' requests by default. However, I want to change this to show the 'Open' requests instead. I want users to ...

htmlangularjstwitter-bootstrapangularjs-filterservicenow

Struggling to loop through a child in Firebase real-time database?

I'm struggling to retrieve a nested child from my database with the following structure https://i.stack.imgur.com/ZDs38.png I am attempting to get the URI from the Gallery object. When I log in, I can see this in the console https://i.stack.imgur.c ...

javascriptreactjsfirebasereact-nativefirebase-realtime-database

CSS stylized horizontal navigation bar completed

* { border: 0px; margin: 0px; padding: 0px; } body { background-color: #FFC; } #wrapper { width:70%; margin: 0% auto; } #header { background-color: #C1D1FD; padding: 3%; } #nav { clear:both; padding: auto; position:inherit; background-color:#F0D5AA; wid ...

htmlcss

Tips for evaluating an array of objects in JavaScript

Welcome to the world of coding! Here's a scenario with an array: [ { "question1": "Apple", "question2": 5, "question3": "Item 1" }, { "question1": ...

javascriptarraysjsonchart.jssurveyjs

Just starting out with d3, any easy methods to learn?

As a developer with a few years of experience under my belt, I recently discovered d3 and was really impressed by its capabilities. However, it seems like d3 doesn't have the same level of popularity as jquery, making it harder to find comprehensive d ...

javascriptjquerysvgd3.js

Using AJAX to dynamically load Javascript

I came across this interesting code snippet: <script type="text/javascript" language="javascript"> $(function(){ $(window).hashchange( function(){ window.scrollTo(0,0); var hash = location.hash; if (hash == "") { hash="#main"; } ...

phpjavascripthtml

Having trouble with Angular NgbModal beforeDismiss feature?

My goal is to add a class to the pop up modal before closing it, and then have it wait for a brief period before actually closing. I've been trying to do this using the beforeDismiss feature in the NgbModalOptions options in Angular Bootstrap's d ...

javascriptangularbootstrap-4ng-bootstrap

What could be the reason behind the ineffectiveness of my recently acquired Google Maps API key

For years, I had a function working with the Google API flawlessly. However, after obtaining a new API key, everything seems to have gone haywire. The issue is that there is no output after the `alert(address)` line because the code from `geocoder.geocod ...

javascriptjquerygoogle-mapsgoogle-maps-api-3google-api

Avoid displaying the HTML formatting whitespace on the webpage

I'm working with cakephp's helper to generate spans using the code below: <div id="numberRow"> <?php echo $this->Paginator->numbers(array('class' => 'numbers', 'separator' => '', & ...

phphtmlcakephp

Troubleshooting and Fixing AJAX Calls

When working with Asynchronous JavaScript, it is common to encounter issues where we are unsure of the posted request and received response. Is there a simple method for debugging AJAX requests? ...

javascriptajaxdebugging