For some reason, I am finding it challenging to display two paragraphs side by side without disrupting the overall layout. If you would like a visual explanation of the issue, please check out this video: Video
If you're interested in reviewing the code related to this problem, here is the link: Link to Code
To visit the site where this issue is occurring, follow this link: Link to Site
CSS:
.app {
max-width: 1000px;
margin: 0 auto;
}
.app:after {
clear:both;
}
p {
display: block;
width: calc(50% - 10px);
float: left;
margin: 5px;
background-color: #CCC;
border: 3px;
padding: 20px;
box-sizing: border-box;
}
p:nth-child(even) {
float: right;
}
Have you found the answer to your issue? If you need equal height for the adjacent element, JS should be implemented (the sibling requires a minimum height relative to the active element)
Complete solution with JS
HTML:
<div class="app">
<p contenteditable>1 Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p contenteditable>2 Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
...
</div>
JS:
let els = document.querySelectorAll('[contenteditable]');
function syncHeight(activeEl, siblingEl) {
siblingEl.style.minHeight = activeEl.offsetHeight + 'px';
}
function prepare(el) {
let height = el.offsetHeight;
let even = !!(Array.prototype.slice.call(el.parentNode.children).indexOf(el)%2);
if(even) {
syncHeight(el, el.previousElementSibling);
} else {
if(el.nextElementSibling) {
syncHeight(el, el.nextElementSibling);
}
}
}
for(let el of els) {
prepare(el);
el.addEventListener('input', function(e) {
prepare(el);
});
}
To ensure consistent paragraph formatting, consider applying max-width and overflow-y styles:
Using CSS:
p { max-height: 154px; overflow-y: scroll; }
Applying Inline Styles:
<p style="max-height: 154px; overflow-y: scroll;"> Sample Text </p>
If paragraph widths are affected, include
max-width: 483px; overflow-x: hidden;I am facing an issue with my radio buttons where I only want one to be selected at a time. Despite giving them the same name, all four can still be selected simultaneously. <h1>Portion</h1> <input type="radio" name="portion_n ...
Currently in the process of developing an HTML/CSS template, with plans to incorporate social media icons from the following source: These icons are available as 41 individual .png files. The goal is to integrate them into the template using CSS classes f ...
I'm struggling to figure out why the button isn't working for me. I am familiar with how to enable and disable buttons using attr and prop. $(document).on("click", "#btn", function(){ $(this).html("Sending..."); $(this).prop("disabl ...
I have been working on a website that features a scrolling JavaScript timeline, inspired by the code found in this tutorial. You can check out the demo for this tutorial here. One issue I've encountered is when a user attempts to drag the timeline an ...
Currently, I am in the process of developing a page named live_link_frame.php. This page includes loading an iframe through a URL retrieved from a local file called live_link.txt: <?php $filePath = 'live_link.txt'; $handle = @fopen($filePath, ...
My code includes a script that assigns a specific id to a button using a variable $i in a for loop: <button id='myBtn$i'>Open Modal</button>. This id should allow me to open specific modals with the corresponding $i value: <div id= ...
i'm developing a new music app and I am in need of the following chord progression: Am F G Am Ab Gdim A# Hello these are just placeholder lyrics for demonstration purposes, hey hey hello which should look li ...
I have successfully implemented a method in my Three.js app for loading, playing, and analyzing audio that is compatible with both desktop and mobile devices. I must use THREE.Audio instead of HTML5 Audio Analyser, as the latter does not work on mobile dev ...
I am currently attempting to navigate through a complex HTML structure. Here is the snippet of the HTML code: <div class="example one"> <ol class="example two"> <li class="example three"> My object ...
Screen 1 export class Register extends Component { constructor(props) { super(props); this.state = { number1=0 }; render() { const { number1 } = this.state; v ...
Currently, I am working on a web application that encounters an issue where every time fs.mkdir is called, all the current express sessions are deleted. This causes me to lose all session data and I need a solution to keep these sessions intact. I have att ...
How can I effectively set up multiple proxies with puppeteer? Here is the approach I have taken: const puppeteer = require('puppeteer'); (async () => { let browsers = []; const proxies = [ 'socks5://myuser: ...
Can anyone help me with a problem I'm having toggling text? I have a truncated text and I want to be able to switch back and forth between the truncated text and the original text on button click. Here is a link to the pen. var myButton = documen ...
Here is the link to my webpage (for preview of my code): I am using Bootstrap 4 for my project. Everything works fine, but I am facing two small issues with the Cookies Box: The animation moves from left to right (which is correct) - but then it returns ...
I have successfully implemented a controller action in my MVC project that generates a JSON record with the required components. The challenge I am facing now is integrating this data into a pie chart using chart.js. The pie chart should display the counts ...
Everything is displaying correctly as I intended. However, there is a warning in the console: > vue.js:2 [Vue warn]: Unknown custom element: <canvas-datagrid> - did > you register the component correctly? For recursive components, make > sur ...
My programming journey involved creating a code snippet that automatically scrolls paragraphs horizontally, giving it the appearance of "Breaking News" updates on popular websites. The Javascript script I implemented performs automatic scrolling, but once ...
I am experiencing an issue with the navigation menu on my website. Everything looks great in normal view, but when I resize the browser window to a smaller width, the menu ends up overflowing below the main content. I want the navigation menu to always dis ...
When working on my next.js 13 app, I encountered an issue while trying to fetch individual blog data from a local MySQL database. In the src/blog/[id]/page.js file, I have the following component: const BlogPost = async ({ params }) => { const data ...
Currently, I am diving into the world of Vuejs and experimenting with integrating bootstrap/vue-bootstrap components like Card or b-table. However, I encountered some issues along the way. [Vue warn]: Failed to resolve component: b-table If this is a nat ...