HTML Popup Formatting

JC724

Weaksauce
Joined
Jan 20, 2016
Messages
117
So I have popup I created for a button.

I want to have the text "xXyY" and a X closing symbol right on the side of it. Both at the top of the pop up box with a horizontal line under it.

I was able to put a horizontal line under it and the "xXyY" and X above it but I can't get them side by side.
 

modi123

Supreme [H]ardness
Joined
Sep 6, 2006
Messages
6,015
I am not quite following. Do you have your HTML snippet or a screen shot?
 

Absalom

Gawd
Joined
Oct 3, 2007
Messages
868
HTML snippet or it's guesswork for us.

I take it you are trying to get a singular horizontal line under both the text and the X symbol?

If that's the case, then don't use the underscore (<u>) formatting. You'll need to use something like a line break (<hr>).

If you use something like bootstrap, you can create a 2x2 grid and then stick the <hr> in the bottom row container and have it span both columns. This would allow the line to span under both elements even in a variable text width scenario.
 

JC724

Weaksauce
Joined
Jan 20, 2016
Messages
117
Sorry, I didn't think about that. This is a screenshot. I am trying to figure out how to get the X on the same line is the "Over Time...." and on the right hand side of it.

I am still learning HTML/CSS. PopUp_NotFormatted.png
 

Damos

Limp Gawd
Joined
Oct 9, 2008
Messages
509
Is the X supposed to be clickable and some function works after clicking it? Where is is coming from?
Have you looked at w3schools?

If it's just for show: <p>Over-Time Approval Confirmation &#10060;</p> or a <h> tag like so: <h3>Over-Time Approval Confirmation &#10060;</h3>
 

modi123

Supreme [H]ardness
Joined
Sep 6, 2006
Messages
6,015
Good ol' float left/float right on divs should work.

ex:

HTML:
<div style="border: 1px solid black;width:300px;height:100px;">
    <div style="float: left;padding: 5px;">Over-time approval confirmation</div>
    <div style="float:right;border:3px solid red;padding:5px;">x</div>
</div>
 

JC724

Weaksauce
Joined
Jan 20, 2016
Messages
117
Is the X supposed to be clickable and some function works after clicking it? Where is is coming from?
Have you looked at w3schools?

If it's just for show: <p>Over-Time Approval Confirmation &#10060;</p> or a <h> tag like so: <h3>Over-Time Approval Confirmation &#10060;</h3>
It is click able but for me I don't have to control the functionality behind it. I am just working the UI for visuals
 

JC724

Weaksauce
Joined
Jan 20, 2016
Messages
117
Good ol' float left/float right on divs should work.

ex:

HTML:
<div style="border: 1px solid black;width:300px;height:100px;">
    <div style="float: left;padding: 5px;">Over-time approval confirmation</div>
    <div style="float:right;border:3px solid red;padding:5px;">x</div>
</div>
ok I will try this
 

grasshoppa

Supreme [H]ardness
Joined
Jun 18, 2017
Messages
4,685
Doesn't necessarily answer the question, but jquery ui is a good framework to start with. To get a dialog box it's as simple as
Code:
...
<div id='dialog'>
text of dialog box
</div>
...

Then call it with your jquery:
Code:
$('#dialog').dialog();

Check it out: https://jqueryui.com/dialog/
 
Top