Tips for adjusting the position of an icon when encountering a line break using Javascript or CSS

After some trial and error, I managed to get it working, but only when the page is initially loaded and not in a responsive manner. Below is the JavaScript code I used.

     if ( $(".alert-box").height() >= 90 ) { 
        $('.img').css('padding', '30px 20px 0 20px'); 
    }

    else {
        $('.img').css('padding', '20px 20px 0 20px'); 
    }

Is there a way to make this work even when the page is resized?


I'm facing an issue with aligning an icon in an alert box. When the alert has one line of text, the icon should be centered with that single line. However, when the text wraps into two lines due to responsive resizing, the icon should be aligned at the center of both lines. I thought about using @media queries to adjust padding based on screen width, but since the text length varies dynamically, it's challenging to pinpoint the exact breaking point. Is there a solution to achieve this without complex CSS or JavaScript coding?

Thank you for your support!

You can view three images illustrating my problem on this HTML page: Images

Here's a snippet of the CSS code I'm currently using:

.alert-box {
    margin-top: 30px;
    border-radius: 5px;
    padding: 0;
    border-style: solid;
    border-width: 1px;
    display: block;
    font-size: 0.8125rem;
    font-weight: normal;
    position: relative;
    transition: opacity 300ms ease-out;
    background-color: #008CBA;
    border-color: #0078a0;
    color: #FFFFFF; 
}

.alert-box .text {
    padding-left:20px;
    font-size:14px;
    display:inline;
}
.alert-box p {
    margin-bottom: 0;
    padding-right: 30px;
    padding-left: 67px;
}
.alert-box .img {
    padding: 20px 20px 0 20px;
    float:left;
    position: absolute;
}

Answer №1

My recommended approach involves the following steps:
To begin, eliminate the image within the .alert-box.
Afterward, apply padding-left: 70px; to .alert-box.
Then, introduce a new class called .error to the .alert-box with the properties:

background-image: url(img/Error-icon_0004_Dark-Blue.png); background-repeat: no-repeat; background-position: 20px center;

.alert-box {
    margin-top: 30px;
  border-radius: 5px;
  padding: 0 0 0 70px;

 }

.error {
  background-image: url('http://otbstudios.com/alert/img/Error-icon_0004_Dark-Blue.png'); 
  background-repeat: no-repeat; 
  background-position: 20px center;
  }
<div data-alert="" class="alert-box error">
  <div class="large-6 text"><p>Bacon ipsum dolor amet jerky ribeye kielbasa andouille swine pig meatloaf sausage pancetta salami ham hock turkey.</p></div><a href="#" class="close">×</a>
</div>

Answer №2

To achieve the desired effect, you must incorporate these two CSS rules into the <img> tag.

position: absolute; 
top: 50%; 

It's worth noting that this is the same technique utilized by the Foundation CSS framework to center-align the close button as well.

After implementing these changes, you will see the following effect:

Answer №3

There is a potential solution, but it may only be effective if the container has a fixed height...
Take a look:

html, body {
  height: 100%;
}
.alert-box {
  border-style: solid;
  border-width: 1px;
  display: block;
  font-size: 0.8125rem;
  font-weight: normal;
  position: relative;
  transition: opacity 300ms ease-out;
  background-color: #008CBA;
  border-color: #0078a0;
  color: #FFFFFF;
  font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  font-size: 1rem;
  font-weight: normal;
  line-height: 1.6;
  height: 100px;
}
.alert-box p {
  margin-bottom: 0;
  padding-right: 30px;
  padding-left: 67px;
}
.alert-box .img {
  margin: 0 20px;
  float: left;
  display: block;
  width: 28px;
  min-height: 28px;
  height: 100%;
  max-height: 63px;
  position: relative;
}
.alert-box .img img {
  display: block;
  position: absolute;
  bottom: 8px;
}
.alert-box .close {
  right: 0.25rem;
  background: inherit;
  color: #333333;
  font-size: 1.375rem;
  line-height: .9;
  margin-top: -0.6875rem;
  opacity: 0.3;
  padding: 0 6px 4px;
  position: absolute;
  top: 50%;
}
<div data-alert="" class="alert-box">
  <div class="img">
    <img src="http://www.otbstudios.com/alert/img/Error-icon_0004_Dark-Blue.png" width="28" height="28">
  </div>
  <div class="large-6 text"><p>Bacon ipsum dolor amet jerky ribeye kielbasa andouille swine pig meatloaf sausage pancetta salami ham hock turkey. Bacon ipsum dolor amet jerky ribeye kielbasa andouille swine</p></div>
  <a href="#" class="close">×</a>
</div>

It appears that setting a fixed height won't completely resolve the issue. If you could specify a fixed height, you probably wouldn't have encountered this problem to begin with.
Unfortunately, I couldn't find an alternative solution that accommodates relative heights... If anyone figures out how to adjust my code to address that, please make the necessary edits.

Answer №4

Check out the solution here: how to change the style of alert box

You might need a bit of JavaScript to create a modal where you can display styled messages with icons. Take a look at this example for creating a basic modal dialog:

I hope this information proves useful. EJK

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

Adjust the color of the text within a div element when hovering over and moving the mouse away

Is there a way to change the text color on mouse hover and mouse out, even with multiple nested div elements? I'm having trouble getting it to work, so any help would be appreciated. <div class="u860" id="u860" style="top: 0px;"> <div id ...

Issue with jQuery validate plugin (remote validation not working as expected)

Having trouble validating a user value with the jQuery Validation plugin. The validation appears to be working correctly and calling the web service function as intended. However, even when the server function returns a true/false result, the field is alwa ...

Retrieving Browser URL using Node.js

Currently, I am trying to extract the browser URL from a user who has integrated my external JavaScript file into their website. The process involves them including the JS file, which triggers an Ajax call using jQuery to communicate with my Node server. ...

Choosing the perfect item with the help of a material's GridList

I've developed a react-mobx application using Material-UI, and the code structure is similar to this: render() { // defining some constants return ( <div> <img src={selectedPhoto} alt={'image title'} /> < ...

Turn off VAT for certain product categories only during the WooCommerce checkout process

I am currently using the Timologia for WooCommerce plugin in my Woocommerce store. This plugin is essential for customers in Greece, as it allows them to choose between receiving an invoice or a plain receipt at checkout. The plugin adds a select field wit ...

Angular 2 - AOT Compilation Issue: Running Out of JavaScript Heap Memory

I've been working on an angular2 project and when I try to build the AOT package using the command below, I encounter errors: ng build --aot --prod The errors returned are related to memory allocation failures and out of memory issues in the JavaS ...

Are there any substitute proxy servers that are capable of bypassing CORS restrictions using local IP addresses?

Successfully bypassing CORS for AJAX requests to public IP addresses using proxy servers has been a game-changer. Is there a similar approach that can be utilized for local IP addresses when the server is hosted off-site? Unfortunately, I lack the abilit ...

Challenges with borders within a modal box

I am trying to create some spacing above and below the 'offer' button within my modal. Initially, I attempted to add a 30-pixel border to the bottom of the button, but it doesn't seem to be appearing. The end of the modal aligns directly wit ...

Increase the current time by 50 minutes

I have a dropdown menu with various time options like this: <select name="" id="delyvery-hour"> <option value="18:00">18:00</option> <option value="18:05">18:05</option> <option ...

User update function is not being triggered by Ionic 2 Express call

I am currently working on implementing a feature in my Ionic 2 program that updates a user field when triggered. The code snippet below is from my user-service.ts file: // Update a user update(user: User): Observable<User> { let url = `${this.u ...

Is it possible to customize bootstrap classes for a unique bootstrap css design?

In my MVC4 project, I faced a situation where I had a global.css class with some classes that conflicted with Bootstrap after adding it. To resolve this, I created a new file called bootstrap_migration.css. In this file, I prefixed the Bootstrap classes wi ...

Array Filtering Results in an Empty Array of Objects

I'm currently attempting to filter out all objects from the projects array that do not appear in the savedProjects array, but I'm ending up with an empty result. Could it be that I am approaching the filtering process incorrectly? Here's my ...

`The problem of div width error``

I am trying to display two divs side by side with a width of 50% each. Below these two divs, there is another div with a full width of 100%. Check out my code below: <div class="col_1_2"></div> <div class="full-description">description& ...

The sum is being treated as a concatenation instead of an addition in this case

Why is the somma value showing the concatenation of totaleEnergetico and totaleStrutturale instead of a sum? RiepilogoCombinatoStComponent.ts export class RiepilogoCombinatoStComponent implements OnInit { constructor() { } interventi: AssociazioneI ...

Error: Unsupported Media Type when attempting to send JSON data from an AngularJS frontend to a Spring controller

Below is the controller function code snippet @RequestMapping(value = "/logInChecker", method = RequestMethod.POST, consumes = {"application/json"}) public @ResponseBody String logInCheckerFn(@RequestBody UserLogData userLogData){ Integer user ...

How to access Bootstrap's modal initial data-* upon closing

When displaying a bootstrap modal, a convenient method to retrieve associated data is by using the following code snippet: $('#myModal').on('show.bs.modal', function (e) { var id = $(e.relatedTarget).data('id'); alert( ...

Submitting a form from outside the form using a button in HTML: A step-by-step guide

I'm looking to submit a form using Angular on the functions next() and saveStep(). I'm unable to place next() and saveStep() within the form itself. I have set up my ng-click for next() and saveStep() below the form. When I submit the form fro ...

Using $.ajax to make asynchronous requests in ASP.NET Web Forms

I am currently working on incorporating the $.ajax method into my sample program. The structure of the page is as follows: <form id="form1" runat="server"> <div> Country: <asp:TextBox ID="txtCountry" runat="s ...

What is the best way to establish Session variables in ASP.NET MVC 3 using jQuery?

Here's the query at hand: how can I establish Session variables in ASP.NET MVC 3 using jQuery? I've attempted to utilize $.ajax or $.post, but I'm uncertain about the correct approach. ...

Error: React cannot read property 'any' since it is undefined

I am brand new to React and currently in the process of building a small app by following a tutorial on Udemy. The app includes a form, and while trying to import the redux-form library into my project, I encountered the following console error: https://i ...