Is a dynamic canvas possible within an unordered list?

I'm working on creating a draggable list with canvas elements in each list item. I have a functional concept that you can view here: https://codepen.io/Todai/pen/zBmRVk

My main challenge is making it responsive. I have attempted adjusting the widths and heights like this:

#slider {
  width: 100%;
  height: auto;
  overflow: hidden;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

canvas {
    width: 100%;
    height: auto;
}

However, these changes only result in the list becoming vertical and overlapping the second chart on top of the first one. What I actually want is to display the chart next to the first one.

I'm also puzzled as to why the second chart appears slightly higher than the first one; I cannot find any reason for this discrepancy in the .js code.

Any ideas or suggestions?

EDITS:

NOTE: Although the codepen may not adhere to coding standards, please remember that it serves as a proof of concept and not the final code!

javascriptjquerycsstwitter-bootstrap-3responsive-design

Answer №1

I was able to resolve the issue on my own by incorporating a surrounding segment and div elements:

CSS:

#slider { 
  width: 100%;
    overflow: hidden;
}

ul { 
  list-style: none;
  margin: 0;
  padding: 0;
}

.element {
  width: 100%;
  height: auto;
}
.list-element {
  width: 33.333%;
  float: left;
  font-weight: bold;
}

canvas {
  width: 100%;
  height: auto;
  float: left;
}

HTML:

<section>
    <div class="container-fluid">
        <div class="row">
          <div class="col-md-8 col-md-offset-5">
              <div id="slider"> 
                <ul>
                        <div class="element">
                           <li><canvas id="programming"> </canvas>
                           </li>
                        </div>
                        <div class="element">
                           <li>
                           <canvas id="design"> </canvas>
                           </li> 
                        </div>
                        <div class="element">
                           <li> <canvas id="theory"> </canvas> </li>
                       </div>
                   </ul> 
               </div>
           </div>
       </div>
   </div> 
</section>

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

Is there a more efficient algorithm available to solve this problem in a quicker manner?

I'm currently working on iterating through the body tag and all of its nested children. I want to be able to access each child, even if they contain additional children within them. Can anyone offer a more efficient algorithm than the one I came up wi ...

javascriptalgorithmdomoptimization

How to set a default value different from the available options using jQuery

<select id="itemDepartment"> <option value="1">Computer Accessories</option> <option value="2">Laptop</option> </select> the default value in the drop-down list can be set using the selected="selected" attribute. ...

javascriptjqueryhtmlcss

Issue with jQuery animation delay functionality experiencing issues specifically in Google Chrome browser

While browsing through similar questions, I couldn't find one quite like mine where the effect was working on one window but not on a subsequent one. I'm using jQuery library version 3.4.1. The code has been tested and is functioning as expected ...

javascriptjquery

Upgrading to Postgres 9.3 for Improved JSON Handling and Date Object Support

Currently working with PostgreSQL 9.3 and exploring options for utilizing TIMESTAMPTZ as authentic JavaScript date objects. Aware of JavaScript lacking a Date literal notation, I considered '{ "key" : new Date(datevalue) }'::JSON as a possibl ...

javascriptjsonpostgresql

Only when the user has successfully completed the reCAPTCHA and checked the checkbox, Vue will be able to

For my new project developed with VueJs, I am implementing a Single Page Application (SPA). The objective is to incorporate a simple if statement functionality. When the user checks a checkbox and successfully solves the reCaptcha, Vue should send an email ...

javascriptvue.jsrecaptcha

The configuration "react-app" failed to load, hindering the ability to extend it while working on the project

After creating a react app using yarn create react-app, I ran yarn start and the project loaded fine on localhost. However, any edits made to a file (such as adding a new tag or renaming the contents of a div) caused the app to throw an error during compil ...

javascriptreactjseslintcreate-react-apppackage.json

Transferring information to a controller using ajax in ASP.NET Core

I am encountering an issue with sending data to the controller through ajax. The value goes as "null". Can someone please assist me with this? Here are my HTML codes: <div class="modal fade" id="sagTikMenuKategoriGuncelleModal" data ...

javascriptc#jqueryajaxasp.net-core

Is there a way to toggle the visibility of the angular material toolbar at regular intervals?

I'm currently experimenting with the CSS animation feature to display and conceal the angular material toolbar in this demonstration. Inside the application component, the hide attribute is toggled at intervals as shown below: hide:boolean = false ...

javascriptcssangulartypescript

Unveiling the Quirk of Foundation 5: Grid Encounters a Popping

Recently, I encountered an issue with Foundation 5. Whenever I attempt to apply the "position:fixed" property on a "div" element that is part of the Foundation Grid, it causes the div to break out of the grid and align itself with the left edge of the ro ...

csszurb-foundation

JavaScript can be used to select and click on a specific li element using the :

I'm attempting to click on a specific link using a submit button. Essentially, I have a ul containing a large number of li elements, each with a link of class "episodeLink" inside, as shown on . I've added an input box where you can enter a num ...

javascriptjqueryhtml

Reveal or conceal elements with a touch of animation

I am in the process of building my own website and I've been working on implementing a button that can toggle the visibility of a specific div element. While the functionality is there, I really want to incorporate an animation to enhance it. I attem ...

javascripthtmlcss

Is it possible to create this Mobile/Desktop design using Bootstrap (or another grid system)?

I am currently utilizing Twitter Bootstrap 3 to design a website that is optimized for mobile devices. I want two elements (#1 and #2 as shown in my sketch) to appear in a sidebar on the left side of the screen when viewed on a large display, while the mai ...

csstwitter-bootstrapresponsive-designtwitter-bootstrap-3

Discovering Constraints on File Size: API Response Encoded in Base64 Visible Within 1 Megabyte, Overcoming Rendering Obstacles

Currently, I am encountering a hurdle in my Next.js application when trying to upload images larger than 1 MB. While the app works seamlessly with smaller images, it faces challenges when dealing with larger ones. Initially, there was a browser console er ...

javascriptreactjsnext.jsbase64

What is the method for programming a Discord bot to respond to your messages?

As a beginner in coding, I have been working on creating a bot that can respond with whatever is said after the command !say. For example - if you type !say hello, the bot will reply with "hello". This is what I have attempted: let args = message.content ...

javascriptdiscord.js

Accessing React Context globally using the useContext hook

I'm feeling a bit puzzled about how the useContext hook is intended to function in a "global" state context. Let's take a look at my App.js: import React from 'react'; import Login from './Components/auth/Login'; import &apos ...

javascriptreactjsuse-context

Is there a way to extract JSON keys that begin with a numerical value?

I am attempting to retrieve JSON data from sparkfun using ajax: var token = "someToken"; var jsonData = $.ajax({ url: "https://data.sparkfun.com/output/" + token + ".json", data: { page: 1 }, dataType: "jsonp", }).done(function (results) { ...

javascriptjqueryajaxjson

Position a fixed <div> alongside another <div> using the Bootstrap grid system

My website features a div element on the left side with a fixed width of 300px. Next to it, I aim to have another element that adjusts its width dynamically depending on the user's browser window size. To achieve this flexibility, I am using the Boots ...

htmlcsstwitter-bootstrapgrid

Resetting several sticky titles after displaying and hiding elements

Inspired by a popular codepen example, I have successfully implemented sticky titles in my sidebar. However, when integrating these sticky titles with the functionality to show/hide related items on click, I encountered some unexpected issues. The code sni ...

javascriptjqueryhtmlcsssticky

Triggering a keyboard *ENTER* event on an Input in Javascript/React by clicking a button is a common query among developers

I am facing a challenge with an Input element that only displays results when I press Enter on the keyboard. The element is part of a third-party extension, so my control over it is limited. My goal is to trigger the ENTER event for the Input when a button ...

javascriptreactjs

What is the best way to transfer a JSON object to an ASP.NET web service and effectively handle the data?

In web kit browsers, I am utilizing the local database and have the following code to retrieve data from it: function synchronise() { myDB.transaction( function (transaction) { transaction.executeSql("SELECT * FROM Patients;", ...

asp.netjqueryajaxweb-services