I'm trying to figure out how to adjust my code so that the border surrounding my text stays in position and changes size when I input longer text. Here is the code I'm currently working with:
<h1 id="result" style="color:black; font-family: Bradley Hand; font-size:50px; position:absolute; top:17%; left:60%">
text
</h1>
Any suggestions on how to achieve this would be greatly appreciated. Thank you!
By simply adding border: 1px solid black (for example) to your existing code, everything functions perfectly. The h1 element adjusts its size based on the content, including the border:
const result = document.getElementById('result');
const sentence = "HELLO! IT LOOKS LIKE THIS IS WORKING FINE...";
let index = 0;
setInterval(() => {
index = (index % sentence.length) + 1;
result.innerHTML = sentence.slice(0, index);
}, 250);#result {
position:absolute;
top: 10%;
left: 10%;
padding: 0 .5rem;
font-family: Sans-Serif;
font-size: 2rem;
line-height: 3rem;
color: black;
border: 3px solid black;
border-radius: 3px;
min-height: 3rem;
}<h1 id="result"></h1>It appears that you might be concerned about the border impacting the dimensions of your element:
#bar1 {
width: 50%;
height: 1rem;
background: red;
margin: .25rem;
}
#bar2 {
width: 50%;
height: 1rem;
background: cyan;
margin: .25rem;
border: 3px solid black;
}<div id="bar1"></div>
<div id="bar2"></div>By default, the width and height of your element account for the specified width and height properties, as well as padding and border, as illustrated in the example above.
To maintain the exact dimensions specified with width and height, you have two options:
Utilize box-sizing: border-box. This includes padding and border in the total width and height of the element.
Opt for box-shadow instead of border. The inset property allows you to place the shadow inside the element rather than outside.
#bar1 {
width: 50%;
height: 1rem;
background: red;
margin: .25rem;
}
#bar2 {
width: 50%;
height: 1rem;
background: cyan;
margin: .25rem;
border: 3px solid black;
box-sizing: border-box;
}
#bar3 {
width: 50%;
height: 1rem;
background: yellow;
margin: .25rem;
box-shadow: inset 0 0 0 3px black;
}
#bar4 {
width: 50%;
height: 1rem;
background: lime;
margin: .25rem;
box-shadow: 0 0 0 3px black;
}<div id="bar1"></div>
<div id="bar2"></div>
<div id="bar3"></div>
<div id="bar4"></div>It's worth noting that the 4th bar, with the outer box-shadow, may appear larger, but upon inspection, its dimensions are identical to the other 3 bars.
Is it possible to simply include border: solid 1px black; within the style attribute, just like this?
<h1 id="result" style="border: solid 1px black; color:black; font-family: Bradley Hand; font-size:50px; position:absolute; top:17%; left:60%">text</h1>Check out the Fiddle: https://jsfiddle.net/myingling/LL57yd8j/
For further information on CSS borders, take a look at this resource: https://www.w3schools.com/css/css_border.asp
For my current project, I have incorporated dotdotdot.js to handle text truncation. However, after integrating a rich-text editor (tinymce), some HTML elements like p, a, b, i, etc., have been added to the text. Unfortunately, dotdotdot is now not behaving ...
I only have a basic understanding of HTML I am looking to add a feature on my website where users can input their order number into a text box, and it will automatically direct them to the corresponding order summary link. The links to these order summar ...
I'm having issues with my css file and attempting to achieve the following: .login-wrapper { background-image: url({{imagePath}}); } Below is my component code: export class LoginComponent implements OnInit { imagePath: any = 'assets/discord ...
I have a dataset in a table format and I am looking to adjust the spacing to avoid overcrowding. At the same time, I want the title row of the table to not follow the same spacing rules as the rest of the cells. Is there a way to achieve this without crea ...
I have come across some examples of .AVI in HTML on the internet. However, my page seems to be having issues. It displays fine in Chrome on my computer. But in Internet Explorer, there is a bar at the top and the videos appear blank afterwards. It ...
I am currently working on a table that has three columns: a label, a dropdown selector, and an input field. The challenge I'm facing is that the input field needs to accommodate multiple lines of content, specifically in JSON format. However, I want ...
I am working on implementing an Input element that triggers a form submission: <input type="submit" value="Download" id="downloadButton" class="btn-download" /> The specific requirement is for the button to first execute a javascript function and t ...
My aim is to access the content within a leaflet popup. Specifically, I have inserted a form with buttons inside it that I would like to interact with. However, for now, I am simply attempting to add an event to the popup itself. $(".leaflet-popup-content ...
After spending a considerable amount of time on this project, I am still struggling to make it work. Can someone please guide me on how to correctly assign the width and height values to the img element using variables? for ($x = 1; $x <= $aantal; $x+ ...
Important HTML Knowledge <section class="home" id="home"> <div class="max-width"> <div class="home-content"> <div class="text-1">Hey t ...
My system includes a table that retrieves dates from an FTP location. On the user interface page, there is a form that gathers all details related to a specific FTP date. However, I am facing difficulties in comparing the FTP dates with those specified in ...
Visit the Django Avatar documentation here Encountering an error in Django stating "not enough values to unpack (Expected 2, got 1) while attempting to open a specific html template: {% extends 'base.html' %} {% load account %} {% load avatar_ta ...
Currently, I am using Angular and I am looking for a way to create an editable dropdown in HTML with the help of Angular. Can anyone provide a code snippet for this? ...
We are currently utilizing jquery version 1.9.1 and angular version 1.2.13 for our project. Our wysiwyg editor is functioning well, as we are able to save HTML into the database and load it back using the jquery append function successfully. However, we ar ...
I have a button labeled "MENU" at the top and a logo image below it. Currently, the menu expands from the bottom of the button. I would like it to expand from the top instead, and when the menu is expanded, the button should be under the navigation list, n ...
I'm currently working on a page with Ajax functionality and I'm interested in making it SEO crawlable. After reviewing Google's guidelines at https://developers.google.com/webmasters/ajax-crawling, I learned that I need to use "#!" to create ...
I've been attempting to close the jQuery popup by using $('#partsPopup').popup("close"); However, I encountered an error stating that there is no method called "popup". Below is the sequence of scripts that I have followed. Any assistance wo ...
Seeking assistance below, following codes are sourced from "example.com" as assumed: <a href="http://www.example.org" target="vo1" onclick="gp(1)" rel="nofollow">Click Me</a> Upon clicking on ...
While working on a website project, I encountered instructions for mouseover styles in the design that got me thinking: It's straightforward to achieve with javascript or css image swapping... but here's the catch. There will be multiple icon li ...
In the process of developing an ASP.NET Core 3.1 MVC application, I am faced with a task to implement a dynamic checkbox menu for selecting fruits and storing the choices in another data source. However, encountering an issue where I'm unable to sele ...