I'm using react native expo to display images of various subjects. The images I'm using have a variety of widths, heights and aspect ratios. The images themselves come from google firebase storage and are retrieved from the currently selected subjects JSON data which contains the firebase storage Image URL.
Some subjects have no images at all, which is fine however I want the content below to therefore move up, so a fixed size/aspect ratio image or view in this case is not appropriate. And as I said Images are of various heights and widths (some landscape / some portrait.
Currently the styling for the image I'm attempting is like so:
Image: {
height: null,
width: "90%",
alignSelf: 'center',
resizeMode: 'contain'
},
Currently with the height set to null the image is not shown at all, and the content below sits above.
The width I want fixed at 90% of the screen's width which it currently is doing, however I'm having issues with the height. I've tried setting the height at 'undefined' and also percentages '40%' etc however this is not appropriate for the subjects missing images.
Another way I have tried is placing the image inside a view like so:
<View style={styles.ImageContainer}>
<Image style={styles.Image} source={{ url: subject.ImageUrl }}/>
</View>
...
// Styling:
Image: {
height: null,
width: "100%", // 100% of the image container which is 90% of screen.
alignSelf: 'center',
resizeMode: 'contain'
},
ImageContainer: {
width: '90%',
alignSelf: 'center',
justifyContent: 'center'
}
What I really want to achieve is setting the image container to the size of the image height, which is resized so it fills 90% of the screens width (without skewing/stretching the image).
Is there are way of doing this within the styling or do I have to attempt using a function? I'm sure I have had success achieving this through styling in the past.
You could use a minHeight for the image to make sure it shows, it should use the actual image height but setting a minimum will allow it to display.
OR
You could use Image.getSize() and use the exact height of the image. However, Image.getSize() is an async function so you would have to await it to get the size until you can display the image.
I am currently using the javascript library nipple.js to add a joystick element to my vue.js-website.
The joystick is placed inside a resizeable parent-element but is of static size itself.
I was wondering how it would be possible to make the joystick element resize with its parent so it would have a fitting size when resizing the parent but also on different screen sizes in general.
This is how I initialize my Joystick in Vue right now
const options = {
zone: this.$refs.nippleRef,
mode: 'static',
position: { left: '25%', top: '50%' },
dynamicPage: true, // needed because of vue
size: 150,
restOpacity: 0.75,
};
I tried using e.g. a percentage in the place of the 150 at the size value. However only numbers are valid there.
I was wondering if there is a way to make the Joystick responsive either through javascript or with css?
And this is the template part of the vue file btw:
<v-col>
<div>
<div ref="nippleRef"></div>
</div>
</v-col>
Thank you in advance!
I am building a time picker using react-slick library for carousels like below:
Client asked me to have an ablity for scrolling time using mouse wheel. I managed to implement it, however when I scroll using mouse, all pickers scroll at once. The idea is to have each time picker independent scroll when hovering over them. Here is what I have so far:
My code
Can anyone assist me with that ?
2 things :
in your listener, you should use a boolean each time (if (e.target.closest('.slider1'))
you should use swiper if you need your sliders to be scrolled, it's built in. (https://swiperjs.com/react/)
Here is what you could do to allow a scroll and hide the scrollbar:
<div
style={{
overflow: 'hidden'
}}
>
<div
style={{
height: '159px',
width: '100px',
overflow: 'auto',
boxSizing: 'content-box',
paddingRight: '17px',
}}
>
<Slider
{...settings}
className='slider-entity hours'
ref={(slider) => (this.slider1 = slider)}
>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
<div>16</div>
</Slider>
</div>
</div>
I added the style directly for simplicity.
Height and width are mandatory on the child for the box-sizing property to works.
I based my answer on this thread
I have this example https://stackblitz.com/edit/react-sjyuej?file=Chart1.jsx
where I'm trying to make the the two charts in the left container share the height and respond to window resizing.
I've made the width responsive by setting overflow: hidden, forcing the charts to rescale as far as I understand, but I don't know how to get the same effect with the height.
Setting height='100%' in the Chart component doesn't help.
Use the highcharts-react-official package (>= 2.1) and set containerProps={{ style: { height: "100%" } }}.
This will make the chart dynamically resize to fill its parent div. You can then set up parent divs using flexbox to get your desired layout.
For example your render method would look like this:
render() {
return (
<HighchartsReact
containerProps={{ style: { height: "100%" } }}
highcharts={ Highcharts }
options={ options }
/>
);
}
Here is a live demo
Make sure you are on version >= 2.1 of highcharts-react-official (see this github issue)
After setting the height, you need to use chart.reflow() method:
componentDidMount(){
const container = this.chartComponent.current.container.current;
const table = document.getElementsByClassName('table')[0];
container.style.height = table.clientHeight + 'px';
this.chartComponent.current.chart.reflow();
}
API: https://api.highcharts.com/class-reference/Highcharts.Chart#reflow
Live demo: https://stackblitz.com/edit/react-3jwwvt?file=ChartOfficial.jsx
Let me start by saying I am well aware this is a duplicate question - TinyMCE width and height disobedient!
The trouble is I have tried all the css fixe suggested to no avail and I am not using an init (where the docs i found tell you to set your width and height) - I dont know why, I did this along time ago.
Here is the mce code which is being launched in an aftershow event of a fancybox:
$('textarea.tinymce').tinymce({
// Location of TinyMCE script
script_url: '/assets/js/common/tiny_mce/tiny_mce.js',
// General options
theme: "advanced",
plugins: "autolink,lists,pagebreak,table,advlink,iespell,inlinepopups,insertdatetime,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,template,advlist",
// Theme options
theme_advanced_buttons1: "undo,redo,|,cut,copy,paste,|,bold,italic,underline,|,forecolor,|,justifyleft,justifycenter,justifyright,justifyfull,|,sub,sup,|,formatselect,fontsizeselect",
theme_advanced_buttons2: "tablecontrols,|,charmap,iespell,|,cite,abbr,acronym,|,bullist,numlist,|,outdent,indent,blockquote,|,link,unlink,|,fullscreen",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
theme_advanced_resizing: false
});
Please someone, tell me how to make this god damn thing 500px wide. I tried this(does nothing):
.mceEditor > table {
width:500px !important;
}
Tried putting this in general options in my code:
width:"500",
Tried setting columns of the textarea to 2
Tried setting the css width of the following elements with !important:
id=desc_mce_parent, id="desc_mce_tbl"
I have set resizing to false
Nothing changes no matter what I do - why?
Ok... I feel a bit of an idiot saying this but in my case it was because my toolbars were too big. I solved this by spreading my buttons over three toolbars - you can set the width using css but it wont go smaller than your toolbars and the they will not wrap around (seems like that might be a good feature).