Align Last two elements

<label for="guestname" class="guestlabel">
		<span class="wcboxspan">Whats your name</span>
		<input class="wcboxinput" type="text" name="guestname" id="guestname">
		<span class="werrormsg"></span>
</label>

I want to align these two items in one line →

<input class="wcboxinput" type="text" name="guestname" id="guestname">
<span class="werrormsg"></span>

I can do this by putting the above two items in a new DIV→

<div class="someclass">
<input class="wcboxinput" type="text" name="guestname" id="guestname">
<span class="werrormsg"></span>	
</div>

But can we achive this w/o needing a new DIV?

Actual code kept here.

That sounds like you want the error message to the right of the input? That won’t give you much room for an error message unless you want a smaller input?

Can you clarify the look you intend and what is the error message going to look like?

1 Like

Sure sir,

Error message →
image

Not sure if this is what you mean but test and see :slight_smile:

.guestlabel{display:flex;flex-wrap:wrap;align-items:center;}
.guestlabel input{flex:1 0 0;margin-right:5px}
.guestlabel .wcboxspan{flex:1 0 100%}

I’m offline shortly so may not reply back until this evening :slight_smile:

1 Like

You may need to restrict the context to the inputs using a class name to avoid stretching the radios.

e.g.

.guestlabel{display:flex;flex-wrap:wrap;align-items:center;}
.guestlabel input.wcboxinput{flex:1 0 0;margin-right:5px}
.guestlabel .wcboxspan{flex:1 0 100%}

Also if using the above you can then align the raidios without using the top co-ordinates.

.wcboxinpradio{top:0}

1 Like

I think it will be better to introduce a DIV because this is spoiling that tick →

It is coming as AOE.

May be pseudo CSS before/after do not work after flex box.

Looks fine here in Chrome:

Where are you seeing that effect?

Either way you can just add a new class to the parent label and limit the effect of the code I gave.

1 Like

Sir, Mine is also chrome →

Please open GIF in new window for better visibility.

I think you’d need to update your live page so I can see it in action as I do not get that display in my chrome. It may be a version thing or maybe you have something else going on.

One thing I do note about that radio input is that you are using a pseudo element for the tick/checkmark and according to the specs this behaviour is not defined for replaced elements. Firefox and Chrome seem to apply it but not IE or Edge.

As I can’t find a specification for this I would be reluctant to use that method anyway until it has been defined although it will probably do no harm as the other browsers should get the normal radio effect.

From your screenshot it looks as though some entity code is output instead of the tick but I’d really need to see a live version so I could delve further. It may indeed be a version or platform problem so you will need to let me know what version chrome and which platform etc.

2 Likes

Quite strange when I put the code in style.css instead of browser it is working fine now. sorry for this trouble. Ideally I would have tested this before.

what will be the fix sir?

It’s probably not worth changing now as you have it working but if you wanted it to work in IE11 and Edge then you could use his approach.

https://codepen.io/paulobrien/pen/ZrKeaQ

1 Like