cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
da_1299
Helper I
Helper I

html landscape oriented

Hi all,

 

May I ask what can I type if I would like to make the html shown in landscape direction?

 

 

 

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border: 2px solid black;
  border-collapse: collapse;
}
th, td {
  border: 1px solid black;
  font-size: 20px
}
td {
  height: 40px;
  text-align: center;
}
p {
  padding:10px;
}
</style>
</head>
<body>

<p>History Card</p>

<table style="width:100%">
  <tr>
     <td colspan="7">EQUIPMENT HISTORY CARD</td>
  </tr>
  <tr>
    <td>Equipment No</td>
    <td colspan="2"><b>SEEM4088</b></td>
    <td>Equipment<br/> Description</td>
    <td>Detector</td>
    <td>Purchase Date</td>
    <td>1/4/2021</td>
  </tr>
</table>

</body>
</html>

 

 

 

 

11 REPLIES 11
v-bofeng-msft
Community Support
Community Support

Hi @da_1299 :

Could you tell me:

  • Are you using a HTML Text control in a canvas app?
  • Do you want to make the <Head> tag work in the HTML Text Control?
  • What effect do you want to achieve in the end? Can you provide screenshots?(How to interpret "in landscape direction")

I'm afraid the HTML control doesn't support the addition of CSS classes inside a style tag. ( HTMLText control currently can't have the HTML <Head> tag work with it)

I think these links will help you a lot:

HTMLText with CSS 

It is possible to declare css in powerapps? 

Best Regards,

Bof

Hi,

Yes, I am using it in canvas app as I would like when I click on the button in canvas app, it will generate a report.

However, the report will contain many columns so it is unable to show it in the a4 paper instead the a4 paper is in landscape direction.

 

I have used the code 

table {
  transform:rotate(270deg);
}

to make the table shown in vertical in online but it does not work when I apply it into the PowerApps. 

Thank you.

 

 

da_1299_0-1617948960846.png

 

Hi @da_1299 :

The transform function belongs to the category of Java script, but the HTML Text control does not support Java script.If you want the form to be transposed by 90 degrees, I suggest you use this method as an alternative:

<table  >
  <tr>
     <td colspan=7>EQUIPMENT HISTORY CARD</td>
  </tr><tr>
    <td>Equipment No</td>
  </tr><tr>
    <td colspan=2><b>SEEM4088</b></td>
  </tr><tr>
    <td>Equipment<br/> Description</td>
  </tr><tr>
    <td>Detector</td>
  </tr><tr>
    <td>Purchase Date</td>
  </tr><tr>
    <td>1/4/2021</td>
  </tr>
</table>

Best Regards,

Bof

The form will be shown in this format.

da_1299_0-1617952035220.png

 

May I know how can I change it from

da_1299_2-1617952220107.png

 

into this format?

da_1299_1-1617952167284.png

 

Hi @da_1299 :

Could you tell me what your last two screenshots are?

Best Regards,

Bof

They are the pictures showing about the direction of the a4 paper

Hi @da_1299 :

Are they related to PowerApps? Where did you take the picture from?

Best Regards,

Bof

No, they are not related to PowerApps as I would just like to use it to explain what I want my report looks like

Hi @da_1299 :

Get it.You can consider modifying the size(or orientation ) of the screen.

1.PNG

Best Regards,

Bof

Helpful resources

Announcements
Microsoft 365 Conference – December 6-8, 2022

Microsoft 365 Conference – December 6-8, 2022

Join us in Las Vegas to experience community, incredible learning opportunities, and connections that will help grow skills, know-how, and more.

Difinity Conference 2022

Difinity Conference 2022

Register today for two amazing days of learning, featuring intensive learning sessions across multiple tracks, led by engaging and dynamic experts.

European SharePoint Conference

European SharePoint Conference

The European SharePoint Conference returns live and in-person November 28-December 1 with 4 Microsoft Keynotes, 9 Tutorials, and 120 Sessions.

Power Apps Ideas

Check out the New Ideas Site

We are excited to announce a new way to share your ideas for Power Apps!

Top Solution Authors
Top Kudoed Authors
Users online (4,570)