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.:

Currently, it looks like this:

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

What could be causing the issue with my Date and Time input not functioning correctly?

I developed a React frontend application styled with Material UI design. The issue I am facing is that after adding the Date and Time component styling to the form, it is unable to process the "name" value for posting. Specifically, the error message "Ty ...

cssreactjsmaterial-ui

Build a table with consistent columns and flexible rows utilizing CSS and HTML

Just starting out with CSS/HTML and looking for guidance on creating a table with a variable number of rows. Any tips on how to achieve this using CSS? I'm aiming to replicate a table with a similar structure, but struggling to figure out how to defin ...

htmlcss

Dim the entire website

I am attempting to apply a grey overlay across my entire site when a file is dragged in for upload. The drag event and activation of the grey overlay are functioning correctly, but there are specific areas where it does not work as intended. There seems t ...

htmlcss

How can I verify if an SVG file has a reliable source? (having troubles converting SVG to canvas)

While attempting to use an SVG generated by a chart plugin (https://wordpress.org/plugins/visualizer/), I am facing issues retrieving the source of the SVG-image being created. Interestingly, when using other SVGs with the same code, everything works perfe ...

javascriptjqueryhtmlcanvassvg

Utilizing Google Sheets as a secure, read-only database for Angular applications without the need to make the sheet accessible to the

Seeking a way to utilize Google Sheets document as a read-only database for my Angular application, I have attempted various methods. However, the challenge with all these approaches is that they necessitate public sharing of the Sheet (accessible to anyon ...

javascriptangulartypescriptgoogle-sheetsspreadsheet

A step-by-step guide on accessing an API to check the status updates of ongoing API calls

I'm facing an issue with making two API calls concurrently. The goal is to have call X executed first, while Y should run in parallel and keep calling itself recursively until the X API resolves. Both calls should be initiated immediately upon clickin ...

javascriptpromiseasync-await

Exploring angularjs and the concept of variable scoping in relation to

Struggling with variable binding in my angularjs/javascript code for uploading images. Can someone help me out? Here is the snippet of my code: var image_source; $scope.uploadedFile = function(element) { reader.onload = function(event) { image_sourc ...

javascriptangularjs

Using Jquery to bind events for selecting focus in and out

There seems to be an issue with binding jQuery events to a select element. The desired behavior is for the .focus class to be added when the select is clicked. However, the logic breaks when an option is selected from the dropdown. See it in action here: ...

cssfocusjquery

The Splice function is malfunctioning due to issues with the object (the indexOf function is not recognized)

I am currently dealing with an object that looks like this: Object {val1: "Hello", val2: "", dt1: "pilo1", dt2: "pilo2", lo1: "log1"} My goal is to remove any keys within the object that have empty values (""). I attempted the following code snippet: ...

javascriptangularjsforeachsplice

Error: Trying to set a value to an undefined object in the bind() method

I am currently working on implementing a listener for my video player in order to update the input range on some custom controls. However, I have encountered an issue with an error message that states Uncaught ReferenceError: Invalid left-hand side in as ...

javascriptjquery

Extjs: How to Select a Node After Creating a Tree Structure

I am facing an issue with my TreePanel where I want to preselect a specific node when loading it. The nodes are fetched from a remote json file and the tree structure loads correctly. However, the selected node is not getting highlighted and Firebug is sho ...

javascriptajaxextjs

Utilizing an Application Programming Interface in React Native

Recently diving into React Native, I embarked on creating a basic app leveraging the Marvel API along with an API wrapper. My aim is to implement an infinite scroll view using VirtualizedList. Here's where I could use some guidance: What should be pas ...

javascriptreactjsreact-nativeapi

Issue with AngularJS ng-model not updating the value of a hidden input

My goal is to transmit form data using hidden input like this: <input type="hidden" required ng-model="formHolder.template[position].itemKey[itr]" ng-value="[[ formItem ]]" /> The value of formItem can be any string. Issues arise when the strings c ...

javascriptangularjs

What is the best way to add a border to the <map coordinates>?

Is there a way to add a border around the active link section of an image defined by coordinates? I have been able to show an outline when the user clicks using outline-color and href, but now I need a default border around the specified coordinates. I am ...

htmlcssimagemap

The ng-controller directive is not functioning accurately

I attempted to execute the following basic HTML: <!DOCTYPE html> <html ng-app="tempApp"> <head> <script src="js_libs/angular/angular.min.js"></script> <script src="js_libs/angular/bootstrap.js"></script&g ...

javascripthtmlangularjs

Expanded MUI collapsible table squeezed into a single cell

I'm experimenting with using the MUI table along with Collapse to expand and collapse rows. However, I've noticed that when utilizing collapse, the expanded rows get squished into one cell. How can I adjust the alignment of the cells within the p ...

javascriptcssreactjsmaterial-ui

"Using jQuery to dynamically change the src attribute of an iframe, the change persists even after

There's a strange issue bothering me. On a single page, I have a menu and an iframe. Whenever I click on a menu button, the jQuery code changes the src attribute of the iframe. Initially, when the page loads, the iframe is supposed to display "Home". ...

jqueryhtmliframe

Avoiding the default action to submit AJAX form data won't result in any changes to the front end?

Currently, I am working with Flask and have utilized JavaScript to prevent default behavior in order to send all the necessary data through an AJAX request. However, I am facing an issue where although my view contains all the data (verified by console out ...

javascriptpythonjqueryflask

Ways to invoke a prop function from the setup method in Vue 3

I encountered the following code: HTML: <p @click="changeForm">Iniciar sesion</p> JS export default { name: "Register", props: { changeForm: Function, }, setup() { //How do I invoke the props change ...

javascriptvue.jsvue-componentvuejs3vue-props

Personalizing CSS classes in ASP.NET

In the project I'm currently developing, users will have the ability to customize the font color of header titles. These header titles are styled using values from a cssClass, which includes properties such as font-size, font-color, font-weight, and ...

asp.netcss