The elements from base.html and the extended page are now placed on separate rows rather than on the same row

I'm relatively new to HTML, Jinja, and CSS and have been playing around with creating a webpage that retrieves data from a sqlite3 database. As of now, I am facing some challenges regarding formatting.

To assist with table formatting and overall aesthetics, I have integrated Bootstrap into my project.

In my setup, I have a base.html file and a page.html file. The structure of the base.html file is as follows:


    </style>
</head>
<body>
<div class="centered-wrapper">Nexus Gamification</div>
<div>Points
<li><a href="/teams">Team Points</a></li>
<li><a href="/individual">Individual Points</a></li>
    <ul>
       <a href="/indivConnect">Connect</a>
       <a href="/indivDevelop">Develop</a>
       <a href="/indivLead">Lead</a>
       <a href="/indivLearn">Learn</a>
    <ul>
</div>
<hr>
{% block content %}{% endblock %}

Following this, the structure of my page.html is as below:

{% extends "base.html" %}
{% block content %}
<body>
     <div class="col-md-6 col-md-offset-3">
     <table class="table table-striped" align="center">
     ... 
     </table>
     </div>
{% endblock %}

However, instead of the table being displayed directly adjacent to the links on the page, it appears below and slightly to the right of them. My intention was to create a sidebar layout for the links, but it seems like the elements are being placed on separate rows. Can anyone provide insights into why this might be happening? Could it be due to having a body tag in both the base.html and the 'extended' page?

Answer №1

From my understanding, the {% block %} you use appears below the links.

If that is accurate, remove the <hr> tag that creates a line break. This way, all content under the <hr> tag will be positioned beneath it. Also, using two body tags is unnecessary; there should only be one body tag.

  1. Erase the <hr>

  2. In THE BLOCK, delete the <body> tag

  3. Insert a </body> immediately after the

    {% block content %}{% endblock %}
    .

Divide the sections for clarity.

<body>
    <div class="centered-wrapper">Nexus Gamification</div>
<div>Points
<li><a href="/teams">Team Points</a></li>
<li><a href="/individual">Individual Points</a></li>
<ul>
   <a href="/indivConnect">Connect</a>
   <a href="/indivDevelop">Develop</a>
   <a href="/indivLead">Lead</a>
   <a href="/indivLearn">Learn</a>
<ul>
</div>
<li><a href="/events">Past Events</a></li>

{% block content %}{% endblock %}

</body>

{% extends "base.html" %}
{% block content %}
     <div class="col-md-6 col-md-offset-3">
      <table class="table table-striped" align="center">
       ... 
      </table>
     </div>
{% endblock %}

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

Guide on transferring an HTML template to a React component using props

I've created a React popup window component that accepts templates via props. Check out this example of how the popup is used: popup = ( <div> <Popup text='This is a popup' popupEl={ popupEl } /> < ...

What could be causing the lack of functionality for my button click in my JavaScript and HTML setup?

Currently, I am attempting to implement a functionality where I have two buttons at the top of my page. One button displays "French" by default, and when I click on the "English" button, it should replace the text with "French" using show and hide methods. ...

Enhancing File Uploads with Vuetify

For my Vue.js project, I am attempting to upload a file using Vuetify and then store that uploaded file in my data object. This is the HTML code: <input id="file-upload" type="file" @change="onFileChange"> Within my methods section, I have the fol ...

Using AJAX in a loop iteration

I am struggling to grasp AJAX and its application for my specific needs. I am required to incorporate ajax calls within a foreach loop in my project. The challenge arises when contemplating the scenario where using PHP calls could result in all actions fir ...

jquery is unable to fetch the input value from a dynamically generated field inside a function

Something peculiar keeps happening to me when I utilize jQuery, which is different from what others have encountered in the forums. Whenever I make an ajax call and generate an input element (on success), like so: Start Date: <input type="text" id="gr ...

Is it possible to use JavaScript to forcefully transition a CSS keyframe animation to its end state?

One dilemma I am facing involves CSS keyframe animations triggered by scroll behavior. When users scroll too quickly, I would like JavaScript to help send some of the animations to their 'finished/final' state, especially since the animations bui ...

Is using transform scale in CSS to scale SVG sprites a valid method of scaling?

I have been using an SVG sprite as a CSS background image in this manner: .icon-arrow-down-dims { background: url("../sprite/css-svg-sprite.svg") no-repeat; background-position: 16.666666666666668% 0; width: 32px; height: 32px; display: inline-b ...

Tips for sending data to CSS in Angular

I have an Angular application where I need to calculate the width of an element and store it in a variable called finalposition. Then, I want to move this element to the left by (finalposition)px when hovering over it. How can I achieve this styling effect ...

Incorporate PHP form and display multiple results simultaneously on a webpage with automatic refreshing

I am currently in the process of designing a call management system for a radio station. The layout I have in mind involves having a form displayed in a div on the left side, and the results shown in another div on the right side. There are 6 phone lines a ...

"Eliminating the visual feedback frame from your Samsung Galaxy browser: A step-by-step

After clicking a link, a dark orange frame is displayed around it. This frame can sometimes persist until the next scroll or screen touch. Similarly, when other elements are clicked, an orange frame may appear, adjusting in size to reflect the element cli ...

Is there a way to apply styles to a checkbox's child element depending on the checkbox's state without relying on ternary operators within Styled Components?

I am currently working on styling this component using Styled Components, but I feel like my current approach is a bit of a hack. What would be the best practice for incorporating Styled Components to style this component effectively? If I were to use Pla ...

discovering obscured information using jquery

I am working on a code snippet where I need to hide the detailed content for display purposes and only show it during printing: <div> <ul> <li> <span style="font-size: 1.25em;"> <strong> ...

Failure of Highchart's resizing mechanism when hidden

Check out this AngularJS demo app featuring Highcharts: http://jsfiddle.net/dennismadsen/dpw8b8vv/1/ <div ng-app="myapp"> <div ng-controller="myctrl"> <button ng-click="hideView()">1. Hide</button> <button ng ...

Switch between various components using multiple buttons in Next.js

I am in the process of creating a component that will display different components depending on which button the user selects. Here are the available “pages”: ` const navigation = [ { name: "EOQ", return: "<EOQgraph />" }, { nam ...

Donut chart in SVG format failing to display properly in email messages

Here is an example of a donut chart that I am working with: <div class="donut-chart" style="position: relative;"> <svg width="100%" height="100%" viewBox="0 0 42 42" class="donut"> ...

Angular app encounters issue with Firebase definition post Firebase migration

Hey there, I'm currently facing an issue while trying to fetch data from my Firebase database using Angular. The error message 'firebase is not defined' keeps appearing. var config = { databaseURL: 'https://console.firebase.google. ...

Creating a dynamic rectangular design with a taller height than width, featuring perfectly centered content

My website needs a responsive rectangle where I can easily adjust the height and width. However, when I try to rotate the rectangle, the content also rotates 90 degrees. Can anyone help me with this issue? Thank you in advance for any assistance. Snippet ...

Leveraging Jquery for Enhanced Bootstrap Functionality in Angular 2

Recently diving into NG2, I've been experimenting with adding Slide Up/Down effects to the default Bootstrap 4 Dropdown component. The Bootstrap dropdown component comes equipped with two jQuery Listeners, $(el).on('show.bs.dropdown') and $ ...

Tips for using jQuery to identify the most recently modified row in an HTML table

Is there a way to identify the most recently modified (either newly added or changed) row in an HTML table? ...

Resizing the background while scrolling on a mobile web browser

My website background looks great on desktop, but on mobile (using Chrome) the background starts to resize when I scroll, mainly due to the browser search bar hiding and reappearing upon scroll. Is there a way to prevent my background from resizing? Check ...