Show MultipleInput icons in Edit-Mode

[jotoeri]

Quite some css fun, as from server-side the visible input-items are just dummy-css fields, while the real input is hidden. Therefore i now included some dummy-div and just copied the server-style to show the same elements.

As i had to adjust a few things on the input-fields for alignment, i had to adjust that on all question-types and recognized, that the .question__input[type="text"] was located in three places. To have it in one place, i shifted it to the question-element, but unfortunately now needed there an unscoped css. But as we use the BEM-Model on this, it should be ok, i think.

Unfortunately on Firefox, the line-height still changes a bit between showing & editing a question, as firefox overrides the line-height with some own style. That seems a bit like a firefox-bug to me. :/ On Edge it works perfectly.

Solves

• Still show checkbox when editing

And therefore also finishes this one? @jancborchardt

• In edit mode, not enough difference between choices types:

[codecov-commenter]

Codecov Report

Merging #409 into master will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff            @@
##             master    #409   +/-   ##
========================================
  Coverage      0.00%   0.00%           
  Complexity      193     193           
========================================
  Files            17      17           
  Lines          1059    1059           
========================================
  Misses         1059    1059           

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update c7577a3...612f75e. Read the comment docs.

[jancborchardt]

Wow! Really great, makes it sooooooo much more obvious, great work!
There’s a tiny 1px vertical shift of the answers, and also a slight size change of the radio buttons and checkboxes, but we can also look at that afterwards. :)

[jotoeri]

There’s a tiny 1px vertical shift of the answers, and also a slight size change of the radio buttons and checkboxes, but we can also look at that afterwards. :)

You're working on firefox, no? Thats why i wrote that part above: 😉

Unfortunately on Firefox, the line-height still changes a bit between showing & editing a question, as firefox overrides the line-height with some own style. That seems a bit like a firefox-bug to me. :/ On Edge it works perfectly.

[jancborchardt]

Ooops, missed that part. :D Also just tested in Chrome and there’s a similar issue though:

Firefox	Chrome

[jotoeri]

Argh. On very large size i found it on edge now, too.
Could you have a look onto the css? I don't find the clue at the moment... :/

[jancborchardt]

Could you have a look onto the css? I don't find the clue at the moment... :/

No worries, I’ll look into this. :) Should be something which is fixable with some slight padding-top for example.

[jancborchardt]

I tried some things for fixes but even after npm run dev it doesn’t show when testing – does it work for you?

In any case, there seem to be a lot of unrelated changes which could create the layout issues, also different issues in different browsers. I would recommend we pick only the absolutely necessary parts from this pull request first, to pin down exactly where the issue occurs?

[jotoeri]

Ok, so. This version is now working no MS Edge, as well as Opera on 100% Window-Size. Increasing this Window-zoom, it breaks. On Firefox, it still changes.
Taking the version two commit above, 7eedada, it works perfectly on firefox, but not on Edge/Opera.

To be honest - i'm done with this now. Took me already two nights. @jancborchardt if you're motivated, just keep on trying. The commit-history now has the first commit that implements the basic functionality, then i documented each small step i changed on css.

[jancborchardt]

@skjnldsv could you check this? :)

[jotoeri]

:D ok. Just thought about these days, it is some kind of rounding-issue. Now found a solution, that works at least on 100%-view on firefox and edge. Still a strange and unstable thing...

[skjnldsv]

Now found a solution, that works at least on 100%-view on firefox and edge. Still a strange and unstable thing...

Please add lots of comments for the css then :p

[jancborchardt]

All good now and code comments look proper :)

[jancborchardt]

@jotoeri could you check out the conflicts arisen from the other merges? :) Thanks!