Apply specified frame heights correctly. Fixes h2oai/q#1216

h2oai · Aug 11, 2020 · 3ac8b8c · 3ac8b8c
1 parent 6161bf2
commit 3ac8b8c
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 17 deletions.
diff --git a/ui/src/form.tsx b/ui/src/form.tsx
@@ -1,6 +1,5 @@
 import * as Fluent from '@fluentui/react';
 import React from 'react';
-import { stylesheet } from 'typestyle';
 import { Button, Buttons, XButtons, XStandAloneButton } from './button';
 import { Checkbox, XCheckbox } from './checkbox';
 import { Checklist, XChecklist } from './checklist';
@@ -11,23 +10,23 @@ import { DatePicker, XDatePicker } from './date_picker';
 import { Dropdown, XDropdown } from './dropdown';
 import { Expander, XExpander } from './expander';
 import { FileUpload, XFileUpload } from './file_upload';
+import { Frame, XFrame } from './frame';
 import { Label, XLabel } from './label';
 import { cards } from './layout';
 import { Link, XLink } from './link';
 import { MessageBar, XMessageBar } from './message_bar';
 import { Progress, XProgress } from './progress';
+import { bond, Card, Packed, unpack, xid } from './qd';
 import { Separator, XSeparator } from './separator';
 import { Slider, XSlider } from './slider';
 import { Spinbox, XSpinbox } from './spinbox';
 import { Table, XTable } from './table';
 import { Tabs, XTabs } from './tabs';
-import { bond, Card, Packed, unpack, xid } from './qd';
-import { Text, XText, TextXs, TextXl, TextL, TextM, TextS } from './text';
+import { Text, TextL, TextM, TextS, TextXl, TextXs, XText } from './text';
 import { Textbox, XTextbox } from './textbox';
 import { getTheme } from './theme';
 import { Toggle, XToggle } from './toggle';
 import { XToolTip } from './tooltip';
-import { Frame, XFrame } from './frame';
 
 /** Create a component. */
 export interface Component {
@@ -100,12 +99,6 @@ interface State {
 
 const
   theme = getTheme(),
-  css = stylesheet({
-    card: {
-      display: 'flex',
-      flexDirection: 'column',
-    },
-  }),
   defaults: Partial<State> = {
     items: []
   }
@@ -159,7 +152,7 @@ const
           items = unpack<Component[]>(s.items) // XXX ugly
 
         return (
-          <div className={css.card}>
+          <div>
             <XComponents items={items} />
           </div>)
       }

diff --git a/ui/src/frame.tsx b/ui/src/frame.tsx
@@ -53,21 +53,24 @@ const
     return s.replace(/(\s+src\s*=\s*["'])\//g, `$1${window.location.protocol}//${window.location.host}/`)
   },
   inline = (s: S): S => `data:text/html;base64,${btoa(fixrefs(s))}`,
-  InlineFrame = ({ path, content, width, height }: { path?: S, content?: S, width: S, height: S }) => (
-    <iframe title={xid()} src={path ? path : content ? inline(content) : inline('Nothing to render.')} style={{ width, height }} frameBorder="0" />
+  InlineFrame = ({ path, content }: { path?: S, content?: S }) => (
+    <iframe title={xid()} src={path ? path : content ? inline(content) : inline('Nothing to render.')} frameBorder="0" width="100%" height="100%" />
   )
 
-export const XFrame = ({ model: { path, content, width, height } }: { model: Frame }) => {
-  return <InlineFrame path={path} content={content} width={width || '100%'} height={height || '150px'} />
-}
+// HACK: Applying width/height styles directly on iframe don't work in Chrome/FF; so wrap in div instead.
+export const XFrame = ({ model: { path, content, width, height } }: { model: Frame }) => (
+  <div style={{ width: width || '100%', height: height || '150px' }}>
+    <InlineFrame path={path} content={content} />
+  </div>
+)
 
 const
   View = bond(({ state, changed }: Card<State>) => {
     const render = () => (
       <div className={css.card}>
         <div className={css.title}>{state.title}</div>
         <div className={css.body}>
-          <InlineFrame path={state.path} content={state.content} width='100%' height='100%' />
+          <InlineFrame path={state.path} content={state.content} />
         </div>
       </div>
     )