Table cell alignment on second line text wrap

Other than placing letter “A” in its own cell, how can I get the text to wrap and align under the first line as seen below? Help would be appreciate as I am having difficulty with what seems to be an easy thing to do!

   (is 2 spaces after the letter.)


<tr><td><input type="radio" name="A"value="A">A.&nbsp;&nbsp;<%=rs("A")%></td></tr>

<tr><td><input type="radio" name="B"value="B">B.&nbsp;&nbsp;<%=rs("A")%></td></tr>

etc.

out of curiousity, is there a reason you dont want to do the obvious and easy thing and put another cell in?

Anyway. What you’re describing is an Ordered List with its type set to “A”. (or its list-style-type set to upper-latin, in CSS).

Sorry I can’t bring myself to use a table for this (even though I know some people think its fine) so the following is probably of no use but I would do it much like @m_hutley mentioned except that I’ve use a counter on the label for the upper alpha characters.

 <!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<style>
.radios {
	max-width:480px;
	margin:auto;
	padding:1rem;
	background:#f9f9f9;
	list-style:none;
	counter-reset: radios;
}
.radios label:before {
	content: counter(radios, upper-alpha);
	counter-increment:radios;
	padding:0 1rem;
	color:red;
}
.radios li {
	display:flex;
	margin:0 0 .5rem;
}
.radios label {
	display:flex;
}
</style>
</head>

<body>
<form>
  <ol class="radios">
    <li>
      <input type="radio" name="A" id="A" value="A">
      <label for="A">Lorem ipsum diolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</label>
    </li>
    <li>
      <input type="radio" name="B" id="B" value="B">
      <label for="B">Lorem ipsum diolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</label>
    </li>
    <li>
      <input type="radio" name="C" id="C" value="C">
      <label for="C">Lorem ipsum diolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</label>
    </li>
    <li>
      <input type="radio" name="D" id="D" value="D">
      <label for="D">Lorem ipsum diolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</label>
    </li>
  </ol>
</form>
</body>
</html>
2 Likes

I had completely missed the fact that the op wanted a radio out front -_- woops.

1 Like

Yes, there is a reason. I had it in a table with separate cells but I found some code that allow me to click on an answer to highlight it and it doesn’t work if you want to highlight the letter and answer together since in separate cells.

Thank you Paul, I will give it a try. But can radio buttons be aligned with the middle of the letter rather than the middle of the answer?
code image

They are in my demo :slight_smile:

form-alpha

You must have some other code in there affecting things (like margin:auto on the radio input)?

Can I see your demo?

I am taking that screen shot directly from the FF browser:

It seems firefox likes to draw a nice big bounding box around radio buttons to match the height of the label and then stick the radio in the center of the item. Interestingly it doesnt move the radio ‘text’ along with it. Presumably assuming that whatever you’re putting in as the label actually aligns correctly.

It can be corrected by specifying the height of the radio button, but there may be more clever CSS ways that the gurus come up with.

1 Like

That’s a pain :slight_smile: (I should have checked).

It seems that Firefox needs a baseline alignment on the flex container (which would be correct as the default is to stretch which is what happens in Firefox).

e.g.

.radios li {
  display: flex;
  margin: 0 0 0.5rem;
  align-items: baseline;
}

Also the input has margins so need to remove the margins and then just nudge it down 1px to make it more pleasing to the eye.

.radios input[type="radio"]{
	margin:0 ;
	position:relative;
	top:1px;
}

Codepen updated (and checked in Firefox, Chrome, Edge, Mac Chrome and Safari).

3 Likes

Try adjust the code @PaulOB gave in post #3 with these two rules:

.radios input{
    margin:0;
}
.radios label {
    display:flex;
    align-items:center;
}

Inputs usually have a few pixel margins and the align-items will middle align the counter items.

Edit)
Just an idea, not checked in any broser. :slight_smile:

1 Like

Checked in a few and realized that the radio button would need to align too, just as @PaulOB mentioned in his post #10 above.

Below is the example I tested using the code n post #3, though Paul has already covered crossbrowser in post #10. :slight_smile:

<!DOCTYPE html><html><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled</title>
<style>
.radios {
  margin:auto;
  padding:1rem;
  max-width:480px;
  background:#f9f9f9;
  list-style:none;
  counter-reset: radios;
}
.radios li {
  display:flex;
  margin:0 0 .5rem;
  align-items:center;
}
.radios input{
  margin:0;
}
.radios label {
  display:flex;
  align-items:center;
}
.radios label:before {
  padding:0 1rem;
  color:red;
  content:counter(radios, upper-alpha);
  counter-increment:radios;
}
</style>
</head><body>

<form>
  <ol class="radios">
    <li>
      <input type="radio" name="abc" id="A" value="A">
      <label for="A">Lorem ipsum diolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</label>
    </li>
    <li>
      <input type="radio" name="abc" id="B" value="B">
      <label for="B">Lorem ipsum diolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</label>
    </li>
    <li>
      <input type="radio" name="abc" id="C" value="C">
      <label for="C">Lorem ipsum diolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</label>
    </li>
    <li>
      <input type="radio" name="abc" id="D" value="D">
      <label for="D">Lorem ipsum diolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</label>
    </li>
  </ol>
</form>

</body></html>

1 Like

Nicely done and yes, more pleasing to the eye. Thank you!

2 Likes