Struggling to show labels in the correct position for each button?

I need help with aligning labels under buttons. I have 3 buttons, each with a corresponding label. I want the labels to be displayed in line under the buttons, and if the length of a label exceeds the button width, it should wrap to the next line. I've tried using CSS but it's not working as expected. Can anyone provide suggestions on what I should consider?

html

   echo '<input type=submit class=btn  id=\"'.$row['UniqueAdvertisingCode'].'\" value=REDEEM    > ';
   echo '<input type=submit class=btn id=\"'.$row['UniqueAdvertisingCode'].'\"  value=BUY       > ';
   echo '<input type=submit class=btn id=\"'.$row['UniqueAdvertisingCode'].'\"  value= POUCHIT > <br>';

   echo ' <label class=lbl>Select Redeem when ready to use coupon at location</label>   ';
   echo ' <label class=lbl>Select Buy when ready to purchase product at location</label>   ';
   echo ' <label class=lbl>Save coupon for later</label>   ';

css

  <style>
  .btn {
    width: 15em;  height: 4em;
   }


   .lbl{
       width: 15em;   height: 4em;

   }
  </style>
htmlcss

Answer №1

If you set a specific width for each button, this solution should work effectively:

<label class="lbl">Select Redeem when ready to use coupon at location</label>
<input class="btn" value="Redeem" type="submit" id="redeem">

<label class="lbl">Select Buy when ready to purchase product at location</label>
<input class="btn" value="Buy" type="submit" id="buy">

<label class="lbl">Save coupon for later</label>
<input class="btn" value="Pouchit" type="submit" id="pouchit">

Additionally, ensure the following CSS styling is included:

.btn {
  height: 4em;
  width: 15em;
}
.lbl {
  position: absolute;
  top: 4em;
  width: 12em;
}

To view a demonstration of this setup, visit the jsfiddle link provided below:

Check out this updated version on jsfiddle:

http://jsfiddle.net/FwhvR/1/

Please note: An improved version has been created in response to feedback regarding screen widths:

http://jsfiddle.net/FwhvR/2/

Answer №2

Check out the code snippet below:

echo ' <label class="lbl">Choose Redeem to use your coupon at the location</label>';
echo '<input type=submit class=btn  id="'.$row['UniqueAdvertisingCode'].'" value="REDEEM"><br>';
echo ' <label class="lbl">Select Buy when ready to make a purchase at the location</label> <br>';
echo '<input type=submit class=btn id="'.$row['UniqueAdvertisingCode'].'"  value="BUY"> ';
echo ' <label class="lbl">Save the coupon for later use</label> <br> ';
echo '<input type=submit class=btn id="'.$row['UniqueAdvertisingCode'].'"  value= "POUCHIT" > <br>';

View DEMO

Please Note: The buttons may appear distorted due to excessive css height settings.

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

Display the PrimeFaces dialog in the middle of the screen

I've encountered an issue with positioning dialogs on different pages. I tried using a CSS code to center them on the screen, but it didn't work as expected. .ui-dialog{ position: fixed; top: 50%; left: 50%; margin-top: -50px; ...

cssuser-interfacedialogdatatableprimefaces

Issues with changing background colors using Jquery animate

I am attempting to create a fading background color effect when a button is clicked. Currently, I can change the background color using this code: $("#" + lblqty).css("background","#e9f1ff"); However, when I try to use the animate function as shown below ...

javascriptjqueryhtmlcss

What is the procedure for altering a particular element using ajax technology?

I have an AJAX request that updates the user information. I need to retrieve a specific value from the response and update the content of a specific element. For example, here is the element that needs to be changed: <div id="changeMe"><!-- New ...

javascriptjqueryhtmlajax

Adjusting the size of the iframe to match the dimensions of the window

Is there a way to make the iframe automatically fill up the entire space? For example, only opens the iframe up to half of the window in Mozilla Firefox and IE6. How can I ensure that it takes the maximum size of the screen? Are there any CSS or JavaScr ...

javascriptcssiframesize

Ways to update div content following a successful AJAX call

I have a form that utilizes AJAX requests, and when the input fields are not filled correctly and the submit button is clicked, error messages are displayed without refreshing the page. While this functionality works, a problem arises when the form is subm ...

javascripthtmljqueryajaxforms

Remove the </div> text and replace it with nothing

I'm attempting to substitute the end tag div with an empty string. Here is my code: $('#textDiv').html().replace(/'</div>'/g,'').replace(/<div>/g,'\n') This is the HTML: <div id='tex ...

javascriptjqueryhtml

Gaps separating frames

<!Doctype html> <html> <frameset rows="26%,24%,*" noresize border="0" frameborder="no" framespacing="0"> <frame src="frame_a.html" target="_self" name="logo" scrolling="auto"> <frame src="frame_b.html" target="_self" name="menu" ...

htmlcss

In IE8, dynamically loaded CSS does not take effect on dynamically loaded JavaScript views

Concerns have been raised about possibly duplicating this question, especially since it has taken more than an hour to find a solution. The current scenario involves: A widget that requires dynamic loading of CSS Usage of Sammy.js and .ejs for views, wh ...

cssajaxinternet-explorerinternet-explorer-8ie-developer-tools

`Gradient blending in ChartJS`

Currently, I am facing an issue with my line chart having 2 datasets filled with gradients that overlap, causing a significant color change in the 'bottom' dataset. Check out my Codepen for reference: https://codepen.io/SimeriaIonut/pen/ydjdLz ...

javascriptcsschart.js

How to insert space after every item generated by ng-repeat in AngularJS

I'm looking to evenly distribute elements based on this inquiry How to distribute li elements equally? I am utilizing angular with jade: ul li(ng-repeat="item in items") {{item.name}} However, ng-repeat does not create newlines after each element ...

javascripthtmlangularjs

Accessing array values depending on DOM response

Generate a string from selected DOM elements I have an object that contains months and their corresponding index numbers (not dates) monthList = {"jan" : "1", "feb" : "2". etc: etc} The user can input values like jan or jan,feb,march and I need to return ...

javascripthtmlloops

Looking for a reliable CSS aggregator for .Net that can merge and minimize style sheets effectively?

Is there an open source or free project that offers a CSS manager? I want to optimize performance and am hoping to find a pre-built solution rather than starting from scratch. Some key features I'm looking for include: Merging multiple .css files in ...

.netcssperformanceminifyaggregator

Displaying various charts in a single view without the need for scrolling in HTML

How can I display the first chart larger and all subsequent charts together in one window without requiring scrolling? This will eventually be viewed on a larger screen where everything will fit perfectly. Any recommendations on how to achieve this? Here ...

javascripthtmlcssangularjsplotly

Emphasize x-axis heading in a Highcharts graph

In my Highcharts bar graph, I am looking for a way to dynamically highlight the x-axis label of a specific bar based on an external event trigger. This event is not a standard click interaction within the Highcharts graph. Currently, I have been able to r ...

csstypescripthighchartstypescript2.0

Selecting the first li element using JQuery selectors

Can anyone help me with creating an onclick event that triggers when the user clicks on the first list item which is labeled as "Any Date"? I am looking to use jQuery to target this specific element. <ul id="ui-id-1" class="ui-menu ui-widget ui-widge ...

javascriptjqueryhtmlcssjquery-ui

The text field is being styled with inline styles automatically

I am trying to set a custom width for a textarea in my form, but the inline styles are automatically overriding my CSS. I have checked my scripts, but I am unsure which one is manipulating the DOM. If you have any insight, please let me know. This is the ...

javascriptjqueryhtmlcssadobe-brackets

Adjust the background color of a list item using Typescript

At the top of my page, there's a question followed by a list of answers and the option to add new ones. You can see an example in the image below. https://i.stack.imgur.com/NPVh7.jpg The format for each answer is "(username)'s response: at this ...

htmlangulartypescript

Event Triggering in CakePHP

I am struggling with the onChange event in this code snippet. I must have overlooked something because it's not functioning as expected. Can someone please point out my mistake? Your assistance is greatly appreciated: <td class="cellInput"> & ...

htmlcakephponchange

Utilize the display flex property within a nested flex container

I can't seem to get my link text centered both vertically and horizontally, it keeps aligning to the left. I was under the impression that using flex-based alignments would solve this issue. I have gone through the information on using a flex item as ...

cssflexbox

Setting the CSS position to fixed for a dynamically generated canvas using JavaScript

My goal is to fix the position style of the canvas using JavaScript in order to eliminate scroll bars. Interestingly, I can easily change the style using Chrome Inspector with no issues, but when it comes to implementing it through JS, I face difficulties. ...

javascriptcsshtmlcanvas