How to make Material-UI Datatable responsive to window size

See also questions close to this topic

• JSON-LD created by javascript is not displayed in view-source

  There are 'duplicates' to my question but nobody answer my question :(

  I am trying to generate JSON-LD structured data with javascript. Everything was fine until I checked from the tool, the JSON-LD code generated by javascript doesn't show up on the test table. When I proceed to view source on chrome it do not display the JSON-LD code.

  You can see it live here

  The code is below

  <script id='myJSONID' type='application/ld+json'></script>
  <script type='text/javascript'>
  //<![CDATA[
  $('#myJSONID').text(function() {
      return JSON.stringify({
          "@context":"https://schema.org",
          "@type":"Review",
          "author": {
              "@type":"Person",
              "name":"Nhà đất Sơn Nghĩa",
              "sameAs":"https://www.nhadatsonnghia.com/"
          },
          "inLanguage":"vi",
          "itemReviewed": {
              "@type":"Product",
              "name": "" + document.title,
              "description":"" + document.getElementsByName("description")[0].content,
              "aggregateRating": {
                  "@type": "AggregateRating",
                  "ratingValue": "5",
                  "bestRating": "5",
                  "ratingCount": "20"
               }
          }
      });
  });
  //]]>
  </script>
  

  Does the above code have any problem? If not then how the JSON-LD code generated by javascript can be displayed when view-source (Ctrl + U)

  Any suggestions are appreciated!

  Thanks so much!
• fabricJS: Scale canvas view

  I have converted a pdf to image format using PDF.JS and rendered that to the canvas. While that process the rendered pdf image is showing blurred in the canvas.

  I have no idea how to scale the image to some viewable format rather than being so blurred.

  Image of the pdf in canvas:

  

  Here in the image you can clearly see that the rendered image is not in readable format!

  Here is the fiddle link: https://jsfiddle.net/kjxes63f/

  var fabricCanvas;
  fabricCanvas = new fabric.Canvas('firtcanvas');
  
  document.querySelector("#pdf-upload").addEventListener("change", function (e) {
      var file = e.target.files[0]
      console.log("pdf evente");
      console.log(e);
      if (file.type != "application/pdf") {
          console.error(file.name, "is not a pdf file.")
          return
      }
  
      var fileReader = new FileReader();
  
      fileReader.onload = function () {
          var typedarray = new Uint8Array(this.result);
          console.log("typedarray");
          console.log(typedarray);
          console.log("this.result");
          console.log(this.result);
          PDFJS.getDocument(typedarray).then(function (pdf) {
              // you can now use *pdf* here
              console.log("the pdf has ", pdf.numPages, "page(s).")
              pdf.getPage(pdf.numPages).then(function (page) {
                  // you can now use *page* here
                  var viewport = page.getViewport(2.0);
                  var fabricCanvas = document.querySelector("#firtcanvas")
                  fabricCanvas.height = viewport.height;
                  fabricCanvas.width = viewport.width;
  
                  page.render({
                      canvasContext: fabricCanvas.getContext('2d'),
                      viewport: viewport
                  }).then(function () {
  
                      bg = fabricCanvas.toDataURL("image/png");
  
                      fabric.Image.fromURL(bg, function (img) {
                          img.scaleToHeight(800);
                          img.scaleToWidth(600);
                          console.log("img");
                          console.log(img);
                          console.log(bg);
                          var imgCanvas = img.set({ left: 0, top: 0, width: 150, height: 150 });
                          fabricCanvas.add(imgCanvas);
  
                      });
                  });
              });
          });
      };
      fileReader.readAsArrayBuffer(file);
  });
  
• Creating Vue.js edit-in-place functionality, need to change div visiblity based on toggling a variable

  I am trying to build edit-in-place place functionality into my app. The simplest way I can think of is to have two divs, one which displays the value and the other which displays the value within a form-field. If the user clicks the non-editable version it is replaced with the editable version.

  The HTML looks like this:

  <div class="row" v-for="x in items">
      <div class="col-md-10" v-if="!x.show_name" @click="toggle_show_name(x)">{{x.name}}</div>
      <div class="col-md-10" v-if="x.show_name">
          <input type="text" :value="x.name" class="form-control"/>
      </div>
  </div>
  

  And the method looks like this:

  methods: {
      toggle_show_name: function(x){
          x.show_name = !x.show_name
      },
  }
  

  Note: the x.show_name variable is set after loading the items via an Ajax call.

  The first question is, is this possible? I've read that Vue.js won't recompute the v-if condition, and so it won't toggle the divs, but I've also seen similar examples of toggling data visibility that suggest it will work. The second question, if this is possible have I done it right, or is there a mistake in here or is there a better way to do this.
• CSS Bootsrap Carousel padding disappearing on slide

  I am trying to create a bootstrap carousel and I have it completed but for some reason the padding disappears when the slider slides. You can view it at: https://test.albright.edu/home-copy/ near the "Learn about yourself and the world around you" text. The code I am using to move the slider is:

  .page-id-39896 .carousel-inner .item.left.active {
    transform: translateX(-33%);
  }
  .page-id-39896 .carousel-inner .item.right.active {
    transform: translateX(33%);
  }
  
  .page-id-39896 .carousel-inner .item.next {
    transform: translateX(33%)
  }
  .page-id-39896 .carousel-inner .item.prev {
    transform: translateX(-33%)
  }
  
  .page-id-39896 .carousel-inner .item.right,
  .page-id-39896 .carousel-inner .item.left { 
    transform: translateX(0);
  }
  

  I am using this to make it not appear as though it is not sliding 3 slides at a time since the normal "slide" bootstrap carousel will slide all three slides at once so i am giving the appearance of only sliding one at a time.
• MouseParallax and classic js transition doesn't work

  I have a problem which I can not find any solution: In fact I use the parallax.js library of matthew that allows me to have a parallax effect on a mousemove but when I put a js classic transition to the CSS class parallax becomes ultra slow and buged, how to fix it plz?

  
  <body>
          <div id="fullpage">
                  <div class="section">Some section</div>
                  <div class="section section-2">
                          <div id="device">
                                  <div data-depth="0.2" class="ordi"><img src="./img/ordi.png" alt="ordi"></div>
                                  <div data-depth="0.2" class="clavier"><img src="./img/clavier.png" alt="test"></div>
                                  <div data-depth="0.2" class="smartphone"><img src="./img/smartphone.png" alt="test"></div>
                          </div>
  
                  </div>
                  <div class="section">Some section</div>
                  <div class="section">Some section</div>
              </div>
  </body>
  

  
  document.getElementsByClassName('ordi')[0].classList.add('transition-device');
  document.getElementsByClassName('clavier')[0].classList.add('transition-device');
  document.getElementsByClassName('smartphone')[0].classList.add('transition-device');
  
  var scene = document.getElementById('device');
  var parallaxInstance = new Parallax(scene);
  console.log(parallaxInstance)
  
  

  
  
  
  #device img {
      width: 30vw;
  }
  
  #device .transition-device{
      top: 0%;
      left: 10%;
      opacity: 1; 
  }
  
  .ordi{
      opacity: 0;
      top: -30%;
      left: 10%;
     position: absolute;
     transition: all 1.5s cubic-bezier(.71,-0.03,.25,.78);
  }
  
  .clavier{
      opacity: 0;
      top: 20%;
      left: -10%;
     position: absolute;
     transition: all 1.5s cubic-bezier(.71,-0.03,.25,.78);
  }
  
  .smartphone{
      opacity: 0;
      top: 20%;
      left: 20%;
     position: absolute;
     transition: all 1.5s cubic-bezier(.71,-0.03,.25,.78);
  }
  
• How do I change the weight and color of the border of the Material UI Dialog?

  Hello I am trying to add an external frame to the Dialog Box from Material UI. I was trying to do this but nothing happened:

  overrides: {
    MuiDialog :{
      paper : { 
        borderWidth : 10,
        borderRadius: 10,
        borderColor : "#FFFFFF",
        backgroundColor : "#101010"
      }
  }, .......
  

  Do you know a way to do by using overrides in the MUI theme?

  Thanks
• How to apply position absolute in react

  I created react project, In that I have one Parent Component that is App.js and for that parent component, Testing.js is child Component.

  Now in parent component I put Image, and in that parent component I imported child component which is Testing.js

  In Testing.js I have only h1 tag that is Testing

  Now When I try output h1 tag is coming under Image

  My Goal is how to move h1 tag into middle of the Image. But I need to move it only by using position absolute. Please tell me how to do this in react?

  This is App.js

  import React from 'react';
  import './App.css';
  import Testing from './Testing/Testing';
  
  function App() {
    return (
      <div className='container-fluid'>
        <div className='row'>
          <div className='Images'>
            <img className='' src='assets/images/new.jpeg' alt='logo'></img>
          </div>
          <Testing></Testing>
        </div>
      </div>
    );
  }
  
  export default App;
  

  This is App.css

  .Images img {
    width: 100%;
  }
  
  .Images {
    width: 20%;
  }
  
  

  This is Testing.js

  import React from 'react';
  import './Testing.css';
  
  
  function Testing() {
      return(
          <div className='container-fluid'>
              <div className='row'>
                  <h1>Testing</h1>
              </div>
          </div>
      )
  }
  
  export default Testing
  
  
• React Full Width Text

  I found this web-component https://github.com/pomber/full-width-text but it relies on Polymer to function.

  Does anyone know how I can extract the useful parts and use it as a React component?

  I've also tried an alternative called React FitText but it wasn't a great solution as the text overflowed the container height etc...

  Thanks.
• Errno -4058: no such file or directory

  error is npm ERR! errno -4058 npm ERR! syscall open npm ERR! enoent ENOENT: no such file or directory, open 'F:\React_practice\student\package.json' npm ERR! enoent This is related to npm not being able to find a file. npm ERR! enoent

  npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\R C Reddy Jonnala\AppData\Roaming\npm-cache_logs\2019-12-05T16_45_53_235Z-debug.log PS F:\React_practice\student>

  enter image description here
• Unable to execute if statement

  I feel like this may be an easy solution but I am having a hard time understanding on why I unable to get rid of the errors in regards to my if statement.

  I am getting a number of syntax errors in regards to my if statement if (selectedDate < new Date().toISOString().split('T')[0]) { selectableRows: "none" }

  I've tried adding a return (selectableRows: "none") but that did not resolve my issues either.

   const custom = {
          customToolbar: () => <DataTableRefreshButton refresh={refresh} />,
          customToolbarSelect: (selectedRows, displayData) => (
              <TestToolBar
                  data={data}
                  alert={alert}
                  rows={rows}
                  type={type}
              />
          ),
          isRowSelectable: (displayData) => {
  
              const data= updatedStaff[
                  data
              ];
           return (currentData.ActionTypeID > 0 || currentData.ActionCompletedByID > 0   ? false : true)
          },
           if (selectedDate < new Date().toISOString().split('T')[0]) {
          selectableRows: "none"
          }
      };
  
  
• how to change only the color of the chip clicked in react from a dynamically created array of chips

  When a users drags and drops an excel or csv file on me I am dynamically creating material-ui chips from the columns of that file. I am showing them the columns and allowing the user to click the column they want then I build list for them based on the data that is associated with that column. Everything is working correctly except for when the user clicks the chip I want the chip to turn green and add a checkmark to indicate that is the chip selected. They can select many chips so if they select another one I want that chip to turn green. They can also hit the x and deselect the chip at which point i want the chip to go back to the original color and check to go away.

    return (
    <div>
      {
        props.dropdownkeys.map((value, index) => (
          <Chip label={value}
            icon={<CheckIcon key={index} id={`check_${value}`} color='primary' visibility={clickedChip ? 'visible' : 'hidden'}/>}
            key={index}
            onClick={() => addChip(value, index)}
            onDelete={() => deselectChip(value, index)}
            size='small'
            id={`chip_${value}`}
            ref={setChipRef}
            className={clickedChip ? classes.chipSelected : classes.chip }
          />
        ))
      }
    </div>
  );
  

  this is my dynamically created chips i am trying to trigger based off a useState hook to change clickedchip

   const [clickedChip, setClickedChip] = useState(false);
  

  this is my addchip functionality

  function addChip(value: number | string, index: number) {
    debugger;
    const chipClicked = getClickedChip(index);
  
    if (chipClicked !== null) {
      // chipClicked[0].style.backgroundColor = 'green';
      // (chipClicked[0].firstChild as HTMLElement).style.color = 'red';
      // (chipClicked[0].firstChild as HTMLElement).attributes[6].value = 'visible';
    }
  
    const getCols = props.excelDocumentObj.filter((column) => {
      if (column[value] !== undefined) {return column[value];} else { return null;}
    }); 
    if (props.storeString !== '') {
      props.setStoreString(',');
    }
  
    const rowLen = getCols.length;
    for (const [i, storeNum] of getCols.entries()) {
      if(typeof storeNum[value] === 'number') {
        if(rowLen !== i + 1) {
          props.setStoreString(`${storeNum[value] },`);
        }
        else {
          props.setStoreString(`${storeNum[value]}`);
        }
      }
    }
    creatorStore.handleStoreListFromExcel(props.storeString);
  }
  

  the problem i ma having I am changing all of the chips in the renderer not the selected chip like I want. I do not want to access the chip through the dom because basically I was told not to do this on my pull request. I am new to react so I am having issues doing this simple task and any help would be appreciated.