0

I have this css:

.records-table-row-checkbox {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

I have a problem with top positioning in Edge browser, been trying to solve it for nearly two days. I want to change top:50%; to top:19px; Only for Edge browser. The rest of the browsers should have top:50%;.

I've tried this : 

  *::-ms-input-placeholder { 
    top: 19px;
  }

But Edge still takes the 50%.

ddy250
  • 281
  • 2
  • 5
  • 16
  • 1
    _“But Edge still takes the 50%”_ - well that is little surprising, because `*::-ms-input-placeholder` formats the placeholder value that is shown inside a form field. This does not select your checkbox(?) _at all_. – misorude Jan 09 '19 at 08:17
  • I understood the usage incorrectly. – ddy250 Jan 09 '19 at 08:20
  • 1
    Maybe we can take a step back and find you why you need to target one browser only. If we solve that, perhaps we wouldn't need these ugly hacks. – Mr Lister Jan 09 '19 at 09:18
  • The above css code centers the checkbox in Chrome, not in Edge. Moreover, the top:50% doesn't impact any of the two browsers, but something still makes it centered in Chrome. The problem is probably that the top property is in percentage, while the parent doesn't have a set height, instead the height is determined according to the checkbox. I hope that's clear. – ddy250 Jan 09 '19 at 09:42
  • 1
    Hm. Can you produce a [mcve] which demonstrates the issue? – Mr Lister Jan 09 '19 at 18:58

2 Answers2

1

For the checkbox, you can use ::-ms-check selector only supported in Internet Explorer and Microsoft Edge. An example usage below:

input[type=checkbox]::-ms-check {
  top: 19px
}
Mordecai
  • 1,414
  • 1
  • 7
  • 20
  • Is there a method which doesn't include the type=checkbox? – ddy250 Jan 09 '19 at 08:59
  • 1
    I can see that you had created an another thread with the same code. https://stackoverflow.com/questions/54075558/why-is-my-checkbox-not-vertically-aligned-in-its-parent In which you can check my testing result and was working similar in Chrome and Edge. Here I want to confirm with you, Is there any specific reason to apply different CSS for Edge? generally people want similar result across the various browsers. – Deepak-MSFT Jan 10 '19 at 05:09
1
@supports (-ms-ime-align:auto) {
  .records-table-row-checkbox {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
}}
unknow27
  • 81
  • 1
  • 2