Valo form layout problem with label in IE

Hello there guys.
I have this weird problem. Well, few of them.

In IE11 the margin-top: -0.5em does this. I’ve changed it to margin:0; top: 0; and it’s somehow fixed. Although now there is different space in chrome and ie. it seems like the IE has different size or what. So I’ve tried pixels instead of em (just to be sure) and it’s the same. Same goes for the percentage value.

Am I something missing? Or is there a way that they would look the same, or at least close to each other please?

This is just a login form so it’s really short. I have other, much longer form with multiple lables just like this, and there is no problem what so ever with the margin-top: -0.5em. Funny thing: I was just playing with the layout when I first started up with vaadin few weeks ago. I’ve had some problem with the label positioning, so I’ve tried margin-top: -0.5em and it was good. Today, while trying to find out what to do with this problem, I’ve checked the valo api and found out that it’s used there by default ^^ tihihi. I know, I’m stupid.

  1. problem with borders, again, only in da IE11 (didn’t check the older version, for my sake)
    The blue border doesn’t cover the default grey border. Just in the fu…g IE11. Is there a not so painfull way to deal with this? In the first label it’s clean, because I could target the label through firstrow. But what about the others? I don’t want to get rid of all the borders, just in the rows containing label. Is there some magicla way how to target the parent of the label element? No? I thought so. Sooo, can you please help me somehow? If there is not a css way, is there at least a code way?:confused:

Or do I just have to clear all the borders and then specify to which element types give the border back?:cry:

Thank you for any help!

I tried poking around with this for a while, but the whole form label/section title thing is really just a hack, and you’re probably better of splitting your form into actual separate form layouts with proper labels/captions in between which you can style as you wish. Shouldn’t be too much trouble if you’re already using FieldGroup to manage the form fields.

If you wish to continue on the path to fight IE11 and all the others using CSS, then it’s pretty much just hacking away and using browser-specific selectors (like .v-ie11 etc.) and using !important to override any obscurely specific selectors.

I’m using one form, so if there are multiple labels I have to have them in the form. The reason why I use one form is that the columns have the same width. Should I just set some value through css as a size for the columns?

I’ve tried it now through web developer tools and it comletely ignores me

Oh, right, the form layout caption column width is going to be an issue if you use multiple of them. Darn it, I forgot that!

Setting the width of the caption colunm using CSS is one option, but it’s also hacky because you’re fixing it. You can then of course allow the captions to be multi-line, so perhaps it’s not that bad of an option.

But should I be selectin this “v-formlayout-captioncell” (and the other two) or which element please? Because I tried it and it ignores me.

The whole form acts weird for me. In the mail which I’ve sent to you yesterday I wrote about the problem that the child elements (the actual content of form layout) is wider than form itself. It causes a lot of problems for me:/

Yeah, .v-formlayout-captioncell should be the one to set the width for.

Right, I forgot about the other question in the email. The picture attachment didn’t come with it, could you attach it here? Can’t really guess what’s going on if child components of a form layout are wider than the layout itself. Can you attach a screenshot of the DOM hiearchy or the Java code which builds that layout?

My beautiful picture didn’t show up?:frowning: Of course I can. But you want the dom picture because you are excepting more weird drawings from me, aren’t you?
From yesterday:

The DOM hierarchy:

Is this ok?

If you need closer look:

Okay, that picture tells me at least something about the issue :smiley:

You could try adding this to your theme

.registrationForm {
  position: relative;

Or more globally just

.v-formlayout {
  position: relative;

See if that helps the widths?

Thank you for your answer, but it didn’t help:( My problems seems to be very resiliant :smiley: