SharePoint online custom list formatting – only Transform or writing-mode css ignored

Trying to style the list in the matrix mode where the column headers needs to be hidden and want to display custom headers. On the headers I am applying the style with writing-mode: vertical-rl and transform:rotate(-180deg) along with couple of more styling options.

The column header is visible with rest of the styling when checked in debug mode except the above two.
I need to change the writing-mode as have to show the text vertical aligned due to huge matrix.

I have been trying various things- In the following code, the column header “Long header for the column 2” is the column where I am trying to apply styling.

Sample Code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "hideColumnHeader": true,
  "hideSelection": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "display": "flex",
      "flex-direction": "column",
      "align-items": "flex-start"
    },
    "children": (
      {
        "elmType": "div",
        "attributes": {
            "class":"ms-bgColor-themePrimary ms-fontColor-white"
            
        },
        "style": {
                "display": "=if(@rowIndex == 0, 'flex', 'none')",
                "font-weight": "bold",
                "font-size": "11px",
                "width": "90%",
                "padding": "1px",
                "border-bottom-width": "1px",
                "border-bottom-style": "solid",
                "border-top-width": "1px",
                "border-top-style": "solid"
        },
        "children": (
          {
            "elmType": "div",
            "txtContent": "nnnnnSome generic header 1",
            "style": {
                "flex-grow":"1",
                "width":"300px",
                "border-right-width":"1px",
                "border-right-style":"solid",
                "border-left-width":"1px",
                "border-left-style":"solid",
                "text-align":"center",
                "vertical-align": "middle"
            }
          },
          {
            "elmType": "div",
            "txtContent": "Long header for the column 2",
            "style": {
                    "width":"30px",
                    "padding":"0.5cm 5.4pt 0.5cm 5.4pt",
                    "writing-mode": "vertical-rl",
                    "transform":"rotate(-180deg)",
                     "border-right-width":"1px",
                    "border-right-style":"solid"
            }            
          },
          {
            "elmType": "div",
            "txtContent": "Long header for the column 3",
            "style": {
                    "width":"30px",
                    "padding":"0.5cm 5.4pt 0.5cm 5.4pt",
                    "writing-mode": "vertical-rl",
                    "border-right-width":"1px",
                    "border-right-style":"solid"

            }
          },
          {
            "elmType": "div",
            "txtContent": "Long header for the column 4",
            "style": {
                    "width":"30px",
                    "padding":"0.5cm 5.4pt 0.5cm 5.4pt",
                    "writing-mode": "tb-rl",
                    "border-right-width":"1px",
                    "border-right-style":"solid"
            }
          },
          {
            "elmType": "div",
            "txtContent": "Long header for the column 5",
            "style": {
                    "width":"30px",
                    "padding":"0.5cm 5.4pt 0.5cm 5.4pt",
                    "writing-mode": "tb-rl",
                    "border-right-width":"1px",
                    "border-right-style":"solid"
            }
          },
          {
            "elmType": "div",
            "txtContent": "Long header for the column 6",
            "style": {
                    "width":"30px",
                    "padding":"0.5cm 5.4pt 0.5cm 5.4pt",
                    "writing-mode": "tb-rl",
                    "border-right-width":"1px",
                    "border-right-style":"solid"
            }
          },
          {
            "elmType": "div",
            "txtContent": "Long header for the column 7",
            "style": {
                    "width":"30px",
                    "padding":"0.5cm 5.4pt 0.5cm 5.4pt",
                    "writing-mode": "tb-rl",
                    "border-right-width":"1px",
                    "border-right-style":"solid"
            }
          },
          {
            "elmType": "div",
            "txtContent": "Long header for the column 8",
            "style": {
                    "width":"30px",
                    "padding":"0.5cm 5.4pt 0.5cm 5.4pt",
                    "writing-mode": "tb-rl",
                    "border-right-width":"1px",
                    "border-right-style":"solid"
            }
          },
          {
            "elmType": "div",
            "txtContent": "Long header for the column 9",
            "style": {
                    "width":"30px",
                    "padding":"0.5cm 5.4pt 0.5cm 5.4pt",
                    "writing-mode": "tb-rl",
                    "border-right-width":"1px",
                    "border-right-style":"solid"
            }
          }, 
          {
            "elmType": "div",
            "txtContent": "Long header for the column 10",
            "style": {
                    "width":"30px",
                    "padding":"0.5cm 5.4pt 0.5cm 5.4pt",
                    "writing-mode": "tb-rl",
                    "border-right-width":"1px",
                    "border-right-style":"solid"
            }
          },
          {
            "elmType": "div",
            "txtContent": "Long header for the column 11",
            "style": {
                    "width":"30px",
                    "padding":"0.5cm 5.4pt 0.5cm 5.4pt",
                    "writing-mode": "tb-rl",
                    "border-right-width":"1px",
                    "border-right-style":"solid"
            }
          },
          {
            "elmType": "div",
            "txtContent": "Long header for the column 12",
            "style": {
                    "width":"30px",
                    "padding":"0.5cm 5.4pt 0.5cm 5.4pt",
                    "writing-mode": "tb-rl",
                    "border-right-width":"1px",
                    "border-right-style":"solid"
            }
          },
          {
            "elmType": "div",
            "txtContent": "Long header for the column 13",
            "style": {
                    "width":"30px",
                    "padding":"0.5cm 5.4pt 0.5cm 5.4pt",
                    "writing-mode": "tb-rl",
                    "border-right-width":"1px",
                    "border-right-style":"solid"
            }
          },
          {
            "elmType": "div",
            "txtContent": "Long header for the column 14",
            "style": {
                    "width":"30px",
                    "padding":"0.5cm 5.4pt 0.5cm 5.4pt",
                    "writing-mode": "tb-rl",
                    "border-right-width":"1px",
                    "border-right-style":"solid"
            }
          },
          {
            "elmType": "div",
            "txtContent": "Long header for the column 15",
            "style": {
                    "width":"30px",
                    "padding":"0.5cm 5.4pt 0.5cm 5.4pt",
                    "writing-mode": "tb-rl",
                    "border-right-width":"1px",
                    "border-right-style":"solid"
            }
          },
          {
            "elmType": "div",
            "txtContent": "Long header for the column 16",
            "style": {
                    "width":"30px",
                    "padding":"0.5cm 5.4pt 0.5cm 5.4pt",
                    "writing-mode": "tb-rl",
                    "border-right-width":"1px",
                    "border-right-style":"solid"
            }
          }
        )
      },
      {
        "elmType": "div",
        "attributes": {
         
        },
        "style": {
          "display": "flex",
          "font-size": "11px",
          "width": "90%",
          "text-align":"center",
          "border-bottom-width": "1px",
          "border-bottom-style": "solid"
 
        
        },
        "children": (
          {
            "elmType": "div",
            "txtContent": "($Title)",
            "style": {
              "flex-grow":"1",
                "font-weight": "bold",
                "width":"300px",                
                "text-align":"left",
                "border-right-width":"1px",
                "border-right-style":"solid",
                 "border-left-width":"1px",
                "border-left-style":"solid"

            }
          },
          {
            "elmType": "div",
            "txtContent": "($col2)",
            "style": {
                "width":"30px",
                "padding":"0cm 5.4pt 0cm 5.4pt",
                "border-right-width":"1px",
                "border-right-style":"solid"
            }
          },
          {
            "elmType": "div",
            "txtContent": "($col3)",
            "style": {
                    "width":"30px",
                    "padding":"0cm 5.4pt 0cm 5.4pt",
                "border-right-width":"1px",
                "border-right-style":"solid"             
              
            }
          },
          {
            "elmType": "div",
            "txtContent": "($col4)",
            "style": {
                    "width":"30px",
                    "padding":"0cm 5.4pt 0cm 5.4pt",
                "border-right-width":"1px",
                "border-right-style":"solid"
             
            }
          },
          {
            "elmType": "div",
            "txtContent": "($col5)",
            "style": {
                    "width":"30px",
                    "padding":"0cm 5.4pt 0cm 5.4pt",
                "border-right-width":"1px",
                "border-right-style":"solid"       
              
            }
          },
          {
            "elmType": "div",
            "txtContent": "($col6)",
            "style": {
                    "width":"30px",
                    "padding":"0cm 5.4pt 0cm 5.4pt",
                "border-right-width":"1px",
                "border-right-style":"solid"         
              
            }
          },
          {
            "elmType": "div",
            "txtContent": "($col7)",
            "style": {
                    "width":"30px",
                    "padding":"0cm 5.4pt 0cm 5.4pt",
                "border-right-width":"1px",
                "border-right-style":"solid"              
              
            }
          },
          {
            "elmType": "div",
            "txtContent": "($col8)",
            "style": {
                    "width":"30px",
                    "padding":"0cm 5.4pt 0cm 5.4pt",
                "border-right-width":"1px",
                "border-right-style":"solid"          
              
            }
          },
          {
            "elmType": "div",
            "txtContent": "($col8)",
            "style": {
                    "width":"30px",
                    "padding":"0cm 5.4pt 0cm 5.4pt",
                "border-right-width":"1px",
                "border-right-style":"solid"             
              
            }
          },
          {
            "elmType": "div",
            "txtContent": "($col9)",
            "style": {
                    "width":"30px",
                    "padding":"0cm 5.4pt 0cm 5.4pt",
                "border-right-width":"1px",
                "border-right-style":"solid"
            }
          },
          {
            "elmType": "div",
            "txtContent": "($col10)",
            "style": {
                    "width":"30px",
                    "padding":"0cm 5.4pt 0cm 5.4pt",
                "border-right-width":"1px",
                "border-right-style":"solid"
            }
          },
          {
            "elmType": "div",
            "txtContent": "($col11)",
            "style": {
                    "width":"30px",
                    "padding":"0cm 5.4pt 0cm 5.4pt",
                "border-right-width":"1px",
                "border-right-style":"solid"
            }
          },
          {
            "elmType": "div",
            "txtContent": "($col12)",
            "style": {              
                    "width":"30px",
                    "padding":"0cm 5.4pt 0cm 5.4pt",
                "border-right-width":"1px",
                "border-right-style":"solid"       
            }
          },
          {
            "elmType": "div",
            "txtContent": "($col13)",
            "style": {
                    "width":"30px",
                    "padding":"0cm 5.4pt 0cm 5.4pt",
                "border-right-width":"1px",
                "border-right-style":"solid"
            }
          },
          {
            "elmType": "div",
            "txtContent": "($col14)",
            "style": {
                    "width":"30px",
                    "padding":"0cm 5.4pt 0cm 5.4pt",
                "border-right-width":"1px",
                "border-right-style":"solid"
            }
          },
          {
            "elmType": "div",
            "txtContent": "($col15)",
            "style": {
                    "width":"30px",
                    "padding":"0cm 5.4pt 0cm 5.4pt",
                "border-right-width":"1px",
                "border-right-style":"solid"              
            }
          }

        )
      }
    )
  }
}

Any help would be much appreciated.
Thanks in advance !

css – Duda con HTML. Etiquetas con mismo efecto en el usuario

estoy haciendo un curso de HTML y CSS, acompañandolo con el libro de Duckett (muy bueno por cierto). La cuestion es hay etiquetas que a priori parecieran tener el mismo efecto en el usuario por ejemplo <strong> y <b> ademas de <i> y <em>.

Estas son las que he encontrado, pero supongo que hay mas como estos casos. ¿Podría alguien aclararme la diferencia de estas en la practica?

Muchas gracias!

html5 – Alguien sabe como mover imagenes con css?

Alguien tiene idea de como puedo hacer que se mueva una imagen de un sol en html, quiero que se mueva por la pantalla usando css y html, trato de hacer esto en un proyecto de angular 10.

El sol tiene que moverse de acuerdo al movimiento de un pequeño panel solar hecho en javaScript

les comparto el codigo del servidor de js que controla el seguidor

es todo lo que puedo decir, necesito que la imagen se mueva de acuerdo a lo que se mueva el panel

Alguien tiene idea de como puedo hacer que se mueva una imagen de un sol en html, quiero que se mueva por la pantalla usando css y html, trato de hacer esto en un proyecto de angular 10.

El sol tiene que moverse de acuerdo al movimiento de un pequeño panel solar hecho en javaScript

les comparto el codigo del servidor de js que controla el seguidor

es todo lo que puedo decir, necesito que la imagen se mueva de acuerdo a lo que se mueva el panel

`

const http = require('http');
const express = require('express');
const SocketIO = require('socket.io');
const five = require('johnny-five');

const app = express();
const server = http.createServer(app);
const io = SocketIO(server);

app.use(express.static(__dirname + '/public'));

server.listen(3000, () => {
  console.log('listening on port 3000!');
});

const board = new five.Board();

board.on('ready', function () {
  const servoHorizontal = new five.Servo({
    pin: 10
  });

  const servoVertical = new five.Servo({
    pin: 9
  });

  this.repl.inject({
    servoHorizontal
  });

  const ldrTopRight = new five.Sensor('A1');
  const ldrTopLeft = new five.Sensor('A2');
  const ldrBottomRight = new five.Sensor('A0');
  const ldrBottomLeft = new five.Sensor('A3');

  setInterval(function () {
    let topRightValue = ldrTopRight.value;
    let topLeftValue = ldrTopLeft.value;
    let bottomRightValue = ldrBottomRight.value;
    let bottomLeftValue = ldrBottomLeft.value;

    let gradosServoHorizontal = servoHorizontal.value;
    let gradosServoVertical = servoVertical.value;

    let avgTop = (topLeftValue + topRightValue) / 2;
    let avgRight = (topRightValue + bottomRightValue) / 2;
    let avgBottom = (bottomRightValue + bottomLeftValue) / 2;
    let avgLeft = (topLeftValue + bottomLeftValue) / 2;

    if (avgTop < avgBottom) {
      gradosServoVertical++;
      servoVertical.to(gradosServoVertical);
    } else if (avgTop > avgBottom) {
      gradosServoVertical--;
      servoVertical.to(gradosServoVertical);
    } else {
      servoVertical.to(gradosServoVertical);
    }

    if (avgLeft > avgRight) {
      gradosServoHorizontal++;
      servoHorizontal.to(gradosServoHorizontal);
    } else if (avgLeft < avgRight) {
      gradosServoHorizontal--;
      servoHorizontal.to(gradosServoHorizontal);
    } else {
      servoHorizontal.to(gradosServoHorizontal);
    }

    io.emit('rotaciones',`introducir el código aquí`introducir el código aquí`
      (gradosServoVertical, gradosServoHorizontal));

  }, 1000);
});`

css – Append a different body class to a PDP page if a special parameter is in the URL

Here’s what I’m trying to achieve.

When a product page URL has a parameter added to it like so: https://example.com/This-THI08.html?specialview=1

I’m trying to append a “specialview” class to the element. So that it looks like this:

<body data-container="body" itemtype=" http://schema.org/Product " itemscope="itemscope" class=“specialview page-product-configurable catalog-product-view product-this-thi08 categorypath-best category-best page-layout-1column catalog-print-pdf_active" aria-busy="false">

I only want the body tag there if that parameter is found in the URL of the product page. For example:

If product page is loaded using URL https://example.com/This-THI08.html then do not add the new class

However, if the same product page is loaded using URL https://example.com/This-THI08.html?specialview=1 then I want the additional body class to be added.

Here is what I’ve done so far, I’ve appended the body tag below in the catalog product view file:

./app/design/frontend/me/mysite/Magento_Catalog/layout/catalog_product_view.xml

<?xml version="1.0"?>
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
   <head>
       <css src="css/catalog/product.css" media="all"/>
   </head>
   <body>
       <attribute name="class" value="specialview"/>
       <referenceBlock name="catalog.product.related" remove="true" />
       <referenceBlock name="product.info.stock.sku" remove="true" />
       <referenceContainer name="product.info.social" remove="true" />

       <move element="product.info.upsell" destination="columns" after="main" />

       <referenceContainer name="product.info.main">
           <block name="product.info.badge" class="MagentoCatalogBlockProductView" template="Magento_Catalog::badge.phtml" />
       </referenceContainer>

       <move element="product.info.badge" destination="product.info.main" after="page.main.title" />
       <move element="view.addto.wishlist" destination="content" />
   </body>
</page>

This applies the body tag to all PDP pages with or without the URL parameter with my new CSS.

I was thinking i could maybe use a plugin to write some logic but this is where i’m a bit stuck. Would this be the best way to go about this? Something like this:

app/code/me/Mymodule/Plugin/Result/Page.php

<?php
namespace meMymodulePluginResult;

use MagentoFrameworkAppResponseInterface;

class Page
{
    private $context;

    public function __construct(
        MagentoFrameworkViewElementContext $context
    ) {
        $this->context = $context;
    }

    public function getCurrentUrl() {
        return $this->_storeManager->getStore()->getCurrentUrl();
    }

    public function beforeRenderResult(
        MagentoFrameworkViewResultPage $subject,
        ResponseInterface $response
    ){    
        if($this->context->getRequest()->getFullActionName() == 'catalog_product_view' & $block->getRequest()->getUriString() == 'specialview'){
           $subject->getConfig()->addBodyClass('specialview');
        }    
        return ($response);
    }
}

My CSS and jquery would take care of looking for the parameter in the URL and changing the styling.

Just need to make sure the body class switches when it reads the specific parameter in the URL.

Or Something like this would work:

/**
 * Remove CSS class from page body tag
 *
 * @param string $className
 * @return Mage_Adminhtml_Block_Page
 */
public function removeBodyClass($className)
{
    $className = preg_replace('#(^a-z0-9)+#', '-', strtolower($className));

    $existingClassNames = explode(' ', $this->getBodyClass());
    if ($i = array_search($className, $existingClassNames)) {
        unset($existingClassNames($i));
        $this->setBodyClass(implode(' ', $existingClassNames));
    }

    return $this;
}

Designing responsive landing pages with HTML/CSS for $15

Designing responsive landing pages with HTML/CSS

I’m going to design your own website or a landing page with a clean code and i will take care of the coding standars, i will do my best to make the project as perfect as you want and you can edit it till you become Satisfied with it, I can also transform your psd into html/css

.

css – Como usar una imagen de boton html

Hola a todos, les quiero pedir ayuda ya que quiero usar una imagen de boton (para un checkbox), me refiero usar un boton que para hecer un menu adaptable a dispositivos moviles pero cuando la imagen esta sobre el boton y le doy click a la imagen no pasa nada, aqui esta el codigo.

.menu_Menu{
    display: none;
}

header label img{
    width: 30px;
    height: 30px;
}

header label{
    display: none;
    width: 30px;
    height: 30px;
    padding: 10px;
    background-color: #cacaca;
    height: 30px;
    width: 30px;
    margin-top: -15px;
}

header label:hover{
    cursor: pointer;
}


#menu ul li a{
    margin: 10px;
    padding-right: 20px;
    position: relative;
    text-decoration: none;
    color: #6e6e6e;
    transition: all .5s;
}


#menu ul li{
    float: right;
    color: #6e6e6e;
    text-decoration: none;
    font-size: 30px;
    transition: all .5s;
}

#Inicio{
    float: left;
    font-size: 70px;
    text-decoration: none;
    color: #6e6e6e;
    text-shadow: 0px 0px 0px #222222, 1px 1px 0px #222222, 2px 2px 0px #222222;
}

header label{
    display: block;
}

.menu_Menu{
    display: block;
}

#menu{
    position: absolute;
    background: #000;
    margin-left: -70%;
}

#menu ul li{
    clear: both;
    float: none;
    border-bottom: 1px solid #222222;
}

#Inicio{
    margin-left: -10px;
    border-bottom: 1px solid #222222;
}

#menu ul li a:hover{
    font-size: 30px;
}

.menu_Menu:checked ~ #menu{
    margin: 0;
}
<header>
    <input name="menuResponsive" type="checkbox" class="menu_Menu">
    <label for="menuResponsive"><img src="https://es.stackoverflow.com/aqui va cualquier imagen" alt="Menu"></label>
    </div>
        <nav id="menu">
            <a id="Inicio" href="index.php">Inicio</a>
            <ul>
                <li><a class="Pag1" href="">Pagina 1</a></li>
                <li><a class="Pag2" href="">Pagina 2</a></li>
                <li><a class="Pag3" href="">Pagina 3</a></li>
            </ul>
        </nav>
    </header>

Algo asi es mi codigo solo que en donde puse “cualquier imagen” va la imagen que sea, y perdon si mi css no es muy bueno esque apenas lo estoy aprendiendo, o tambien no se si la manera en la que lo estoy haciendo es la correcta, si estoy mal me ayudaria que me corrigieran. Les agradeceria su ayuda.

magento2 – Product details page get product custom attribute and apply custom css

I have create a custom attribute for a product. The attribute name is “hide”
When product load at product detail page, if this product custom attribute is “hide”, it will apply a css to hide certain class label in the product details page.

If I want to build this as a custom module, what is the proper way to do it?
anyone can give me samples or reference that I can follow?

java – CSS+ HTML – Add link to language option / combo box

good day. See the code below. I have 4 languages. I want to add a link to each languages, so as to access a new page every time I choose the language from the combo. How can I do this?

<!-- FLAGS -->
<div class="language-picker js-language-picker" data-trigger-class="btn btn--subtle js-tab-focus">
  <form action="" class="language-picker__form">
    <label for="language-picker-select">Select your language </label>

    <select name="language-picker-select" id="language-picker-select">
      <option lang="de" value="deutsch">Deutsch</option>
      <option lang="en" value="english" selected>English</option>
      <option lang="fr" value="francais">Français</option>
      <option lang="it" value="italiano">Italiano</option>
    </select>
  </form>
</div>
<!-- FLAGS -->

For example, I change this line, add a link. But is not working.

<option lang="de" value="deutsch" <a href="https://google.com">Deutsch</a> </option>

css – I need to automate a list data so that it will show a tab using details from the list

I have a custom sharepoint list where I am saving some project details(list columns). These project details, I am showing on the home page as different small tabs. for reference I am adding a paint image.enter image description here

There are many project on the page. Now when any user click on any of the project tab, it open a small pop up window with further details for that project as shown in the picture.enter image description here

As of now this whole process is manual, as for any new item in the custom list I have to copy the code of home page, edit the entry for new item and then again putting the code on home page.
I need help on making this process automate.
As soon as new entry is made in the list, it should create a tab on home page with details and clicking on tab should open the pop up window with the required details.

Could anyone please guide me over the steps for the same?