question

abcabc-6368 avatar image
0 Votes"
abcabc-6368 asked MiaWu-MSFT edited

CDHtmlDIalog -make div inside div inline

Hi,
I am loading HTML page in CDHtmlDialog.

In CDHtmlDialog, I tried to center align image vertically and horizontally inside div as suggested https://docs.microsoft.com/en-us/answers/questions/531131/jfjjfkjfkg.html

Below my html and css code .This code shows below output in CDHtmlDialog.
127510-img1.png

In IE11 browser and MIcrosoft Edge, it shows below output. red border is not coming properly

127509-img2.png

My HTML code



 <div class="parent">
 <div class="child">
 <span style="position:relative;top: 20px;">
 <img class="im" src="https://d30y9cdsu7xlg0.cloudfront.net/png/255751-200.png" />
 <img class="im" src="https://d30y9cdsu7xlg0.cloudfront.net/png/255751-200.png" />
 </span>
  </div>
  </div>

My CSS Code



.parent {
display: inline;
vertical-align: middle;
height: 100px;
width: 300px;
text-align: center;
position: relative;
border-top: 1px solid red;
border-right: 1px solid red;
border-bottom: 1px solid red;

}

 .child {
     top: 20px;
     left: 0px;
     height: 60px;
     width: 300px;
     text-align: center;
     position: absolute;
     border-top: 1px solid yellow;
     border-right: 1px solid yellow;
     border-bottom: 1px solid yellow;
     border-left: 1px solid yellow;
 }

 .im {
 height:20px;
 }


How to make same code to work in both CDHtmlDialog and in browser. The problem in browser is the parent and child div is not coming inline, the child div is moving to next line. I need to make same code to work in both browser and CDHtmlDialog.

If I change display as display: inline-block; in parent class, in both browser and CDHtmlDialog, it is working fine but If I add one more div in the same level of parent div, in browser it is working fine whereas in CDHtmlDialog it is not working.

Browser output


127576-pic2.png

CDHtmlDialog output



127549-pic1.png

I want div with parent class and div with class Text to be inlined.

HTML



  <div class="parent">
   <div class="child">
   <span style="position:relative;top: 20px;">
   <img class="im" src="https://d30y9cdsu7xlg0.cloudfront.net/png/255751-200.png" />
   <img class="im" src="https://d30y9cdsu7xlg0.cloudfront.net/png/255751-200.png" />
   </span>
    </div>
    </div>
    <div class="Text">Text2</div>

CSS



  .parent {
 white-space: nowrap;
 overflow: hidden;
 display: inline-block;
 vertical-align: middle;
  height: 100px;
  width: 300px;
   text-align: center;
   position: relative;
   border-top: 1px solid red;
   border-right: 1px solid red;
   border-bottom: 1px solid red;
   }

 .child {
     top: 20px;
     left: 0px;
     height: 60px;
     width: 300px;
     text-align: center;
     position: absolute;
     border-top: 1px solid yellow;
     border-right: 1px solid yellow;
     border-bottom: 1px solid yellow;
     border-left: 1px solid yellow;
 }


.im{
height:20px;
}

.Text {
left:301px;
width: 200px;
display: inline;
text-align: center;
border-right: 1px solid green;
height: 100px;
line-height:98px;
border-top: 1px solid green;
border-bottom: 1px solid green;
vertical-align: middle;
position:absolute;
}

How to make same code work in both CDHtmlDialog and browser.








not-supported
img1.png (854 B)
img2.png (1.7 KiB)
img1.png (854 B)
pic2.png (2.5 KiB)
pic1.png (1.9 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

0 Answers