Related questions

How would I dynamically change the top padding of each element in this timeline?

2021-02-22 22:40 Marius V imported from Stackoverflow

I need to dynamically add padding to each element in this track so they dont overlap. I am using the node module called react-timelines in ReactJS This is how it looks at the moment (image) and this is how I want it to look like (image 2) I have tried looking at the SCSS but I can't seem to figure out how to dynamically add it to each element.

See also questions close to this topic

  • Stylus mixins as class names

    With Less I can do the following:

    /* less code */
.grid {
    display: grid;
}

#my-element {
    .grid();
}

/* Yields:
*
* #my-element {
*     display: grid;
* }
*/

    But I can use .grid also in html in any element of my choice, e.g.:

    <div class="grid">...

    Less has the advantage of allowing double usage of mixins: mixins like the one in my example can also be used to define classes.

    Is there a way to do the same with Stylus? I warmly thank you in advance for you help!

  • Music play when cursor on button

    This a code when we click on the button then music will play. But I want when cursor move over the button then music should play. What changes will be do in the code given below?

    //CODE

    <!DOCTYPE html>
<html>
<head>
<style>
nav#nav1{
 margin-top: 24px; 
}

nav#nav1 > a{
 background:#B9E1FF; color:#000; padding:10px; text-decoration:none;
  border-radius:5px;
font-family:"Arial Black", Gadget, sans-serif; 
}
nav#nav1 > a:hover{ 
  background: #BBEA00; 
}
nav#nav1 > a:active{ background: #EEFFA8; }
</style>
<script>

var bleep = new Audio();
bleep.src = 'myMusic.mp3';
</script>
</head>
<body>
  <nav id="nav1">
    <a href="#" onmousedown ="bleep.play()">Home</a>
    <a href="#" onmousedown="bleep.play()">About Us</a>
    <a href="#" onmousedown="bleep.play()">Services</a>
    <a href="#" onmousedown="bleep.play()">Contact</a>
  </nav>
</body>
</html>
  • Navbar element active while scrolling

    I want to make my navbar active while scrolling through my page. How can I do that by using bootstrap? I tried by using React-scroll npm package ...but can't able to do it effectively

    import React from "react";
import Navbar from "react-bootstrap/Navbar";
import Nav from 'react-bootstrap/Nav';
import Logo from "../../assects/img/Nav/vimal.png"
import "./mynavbar.css";

const MyNavbar=()=>{
    return(
        <div>
            <Navbar fixed='top' collapseOnSelect expand="md" bg="dark" variant="dark">
                <Navbar.Brand href="#home">
                    <img className='logo' src={Logo} alt="logo"/>
                </Navbar.Brand>
                <Navbar.Toggle aria-controls="responsive-navbar-nav" />
                <Navbar.Collapse id="responsive-navbar-nav">
                <Nav className="ml-auto">
                    <Nav.Link href="#home">Home</Nav.Link>
                    <Nav.Link href="#about">About</Nav.Link>
                    <Nav.Link href="#skills">Skills</Nav.Link>
                    <Nav.Link href="#projects">Projects</Nav.Link>
                    <Nav.Link href="#contact">Contact</Nav.Link>
                </Nav>
                </Navbar.Collapse>
            </Navbar>
        </div>
    )
}
export default MyNavbar
  • React native : Tab bar button 'OnPress' not working outside the scope of the Tab bar

    enter image description here

    As you can see, from the image attached:

    1 arrow: The tab bar button does not work outside this scope

    2 arrow: The tab bar button does work as it's inside the scope of the tab bar.

    Code within navigation container:

     <BottomTab.Screen
    options={{
      //   tabBarIcon: ({}) => <VerifyFloatingButton />,
      tabBarOnPress: () => {
        null;
      },
      tabBarButton: ({}) => <VerifyButton size={30} />,
    }}
    name="asafaas"
    component={NullButton}
  />

    Any way to make the button operational outside the scope of the tab bar?

  • Problem in implementing Search Filter in Reactjs- Trigger issues

    I am implementing a react data table with a search filter in it to search the rows. You can see the UI here for a better understanding of code. I implemented it to search the rows by names initially. (I will implement it to search in all columns later).

    As you can see in the UI that there are three entries at top named "Kamakshi", "Kanika" and "Kanika" respectively. When I type "Kam" in the search box then this result is shown. Now on pressing backspace my input becomes "ka", which means my search result should show three rows of "Kamakshi", "Kanika" and "Kanika". But there are no changes.

    I want to trigger the search filter everytime there is a change in input. I passed it as dependency in useEffect but it didn't worked.

    Here is my Bookings2.js (Table is implemented in this)

    import React, {useState, useEffect} from 'react';
import axios from 'axios';
import {Link} from 'react-router-dom';
import '../../static/Bookings.css';
import {BsFilterRight} from "react-icons/bs";

let bookings_array = [];    
const Bookings2= ()=>{
    const[Bookings, setBooking]=useState([]);
    const[search, setSearch]=useState("");

    useEffect(()=>{
        loadUsers();
    }, []);

    useEffect(()=>{
        if(search.length){
        setBooking(
                Bookings.filter(Booking =>
                    Booking.name.toLowerCase().includes(search.toLowerCase())
                )
            )
        }else{
            setBooking(bookings_array)
        }
    }, [search, Bookings]);


    const loadUsers= async()=>{
        const result =await axios.get("http://localhost:3001/Bookings");
        bookings_array=result.data.reverse();
        setBooking(bookings_array);
    };

    const deleteUser=async id => {
        await axios.delete(`http://localhost:3001/Bookings/${id}`);
        loadUsers();
    }

    return(
        <div className="Booking-page-container">
            <h2 className="text-center mb-4">Bookings2 Page</h2>
            <table class="table table-bordered table-striped border shadow">
                <thead>
                    <tr>
                        <th scope="col" colSpan={5}>
                        <BsFilterRight/> &nbsp;
                            <input 
                                placeholder=" search....."
                                onChange={e=>setSearch(e.target.value)}
                            />  
                        </th>
                    </tr>
                </thead>
          
                <thead class="thead-dark">
                    <tr>
                        <th scope="col"></th>
                        <th scope="col">Name</th>
                        <th scope="col">Consultant</th>
                        <th scope="col">Email</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    {Bookings.map((Booking,index)=>(
                        <tr>
                            <th scope="row">{index+1}</th>
                            <td>{Booking.name}</td>
                            <td>{Booking.consultant}</td>
                            <td>{Booking.email}</td>
                            <td>
                                <Link class="btn btn-primary mr-2" to={`/Bookings/view/${Booking.id}`}>View</Link>
                                <Link class="btn btn-outline-primary mr-2" to={`/Bookings/edit/${Booking.id}`}>Edit</Link>
                                <Link class="btn btn-danger" onClick={()=>deleteUser(Booking.id)}>Delete</Link>
                            </td>
                        </tr>   
                    ))}
                </tbody>
            </table>
        </div>
    );
};

export default Bookings2;
  • How can i create a component as a function?

    i am using this library "styled-components" to create components

    import styled, { keyframes } from "styled-components";
const Feet = styled.div`
  background-color: #fff;
  min-width: 290px;
  max-width: 420px;
  border-radius: 10px;
  padding-bottom: 3rem;
`;

    but i dont want to use anymore that library, i want to create my own component

    This is my component, my component is inside of Mycomponent:

    const styles = makeStyles(theme => ({
  body: {
    backgroundColor: '#fff',
  minWidth: '290px',
  maxWidth: '420px',
  borderEadius: '10px',
  paddingBottom: '3rem',
  },
}))

    this is my component:

    const Mycomponent = ({}) => {
const Feet = () => { 
    return <div className={styles.body}></div>
  }

    and i want to use like this:

     return (
    <Feet/>

    but this dont worked, it render but is not similar is not equal

  • How to hide the scrollbar in a mat-drawer component in an Angular app

    Hello Im trying to hide this scroolbar in my project but I can't. I've tried many ways but nothing works

    enter image description here

    This is my html code, tryied overflow: hidden, overflow-y: hidden and I don´t know how is the right way to doid, I just want to hide the scroll bar but also that the scroll stil working.

    <mat-drawer-container class="side-container">
  <mat-drawer mode="side" opened class="builder">
    <div class="side-drawer">
    <div class="logo-header mt-2">
      <img src="assets/img/banner.svg" alt="">
    </div>
    <div class="search d-flex justify-content-center mt-5 px-1">
      <mat-form-field appearance="outline" mx-1 class="w-100">
        <mat-label>Buscar componentes</mat-label>
        <input matInput>
        <mat-icon matSuffix color="primary">search</mat-icon>
      </mat-form-field>
    </div>
    <app-sidbar-item></app-sidbar-item>
    <app-sidbar-item></app-sidbar-item>
    <app-sidbar-item></app-sidbar-item>
    <app-sidbar-item></app-sidbar-item>
  </div>
  </mat-drawer>

  <mat-drawer-content>
    <app-header-menu></app-header-menu>
  </mat-drawer-content>
</mat-drawer-container>

    ans this is my scss

    .side-container {
  width: 100%;
  height: 100%;
  margin: 10px;
  margin: 0;
  padding: 0;
  border: 1px solid #555;
}


.builder{
  width: 22%;
}

.logo-header{
  display: flex;
  justify-content: center;
  align-items: center;
  img{
    width: 160px;
    height: auto;
  }
}
.textos-header{
  font-weight: bold;
}

.wrapper-item{
  background-color: #f6f6f6;
  border-radius: 5px;
}

::ng-deep .mat-drawer{
  overflow-y: hidden !important;
}
  • scss @each loop not running @extends

    I am creating scss @each loop using sass maps, and the debug data is returning the correct values but the dist css file doesn't output anything at this point.

    Here are the maps i'm using...

    $sites: (
  'website'     : 1,
  'purchase'    : 2,
  'stock'       : 3,
  'sales'       : 4,
  'visuals'     : 5,
  'production'  : 6,
  'dispatch'    : 7,
  'invoice'     : 8
);

$blavators: (
  'website'     : 'browser',
  'purchase'    : 'file-invoice',
  'stock'       : 'warehouse-alt',
  'sales'       : 'file-invoice',
  'visuals'     : 'object-group',
  'production'  : 'clipboard-list',
  'dispatch'    : 'truck',
  'invoice'     : 'file-invoice-dollar'
);

    And here scss @each loop which fails to output anything but debugs the right data...

    /* blavator
-------------------------------------------------- */

.blavator {
  @extend .fas;
  @extend .fa-fw;

  @each $site, $id in $sites {

    @debug #{map-get($sites,$site)};
    @debug #{map-get($blavators,$site)};

    #wp-admin-bar-blog-#{map-get($sites,$site)} & {
      @extend .fa-#{map-get($blavators,$site)};
    }
  }

}

    The above initial .blavator @extend .fas; and @extend .fa-fa; work fine, but the @each content outputs nothing???

    Here is the @debug logs outputted from within the @each loop...

    : 1
: browser
: 2
: file-invoice
: 3
: warehouse-alt
: 4
: file-invoice
: 5
: object-group
: 6
: clipboard-list
: 7
: truck
: 8
: file-invoice-dollar

    This is the last 2 lines of my outputted dist css...

    /* blavator
-------------------------------------------------- */

    Can anyone see what is up and why nothing is outputting?



    When testing the above code in this code pen...

    https://codepen.io/joshmoto/pen/PobyoGr

    Then outputted css results are correct...

    enter image description here

    Very weird it does not compile the same way in webpack :-/



    I've also tried saving map results to variable in @each loop, the @debug results are the same but see output below (including extra .test class in loop)...

    .blavator {
  @extend .fas;
  @extend .fa-fw;

  @each $site, $id in $sites {

    .test {
      content: ".fa-#{map-get($blavators,$site)}";
    }

    @debug #{map-get($sites,$site)};
    @debug #{map-get($blavators,$site)};

    $id : map-get($sites,$site);
    $blavator : map-get($blavators,$site);

    #wp-admin-bar-blog-#{$id} & {
      @extend .fa-#{$blavator};
    }
  }

}

    Here is the dist css ouput...

    /* blavator
-------------------------------------------------- */
.blavator .test {
  content: ".fa-browser";
}
.blavator .test {
  content: ".fa-file-invoice";
}
.blavator .test {
  content: ".fa-warehouse-alt";
}
.blavator .test {
  content: ".fa-file-invoice";
}
.blavator .test {
  content: ".fa-object-group";
}
.blavator .test {
  content: ".fa-clipboard-list";
}
.blavator .test {
  content: ".fa-truck";
}
.blavator .test {
  content: ".fa-file-invoice-dollar";
}
  • It does this when i do that

    the error im getting

        :root{--emoji-is-gray:1%; /*  */}

    :root{--emoji-is-colored-2:calc(var(--emoji-is-gray) * 100) ;}
    
    .class{filter: grayscale(var(--emoji-is-colored-2)) !important;}