I have a content editable div where three lines are separated by BR tags.
When I click on the second line, the cursor becomes bigger than that in the first line.
.content {
line-height: 35px;
}<div class="content" contenteditable="true">
First line<br>
Click here<br>
Last line
</div>
Is there a way to make the cursor size consistent for all the lines?
.section
{
line-height: 35px;
}
.section br
{
display:block;
margin: 10px 0px;
content: "" !important;
}<div class="section" contenteditable="true">
first item<br>
click me<br>
last one
</div>
Consider adding a unique class to reset br tags within the section div
A more efficient approach, without manipulating the dom directly, is to add a dummy element before each br tag to simulate a block element
.section br
{
display:block;
margin: 10px 0px;
content: "" !important;
}
Note: specifying margins is optional but helpful for maintaining consistency with different line heights and making adjustments as needed
Resources: Explore the css content property https://developer.mozilla.org/fr/docs/Web/CSS/content
Give this a try:
<div class="content" contenteditable="true"> <span>start here</span> <span>try this</span> <span>end here</span> </div>
.content{
line-height: 35px;
}
.content span:nth-child(2){
padding:10px 0;
}
.content span{
display:block;
}
To see a demo, click on the link here
I have a unique thymeleaf template like so: <body> <div id="layout"> <!-- Menu toggle --> <a href="#menu" id="menuLink" class="menu-link"> <!-- Hamburger icon --> <span>& ...
Here is the SVG code snippet I am currently working with: <div className="behaviorPatternsItem" key={item.id}> <div className="behaviorPatternsItemStyled"> <svg height="25" width="100%" preserveAspectRatio="non ...
The theme setup that I am working with is as follows: export const themeDefault = createTheme({ themeName: 'Default (Mortgage Hub)', spacing: 4, ...typography, palette, components: { MuiButton: { styleOverrides: { root ...
I'm encountering an intermittent issue with my Ajax call specifically in IE9. Let me share the code snippet that I am using: $.ajax({ url: buildUrl('ActiveTasksTable/' + $('#Id').val()), type: "POST", cache: false, ...
Is there a way to display an image in the browser without the file extension, similar to how Google and Unsplash do it? For example: Or like this: ...
Within my iframe object, there is a contenteditable body. I am trying to paste text or HTML elements at the caret position. However, when I attempted this code snippet, I encountered an error message saying Cannot read property 'createRange' of u ...
Currently, my focus is on developing an application using Next.js and I am in search of a way to prevent the opening of devtools. While exploring npm packages, I came across a promising tool called Disable-devtool - npm link. However, Next.js keeps present ...
In my development project using MVC structure, I have implemented the following JQuery functionality: <script type="text/javascript> $('select[name="provider_id"]').change(function() { var provider_id = $(this).val(); ...
This is a question that has sparked my curiosity. I am not facing any particular issue that requires an immediate solution nor do I possess the knowledge on how to achieve it. I have been contemplating whether it is feasible to utilize PHP for fetching co ...
Having successfully implemented a form with Bootstrap validation, I encountered an issue where the AJAX Post method fails to execute after validation. The catch clause does not capture any errors and only the ajax portion of the code doesn't run. Belo ...
Currently, I am utilizing the high charts library to display a date-time column chart. However, there seems to be an issue with the x-axis not displaying the exact starting value for the chart. In the example provided below, it is necessary to adjust the b ...
I am working with a basic array of photo categories that follows this structure: [ { category: 1001, photos: [ { id: 100101, url: 'url.com/100101', favorite: false}, { id: 100102, url: 'url.com/100102', favorite: ...
I've been attempting to adjust the slider value, but I haven't been successful so far. I'm using Capybara with a selenium driver. The HTML code looks like this: <div class="pslide-container"> <div class="slider slider-horizonta ...
I am trying to incorporate a small piece of Javascript on my website to ensure user confirmation. While I have successfully used the 'onclick' function with buttons, I am facing difficulty implementing it on a link. Here is the link in question: ...
Looking to add a small div on the right side of your screen that moves along with your vertical window slider? Wondering if jQuery has a function to get the current vertical slider position? I thought scrollTop() might work, but it only returns from a spe ...
I have been troubleshooting this issue by referring to similar posts, but I am still facing the problem of getting 'undefined' when using console.log. I have followed instructions for defining the multer middleware from other sources, so I am uns ...
I have a modal pop up that appears after clicking an ASP button : <div class="form-group"> <asp:Button ID="btnBrand" runat="server" Text="Add brand" CssClass="btn btn-info" OnClick="btnAdd_Click" /> </div> Code Behind : protected ...
As a newcomer to the world of Javascript, I've decided to take on the challenge of creating a blackjack game. Utilizing arrays and objects for my game: card = {}, //each card is represented as an object with suit, number, and points properties playe ...
I am currently utilizing Node.js, Express, and MethodOverride in an attempt to update only one part of my user model using a form. User Model: var userSchema = new mongoose.Schema({ email: { type: String, unique: true, lowercase: true }, password: Str ...
I am working on a countdown timer where I have set the variable seconds to 10. If the seconds reach zero, I want to add 2 seconds to it and stop the program from looping. Can someone please assist me with this? var isWaiting = false; var isRunning = fal ...