React MUI - Consistent Tab Content Height

See also questions close to this topic

• how to change prettier format for react native

  my code formatting prettier didn't works well for react native, i don't understand where to config it but it works well with flutter

  from this code

        import { View, Text } from 'react-native'
      
      import React from 'react'
      
      export default function App() {
        return (
          <View>
      
      <Text>Apps</Text>   
  </View>
        )
      }
  

  it's formatted to this

  import {
    View,
    Text
  } from 'react-native'
  
  import React from 'react'
  
  export default function App() {
    return ( <
      View >
  
      <
      Text > Apps < /Text>
  
  
      <
      /View>
    )
  }
  
• react-router-dom v6 params only numbers

  I want add number regex in may param in react-router-dom v6. it work fin in v5 like it:

   <Route path="list/:id(\d+)" element={<MyComponent/>} /> 
  

  but it not work in v6.
• How can I fixed my problem"FirebaseError: Firebase: Error (auth/invalid-api-key)."

  My environment variable is ok. No comas and name mistakes but they given me error like "FirebaseError: Firebase: Error (auth/invalid-api-key)". How can I fixed it. Please Help me...

  This my .env file

  REACT_APP_apiKey=AIzaSyBWobnhbdeMdNpXXXXXXXXXXXXXXXXXXXX
  REACT_APP_authDomain=XXXXX.firebaseapp.com
  REACT_APP_projectId=XXXX
  REACT_APP_storageBucket=XXXXX.appspot.com
  REACT_APP_messagingSenderId=4997390XXXXX
  REACT_APP_appId=1:4997390XXXXX:web:cc7bc80aa1bdb78fXXXXXX
  REACT_APP_measurementId=G-M1XDXXXXXX
  

  This my firebase config file

  const firebaseConfig = {
    apiKey: process.env.REACT_APP_apiKey,
    authDomain: process.env.REACT_APP_authDomain,
    projectId: process.env.REACT_APP_projectId,
    storageBucket: process.env.REACT_APP_storageBucket,
    messagingSenderId: process.env.REACT_APP_messagingSenderId,
    appId: process.env.REACT_APP_appId,
    measurementId: process.env.REACT_APP_measurementId,
  };
  
  when I debugging firebaseConfig object
  
  console.log(firebaseConfig.apiKey);  ==========> undefined 
  console.log(firebaseConfig.authDomain);  ==========> undefined 
  console.log(firebaseConfig.projectId);  ==========> undefined 
  console.log(firebaseConfig.storageBucket); ==========> undefined 
  console.log(firebaseConfig.measurementId); ==========> undefined 
  console.log(firebaseConfig.appId); ==========> undefined 
  console.log(firebaseConfig.measurementId); ==========> undefined 
  
  

  client side given error this "FirebaseError: Firebase: Error (auth/invalid-api-key)"
• MUI Radio button disabled change value when Select drop down changes

  My problem is that when I change a value in a dropdown I want to disable two radio buttons and change to the correct radio button. I am able to disable the radio buttons but not able to change the value to the one that isn't disabled. This might sound very complicated but I have made a code sandbox showing an example making it very simple to understand what goes wrong. So in the example which is the same as the code below. When the dropdown gets changed to buildings, both and colors should be disabled(Which happens now) but I also want it to autoselect the "Citys" radio button. https://codesandbox.io/s/competent-austin-igz4uh?file=/src/App.js:0-1905

  What I have tried so far: I have tried using a useEffect to change when the select dropdown changes but it didn't work.

  import "./styles.css";
  import {
    FormControl,
    FormLabel,
    RadioGroup,
    Radio,
    FormControlLabel,
    InputLabel,
    Select,
    MenuItem
  } from "@material-ui/core";
  import React, { useState, useEffect } from "react";
  export default function App() {
    const [chosenSorting, setChosenSorting] = useState("colors");
    const [sortingType, setSortingType] = useState("both");
    function handleChange(event) {
      setChosenSorting(event.target.value);
    }
    useEffect(() => {
      if (chosenSorting === "colors") {
        setSortingType("colors");
      }
    }, [chosenSorting]);
    return (
      <>
        <FormControl fullWidth>
          <InputLabel id="demo-simple-select-label">Chosen Sorting</InputLabel>
          <Select
            labelId="demo-simple-select-label"
            id="demo-simple-select"
            value={chosenSorting}
            label="Chosen Sorting"
            onChange={handleChange}
          >
            <MenuItem value={"colors"}>Colors</MenuItem>
            <MenuItem value={"buildings"}>Buildings</MenuItem>
          </Select>
        </FormControl>
        <FormControl>
          <FormLabel id="demo-radio-buttons-group-label">
            Fylke or Kommune
          </FormLabel>
          <RadioGroup
            row
            defaultValue="both"
            onChange={(e) => setSortingType(e.target.value)}
          >
            <FormControlLabel
              disabled={chosenSorting === "buildings"}
              control={<Radio />}
              value="both"
              label="Both"
            ></FormControlLabel>
            <FormControlLabel
              control={<Radio />}
              disabled={chosenSorting === "buildings"}
              value="colors"
              label="Colors"
            ></FormControlLabel>
            <FormControlLabel
              control={<Radio />}
              value="citys"
              label="Citys"
            ></FormControlLabel>
          </RadioGroup>
        </FormControl>
      </>
    );
  }
  
• MUI/Icon makes everything dissapear

  When I try to import and use a mui icon in react, it makes the whole div dissapear, and just the background image remain, i have installed: emotion/react, emotion/styled, mui/icons-material, mui/material, styled-components, mui/styled-engine-sc

          <div className="login">
          <h1>Login</h1>
          <div className="form">
              <EmailIcon className='icon'/>
              <input type="text" placeholder="Email"></input>
              <input type="password" placeholder='Password'></input>
          </div>
          <div className="buttons">
              <button id='login'>Login</button>
              <button id='register'>Register</button>
          </div>
      </div>
  )
  
• xterm-addon-fit not working when it parent is a tab has forceRender={true}

  I'm using forceRender={true} in order to preserve the state/context of the xterm.js termina emulator. However, when it's set, fitAddon.fit(); doesn't work. What am I missing?

  creating react the tab like this:

  <TabPanel key="3" forceRender={true}>
    <Terminal />
  </TabPanel>
  

  Where Terminal component is:

  export const Terminal = () => {
    useEffect(() => {
      const terminal = new TerminalType({
        cursorBlink: true,
        cursorStyle: window.api.isWindows ? "bar" : "underline"
      });
  
      const fitAddon = new FitAddon();
      terminal.loadAddon(fitAddon);
  
      window.api.receive('terminal.incomingData', (data) => {
        terminal.write(data);
      });
      
      terminal.open(document.getElementById('xterm-container') as HTMLElement);
      terminal.onData((key) => {
        window.api.send('terminal.keystroke', key);
      });
      fitAddon.fit();
      window.api.send('terminal.keystroke', '\r');
    }, []);
  
    return (
      <div id="xterm-container"></div>
    )
  }
  
• Google Apps Script: Generate PDF and preview in new tab

  I had generated a PDF file by submitting Google Form, and I can use "window.open" to open a new tab, but I don't know how to get the URL of generated PDF!

  window.open('url', '_blank');
• Problems getting real width and height of videos

  I'm having a problem when I upload videos. The thing is that I record my videos with my cellphone in vertical way and when I download them to my computer or pass them through whatsapp they still look vertical, I can still watch them in vertical way as I recorded them, but when I try to upload them on my website using PHP and FFMPEG I always get horizontal resolutions.

  I use this command to get the width of my videos:

  $width = $video_attributes['width'];

  The variable $video_attributes is an array that comes from a FFMPEG function that returns an array with the data related to the video.

  Somebody could help me out with some ideas about what I'm doing wrong?

  I need to get the vertical resolution so my videos will be displayed in vertical containers in my website.

  Thanks in advance :)
• Why CSS Height not working on IOS devices?

  I have simple Bootstrap card that need to have fixed height. When i set the height from css it works everywere except on IOS devices. When I test it on IPad I can see only the image and the title, but the text and the link are hidden. If i change the height to 600px than I can see whole card but it looks odd on desktop/android devices.

  Why IOS is not reading properly height? Is there some media-queries or --webkit to catch if the page is opened from IOS device and change the height specific for IOS?

  HTML:

  <div class="card card-wrapper" style="width: 18rem;">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">Some quick example text to build on the card 
  title and make up the bulk of the card's content.</p>
      <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
  </div>
  

  CSS:

  .card-wrapper {
  height:450px;
  }
  
• I wrote a recursive method in java to calculate the height of a tree and my question is how can I get this method to print the height one time

  So here is my method:

  public int getHeight(IntTreeNode root) {
          if(root == null) {
              return 0;
          }
          int height = 1 + Math.max(getHeight(root.left), getHeight(root.right));
           
          System.out.println(height);
          }
          return height;
      }
  

  I know that since it's a recursive method it will print the height in loops until it reaches the final height, but what I want is for this method to print the final height only. Any ideas on how to make this work anyone? thanks.