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
Related
Hi all I'm pretty new to react and css, I've come across this problem while trying to develop a teams-like weekly calendar. Hopefully somebody can point me to the right direction.
I have basically generated a table that highlights the cell and the whole column once the mouse passes over.
table grid on hover
with the following CSS to achieve the result:
.weekdayList:hover, .hourCell:hover {
background-color: rgba(33, 149, 243, 0.15)
}
Now, in the cell I have a button that opens a new dialog and lets me create an event and save it.
Upon exiting the dialog the calendar is updated thanks to the useEffect hook, a card element will be rendered above (zIndex = 1) the cell originally clicked to show basic info of the event that was just created.
My problem is that when I mouse hover the new event card, the cell and the column below it still feels the hover effect, still highlighting everything behind the card element. I don't want this to happen since I want to keep that element semi-transparent.
highilight behind event card
this is the code used to generate columns and cells:
<div className="weekdayList">
Some cycle code here
<div className="hourCell">
{checkEventExists && (<CalEventCard />)}
<Button>button with action</Button>
</div>
</div>
and this is the sx override inside the CalEventCard element:
<Card
sx={{
zIndex: 1,
position: 'absolute',
height: `${40 * height * 2}px`,
width: '95%',
background: 'rgb(255 250 255 / 40%)',
border: '1px solid',
borderColor: theme.palette.secondary[200],
':hover': {
boxShadow: '0 2px 14px 0 rgb(32 40 45 / 15%)'
},
...sx
}}
>
Is there a simple way to make so that the hover effects of hourCell and weekdayList are turned off if a CalEventCard is above them?
Reading some CSS tutorials I have come across some attributes like "isolation" and "pointer-event" but I couldn't solve the issue with those or probably didn't understand their use deeply.
I am unable to apply the horizontal scroll to the Tabs using material UI.
below link is the material ui version i am using
https://v0.material-ui.com/#/components/tabs
The number of Tabs increasing its taking more width.
I trid to apply width, but its taking entire Tabs tab.
I need to apply only Tabs width and horizontal scroll.
<Tabs
inkBarStyle={{backgroundColor: 'blue'}}
value={this.state.tableNameTab}
onChange={this.handleChangeTab}
key = "tabsData"
style={{ maxWidth: "500px", overflow: "auto" }}
>
{this.state.TableDetails.map( (data,index) =>
<Tab
label={data.tableName} value={data.tableName}
key={'key'+index}
>
<h6>{data.tableName}</h6>
</Tab>
)
}
</Tabs>
Welcome to SO!
Using scrollable-force-tab you can achieve inside scoll of tabs
header
Its mention in their Official Doc please have a look
I'm currently working with material ui and I'm running into an issue with GridLists. I have a GridList with multiple GridTiles and I don't see any way to change the height of each GridList separately. We are provided a prop for GridLists that let us specify the GridList cellHeight, but not for individual GridTiles. Does anyone know of a way to accomplish this?
GriList entry on material ui site Material Ui Grid List
I currently have the following (which does not work).
<GridList style={gridListStyle}>
<GridTile style={gridStyle1} titlePosition="bottom">
<div>
stuff
</div>
</GridTile>
<GridTile style={gridStyle2}>
<div>
junk
</div>
</GridTile>
</GridList>
While not an ideal solution, I ended up overriding the height of the GridTile component by adding 100% height !important. This allowed me to set the height to exactly what I needed.
var gridTileStyle= {
position: 'relative',
float: 'left',
width: '100%',
minHeight: '400px',
minWidth: '664px',
overflow: 'hidden',
height: '100% !important'
}
This allowed the component to dynamically resize in the window as the page got smaller, without the GridTile underneathe it overlapping it. Hopefully this helps someone else in the future.
You can also add some flex styling, which could help you with spacing your Tiles appropriately; for examples of flex settings available in Material-UI see https://material-ui.com/layout/grid/ (don't stop just because you see grid - I've successfully implemented these properties in a GridList too!).
Setting minHeight: '100vh'
helped me to get a grid element to height of 100%.
I tried all other elements and variants and did not help.
I am trying to implement a toolbar on a page in which I have three ToolbarGroup components:
<Toolbar>
<ToolbarGroup firstChild={true} float="left">
{prevButton}
</ToolbarGroup>
<ToolbarGroup>
{releaseBtn}
</ToolbarGroup>
<ToolbarGroup lastChild={true} float="right">
{nextButton}
</ToolbarGroup>
</Toolbar>
The general idea is that prevButton should render all the way to the left of the toolbar (it does), nextButton should render all the way to the right (it does)... and that releaseBtn should be centered on the toolbar (not currently happening).
Per the material-ui docs there doesn't appear to be some easy setting for centered={true}-- how can I accomplish this?
I've tried manually setting the style on the middle ToolbarGroup to margin: 0px auto but that doesn't seem to help.
If anyone runs into this in 2021 or later like I did, material-ui's Toolbar uses Flexbox under the hood, so all you have to do is apply a custom class (or override the default one in the theme):
.myToolbar {
justify-content: space-between;
}
space-between will distribute the children alongside the main horizontal axis:
(picture from https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
The final solution for me was to do this:
<Toolbar>
<ToolbarGroup firstChild={true} float="left">
{prevButton}
</ToolbarGroup>
<ToolbarGroup style={{
float : 'none',
width : '200px',
marginLeft : 'auto',
marginRight : 'auto'
}}>
{releaseBtn}
</ToolbarGroup>
<ToolbarGroup lastChild={true} float="right">
{nextButton}
</ToolbarGroup>
</Toolbar>
I first had to set the middle ToolbarGroup with no float (not an option through the material-ui props) and then play with the width/margins. I imagine your mileage may vary depending on what you shove inside the ToolbarGroup.
In new versions of Material UI you can just use the sx prop:
https://mui.com/system/the-sx-prop/#main-content
<Toolbar sx={{ justifyContent: "space-between" }}> // or "center" for a single element
...
</Toolbar>
I've been trying to make a fixed element only inside it's wrapping div, but can't get it to work even though I've tried all of the examples I've found here.
My site can be seen here. (doesn't work with screens under 800px yet)
I need the project sidebar to stay fixed until the wrapper around it ends and a new section begins. Here is an illustration of what I try to achieve
I've been using the ScrollToFixed - plugin and tried out most of the examples I've found on stackoverflow. My basic structure look like this:
<section class="projects" id="nobelbopel">
<div class="description" id="#nobelbopel-desc"></div>
<div class="projectimages"></div>
</section>
<section class="projects" id="ujevnt">
<div class="description" id"#ujevnt-desc"></div>
<div class="projectimages"></div>
</section>
I want the .description to stop at the top of the browser top, but don't outside of it's wrapping div (.projects). The height of the wrapping div (.projects) is also varying, and I think thats my main problem..
I've tried using this code, but it only works partially:
$('#nobelbopel-desc').scrollToFixed( {
marginTop: 154,
limit: $('#ujevnt').offset().top
- $('#nobelbopel-desc').height() - 154 } );
$('#ujevnt-desc').scrollToFixed( {
marginTop: 154,
limit: $('#bygdalarm').offset().top
- $('#ujevnt-desc').height() } );
and this:
$('#nobelbopel-desc').scrollToFixed({
marginTop: 154,
limit: $('#ujevnt').offset().top - 154
});
As you can see from the code I want it 154 px from the top)
but I need a code that works whether the height of the wrapping div is 100 or 1000px, and preferably based on the basic class-structure than specific divs as it is now.