css - iFrame Border Showing in WebView React Native -

-

in attempts dynamically add youtube videos react native app, chose use combination of webview , iframe since current react-native-youtube component doesn't work rn 16^. ultimately, solution work, iframe border still shows , not go away (even css or frameborder = 0), nor can change it's color css. ideas? here's code:

video-preview component (where users can see video, title, etc before tapping):

module.exports = react.createclass({   render: function() {       return (         <touchablehighlight            style={styles.touchcard}           underlaycolor={'transparent'}           onpress={this.props.onpress} >            <view style={styles.card}>             <webview                 style={styles.videopreview}                 automaticallyadjustcontentinsets={true}                 scrollenabled={false}                 style={styles.videopreview}                 html={this.props.source}                 renderloading={this.renderloading}                 rendererror={this.rendererror}                 automaticallyadjustcontentinsets={false} />               <view style={[styles.container, this.border('organge')]}>                   <view style={[styles.header, this.border('blue')]}>                       <text style={[styles.previewtext]}>{this.props.text}</text>                   </view>                   <view style={[styles.footer, this.border('white')]}>                     <view style={styles.sourcerow}>                       <view style={[this.border('white')]}>                         <imagebutton                             style={[styles.logobtn, , this.border('red'), styles.row]}                             resizemode={'contain'}                             onpress={this.onheartpress}                             source={this.props.src} />                       </view>                       <view style={[this.border('white')]}>                           <text style={[styles.rowtext, {fontweight: 'bold'}]}>{this.props.entrybrand}</text>                           <text style={[styles.rowtext]}>{this.props.views}</text>                       </view>                     </view>                     <view style={[styles.heartrow, this.border('black')]}>                       <keywordbox                            style={[styles.category, this.border('blue')]}                           key={this.props.key}                            text={this.props.category}                            onpress={this.props.categorypress}                           selected={this.props.selected} />                     </view>                   </view>               </view>             </view>         </touchablehighlight>       );

which looks this:

enter image description here

and input iframe html webview looks this:

<iframe style='border: 0;border-width: 0px;' scrolling='no' frameborder='0' width='320' height='300' src='https://www.youtube.com/embed/2b_qp9jgd7q'></iframe>

here's styling: 

var styles = stylesheet.create({   centertext: {     marginbottom:5,     textalign: 'center',   },   noresultstext: {     margintop: 70,     marginbottom:0,     color: '#000000',   },   sourcerow: {     justifycontent: 'space-around',      flexdirection: 'row',    },    rowtext: {     textalign: 'left',     color: 'white',      fontsize: 12,      marginleft: 5,      fontfamily: 'sfcompacttext-medium'   },    detailtext: {     fontfamily: 'sfcompacttext-light',     fontsize: 18,     color: 'white',      textalign: 'left',      margintop: 2,      marginleft: 5,    },    touchcard: {     margin: 3,      width: window.width*0.95,      shadowoffset: {width: 2, height: 2},     shadowopacity: 0.5,     shadowradius: 3,     alignself:'center',    },    card: {     flex: 1,      width: window.width*0.98,      alignself:'center',    },    hearttext: {     color: 'white',      fontsize: 12,      fontweight: 'bold',     alignself: 'center',      fontfamily: 'sfcompacttext-medium'   },    heartrow: {     flexdirection: 'row',      justifycontent: 'space-around',      alignself: 'center',      justifycontent: 'center',    },    logobtn: {     height: window.width/10,      width: window.width/10,      alignself:'center',    },    heartbtn: {     height: (92/97)*(window.width/13),      width: window.width/13,      alignself:'center',    },    category: {     fontfamily: 'bebas neue',      fontsize: 10,     fontweight: 'bold'   },    header: {     flex: 1,      justifycontent: 'space-around',      margintop: window.height/60,    },    footer: {     flex: 1,      flexdirection: 'row',      justifycontent: 'space-between',      alignitems: 'center',      margin: window.height/80,    },    container: {     flex: 1,      backgroundcolor: '#1a1a1a',    },    videopreview: {     flex: 2,      height: window.width*0.85,      width:window.width*0.98,      flexdirection: 'column'   },    previewtext: {     fontfamily: 'bebas neue',      fontsize: 23,     color: 'white',      textalign: 'left',      margintop: 2,      marginleft: 5,    },   });


Comments

Post a Comment

Popular posts from this blog

ruby - Trying to change last to "x"s to 23 -

-
i have been playing around irb , have string looks this: irb(main):072:0> puts ["[\"4354 5432 5432 xxxxx\", \"6547 6547 8543 xxxxx\", \"2344 6543 6674 xxxxx\", \"2346 6236 7543 xxxxx\", \"1273 5585 5587 xxxxx\"]"] => nil irb(main):073:0> what want gsub last 2 "x" s of each 17 digit combination, 23 . what i've tried far (i've been using rubular): a.gsub(/\d[x]/,"23") <= grabs "x" s i'm close a.gsub(/\w[x{2}]/,"23") <= grabs "x" s grabs two digits each combination. is there easier way i'm not understanding? a.gsub(/\d{4} \d{4} \d{4} xxx\kxx/, '23') \d{4} = 4 digits what \k drop matched far. can use don't replace entire number, still able validate have in desired format.
Read more

jquery - Clone last and append item to closest class -

-
this bare-bones code on page: <div class="list-container"> <div class="single-list-item"> <button>remove</button> </div> <div class="single-list-item"> <button>remove</button> </div> <div class="single-list-item"> <button>remove</button> </div> </div> <p><button class="add-list-item">add</button></p> <div class="list-container"> <div class="single-list-item"> <button>remove</button> </div> <div class="single-list-item"> <button>remove</button> </div> <div class="single-list-item"> <button>remove</button> </div> </div> <p><button class="add-list-item">add</button></p> <di...
Read more

css - Can I use the :after pseudo-element on an input field? -

-
i trying use :after css pseudo-element on input field, not work. if use span , works ok. <style type="text/css"> .mystyle:after {content:url(smiley.gif);} .mystyle {color:red;} </style> this works (puts smiley after "buu!" , before "some more") <span class="mystyle">buuu!</span>a more this not work - colors somevalue in red, there no smiley. <input class="mystyle" type="text" value="somevalue"> what doing wrong? should use pseudo-selector? note: cannot add span around input , because being generated third-party control. :after , :before not supported in internet explorer 7 , under, on elements. it's not meant used on replaced elements such form elements (inputs) , image elements . in other words it's impossible pure css. however if using jquery can use $(".mystyle").after("add smiley here"); api docs on .after to ...
Read more