Struggling to get SVG and <p> elements to align on the same line using display:inline-block?

Alright, I'm struggling to align this HTML content properly. The generated code looks like:

<div id = "innerCal">
<div id = "calCell"><p>[</p>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 443"><defs><filter x="-50%" y="-50%" width="200%" height="200%" id="Blur7"><feGaussianBlur stdDeviation="25" /></filter><g id="" data-name="Layer 1"><rect class="cls-1" width="900" height="758"/></g><g id="Img7"><path class="cls-1" d="M227.42,144.69v89.77c0,4.07,6.32,4.08,6.32,0V144.69C233.74,140.62,227.42,140.62,227.42,144.69Z"/><path class="cls-1" d="M221.19,146.76q2.69-3.33,5.6-6.47c.93-1,1.87-2,2.83-3l1.52-1.52.93,1.46,2.44,3.81,4.87,7.63a3.16,3.16,0,0,0,5.46-3.2l-5.6-8.76-2.92-4.58c-1.1-1.71-2.36-3.37-4.62-3.37-3.53,0-6.14,3.58-8.35,5.92s-4.52,5-6.64,7.56a3.28,3.28,0,0,0,0,4.48C217.83,147.87,220.1,148.09,221.19,146.76Z"/><path class="cls-1" d="M286.33,281.85c-.22-1.64-.35-3.28-.44-4.92v0l0-7.44a3.19,3.19,0,0,0-3.16-3.16,3.24,3.24,0,0,0-3.17,3.16,68.82,68.82,0,0,0,0,7.6q-10.76-7.95-21.45-16-6.1-4.57-12.25-9.12c-4.33-3.2-8.62-6.81-13.51-9.13a20,20,0,0,0-14.28-1.44c-5.47,1.48-10.79,3.85-16.1,5.82l-33.34,12.35-31.93...

The current layout has the <svg> element causing the <p>'s not to be on the same line. https://i.sstatic.net/ob3DN.png

I want the <p>'s and the svg to appear on the same line, with the <h2> tag below them:

https://i.sstatic.net/uaMxf.png

Css:

#innerCal {
        position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: -17px; /* Increase/Decrease this value for cross-browser compatibility */
            overflow-y: scroll;
            text-align: center;
    }
#calCell {
    //display: inline-block;
    width: 150px;
}

#calCell > p {
    display: inline-block;
}

#calCell > svg {
display: inline-block;
}

#calCell > h2 {
    display: block;
    text-transform: uppercase;
}

I need multiple elements like this to sit next to each other in a calendar-like grid. What could be causing the alignment issue?

javascripthtmlcsssvg

Answer №1

contains a definition for div#calCell with a fixed width of 150px, while the SVG does not have a specified width attribute, causing its content to exceed the 150px limit. To address this issue, it is recommended to add an explicit width attribute to the SVG so that the total width including the brackets remains within 150px. Suggestions for improvement include fixing code indentation, avoiding the use of

tags for inline elements, refraining from using position:absolute, and always setting explicit width and height attributes for SVGs. Check out the demonstration below: CSS snippet: 

#innerCal {
        position: absolute;
            top: 0;line-height:normal;height:auto;overflow-y:auto;/* resize=none (Set in Mobile Viewports) */
            left: 1px;/*  margin++ */
            border:.25em ridge #77f /* spacer[3] */
    .byline{width:inherit;text-align:center;display:none}

<div id = "innerCal">

<div id = "calCell">
<span>[</span>
<svg width="110px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 443">
<defs>



....

Answer №2

Consider utilizing the CSS property position: absolute for styling your <p> element

#calCell > p {
    display: inline-block;
    position: absolute;
}

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

Having trouble updating state after making a GET request with Axios in React

Currently diving into the world of React and working on a new project. Typically, I stick to using Class Components, but I am eager to learn Functional Components. However, I've hit a roadblock when it comes to utilizing setState. Here's My Comp ...

javascriptreactjsaxios

Executing asynchronous JavaScript calls within a loop

I've encountered an issue with asynchronous calls in JavaScript where the function is receiving unexpected values. Take a look at the following pseudo code: i=0; while(i<10){ var obj= {something, i}; getcontent(obj); / ...

javascriptjqueryloopsasynchronous

How can I make Div elements disappear based on conditions using If/else Statements in a JSP Page?

I've implemented a JSP function that manages user login by verifying their name and password input. However, even if the user enters incorrect information, they can still view the page. I want to hide all content on the page so that the user cannot se ...

jqueryhtmlcssjspif-statement

Building a personalized django widget to enhance functionality on other websites

Currently, I am in the process of developing a new website that includes user statistics. My goal is to create a widget that can be embedded on other websites using JavaScript to pull data from my server and display the statistics for a specific user. Howe ...

javascriptpythondjangowidget

The navigation on my mobile collapses whenever I use the Hello bar app

I am facing a problem with my Shopify theme. I recently installed an app called "Hello Bar" to show offers on all pages, but it seems to be incompatible with my theme. The developers of the app suggested adding the following code to my CSS file: @media ...

javascriptjquerycssshopify

What are the steps for implementing a equirectangular image in WebXR with three.js?

Currently, I am developing a web application with Three.js that requires the use of equirectangular images for panoramic tours. My goal is to incorporate a feature that allows users to switch between normal mode and VR mode similar to React360 and AFrame. ...

javascriptthree.jswebxr360-panorama-viewer

Minimize the length of the styled-component class name in the upcoming iteration

Dealing with styled-components in Next along with React can pose a challenge when it comes to ensuring proper rendering of the styled components. To tackle this issue, Next offers the compiler.styledComponents flag within the next.config.js file like so: c ...

javascriptreactjsnext.jsstyled-components

Struggling to access the global 'camera' variable in a THREE.js environment

I have a camera object from THREE.js set up in my scene like this: camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 10000 ); camera.position.z = 6; camera.position.y = 6; It's working perfectly. Now I'm tr ...

javascriptcamerathree.js

The three.js raycaster is able to detect objects both in front of and behind the specific object I am trying to select

I am currently working on rendering a 3D model of a house using Three.js and encountering an issue with the raycaster in my code. The problem I'm facing is that it's selecting every object both behind and in front of the specific object I want to ...

javascriptthree.js

What could be causing slice to fail to slice an array?

I've been using the slice function for a while now without any issues, but I'm having trouble with .slice() not actually slicing the data. Code: (why is it not working as expected?) let data data = await Models.find().sort([['points', & ...

javascriptnode.jsslice

Utilizing spine.js in conjunction with haml

Recently, I've been experimenting with spine.js and delving into its view documentation. In particular, the example using eco as the templating engine left me feeling less than impressed. Personally, I much prefer working with haml for my templating n ...

javascripthamltemplate-enginespine.js

What is the best way to dynamically load a view within a modal based on the clicked link?

I'm looking to optimize the loading of views inside a modal for various operations. Instead of having three separate modals, I want to dynamically load the views based on the link that is clicked. How can I achieve this? Or should I create individual ...

javascriptphpjquerymodal-dialog

Discovering a solution to extract a value from an Array of objects without explicitly referencing the key has proven to be quite challenging, as my extensive online research has failed to yield any similar or closely related problems

So I had this specific constant value const uniqueObjArr = [ { asdfgfjhjkl:"example 123" }, { qwertyuiop:"example 456" }, { zxcvbnmqwerty:"example 678" }, ] I aim to retrieve the ...

javascriptreactjstypescript

Remove the underline from links in gatsbyjs

When comparing the links on (check source code https://github.com/gatsbyjs/gatsby/tree/master/examples/using-remark), they appear without an underline. However, on my blog (source code here: https://github.com/YikSanChan/yiksanchan.com), all links are un ...

javascriptreactjsgatsby

An alternative way to show time zones such as PT and ET instead of using PST and EST with the help of moment

For efficiency in table space using moment.js, I am looking to utilize PT/ET instead of PST/EST. HTML- {{ moment.tz([2012,0],timezone).format('z')}} // It displaying EST/PST but I need only ET/PT. Note: The timezone is dynamic, so regardless of ...

javascriptangulartypescriptmomentjsmoment-timezone

Tips for incorporating a background image using bootstrap

I am facing an issue with a large background image of size 1600 X 3700. When I try to add bootstrap to my project, the background image disappears and only the first 100px are visible. Can anyone provide guidance on the correct way to use bootstrap with ...

htmltwitter-bootstrapcssresponsive-design

Issue with Angular 6 custom pipe causing NaN when utilizing service-sourced data

I am working on a custom pipe that converts a given number into days and hours. The HTML code for this pipe is as follows: <div *ngFor="let unit of units"> <p>Remaining Life</p> <h2>{{ unit.daysRemaining | timeRemaining }}< ...

javascriptangulartypescript

"Exploring databases with MySQL and displaying dynamic outcomes with PHP

I am a beginner in PHP and I am attempting to create a basic search engine. My goal is to display a summary of the search results on an HTML page after each search, showing all the items that match the query. Each item summary should include a link to a sp ...

phphtmlmysqlsearch-engine

Showing pictures from a database utilizing PHP and HTML

I'm looking to showcase the images stored in my database within an HTML table. The files are saved as 'BLOB' and I want them to appear under the 'Photo' column. Can anyone guide me on the code needed to display these images? ...

phphtmlimageblobecho

Selenium cannot find iFrames

I've come across various suggestions about transitioning to iframes such as driver.switchTo().frame("test frame"); and driver.switchTo().defaultContent(); Yet, I'm having trouble navigating to MenuFrame 4 in the following code. I am utilizing Ja ...

javahtmlseleniumiframe