I'd like to add some kind of overlay-focus effect on an element in React.
I create a custom hook to override the default behavior of the contextMenu in my app.
When right-clicking on a certain element, I'd like to display my context menu and add an overlay to focus that element.
So far, the only method that I found was to add 4 more divs to my dom, as you can see here (1 is the overlays, 2 is my focused div, 3 is the context menu).
These divs positionning is based on the return value of getBoundingClientRect
Obviously, this is messy as hell, but I just can't think of a way to actually get this effect (I'm not good in CSS, so maybe there's an easy way to do so)
Any help would be greatly appreciated!
Ok, if anyone needs it, here's the CSS that I used to get this effect :
.maskFocus {
border: 3px solid #efecff;
border-radius: 8px;
z-index: 2; /* anything above the focused div */
box-shadow: #31353944 0px 0px 0px 5000px;
}
Related
I'm trying to add a label (title) inside the border of my container. Although there are many implementations of input fields with this feature, I haven't found any for normal containers. Here's a screenshot of what I'm referring to:
I considered adding a background to the text, but since the container's background is different from the background behind it, this won't work as the colors will clash. Does anyone have any ideas on how to achieve this in React Native?
I haven't implemented this in react-native so I can't say if this will work for you, but I have done this in a web app before using a linear-gradient background on the label with a little padding-left and padding-right:
label {
background-image: linear-gradient(transparent 50%, #666 50%);
padding-left: 3px;
padding-right: 3px;
}
The hex value would be the background color of your input.
Have CKEditor 5 working in ReactJS. However, need the ability to make the entire editor resizable so content can be expanded for larger screen sizes. I have made attempts with CSS resize without success.
For example:
.ck-editor__editable {
min-height: 20vw;
height: 100%;
resize: both;
overflow: scroll;
}
Also, I have tried adding resize and overflow on the parent DIV to the editor.
Is CSS the best approach here?
If anyone has done this successfully advice is appreciated.
I need to show Action buttons to the left on row hover. The below reference have the solution I need but that has the action buttons to the right. I tried changing css but still it doesn't work.
Is there any way I can achieve this thru CSS. Thanks in advance
Reference: ag-Grid - show buttons on row hover like in Gmail
Reference Plunker: https://plnkr.co/edit/X4hCimLy6aL3j4eh?preview
This is the css I used
.ag-pinned-left-header,
.ag-horizontal-left-spacer {
width: 0 !important;
min-width: 0 !important;
}
/* Add absolute position so that action buttons column will appear on top of other columns. pointer-events: none to pass on mousemove event to behind columns */
.ag-pinned-left-cols-container {
position: absolute !important;
left: 0;
pointer-events: none;
}
/* Reset pointer-events so that click can happen on action buttons */
.ag-pinned-left-cols-container * {
pointer-events: initial;
}
/* Hide border of left-cols-container */
.ag-pinned-left-cols-container .ag-cell {
border: none !important;
}
/* Show action buttons only for row that is being hovered. For rows which are not being hovered, hide them by setting their width and padding to 0.*/
.ag-pinned-left-cols-container .ag-row:not(.ag-row-hover),
.ag-pinned-left-cols-container .ag-row:not(.ag-row-hover) .ag-cell {
width: 0 !important;
padding: 0 !important;
}
I've had a look through the plnkr and the reason pinning it to left doesn't work, is that the "pinned" property is affecting the className, not actually pinning it to the left, but rather giving it the className of ag-pinned-left-cols-container which is not helpful.
An easy fix is to change the right property to left instead in the css file as shown below. This is line 23-27 in the plnkr. Make sure you're changing the actual css property, and not the right inside the className
Edit:
After a lot of debugging I found the issue with the code.
The reason why it's not working with the pinned: left is because it's being rendered as the left-most column, and everything rendering after it will be above it in the stack. So in practice, when setting it's position to position: absolute !important it was still there, just behind the other columns. Changing it's z-index will resolve the issue. You could tweak the value of the z-index to a smaller one if you want.
After changing the z-index I was able to display both the left and right action buttons. You have to change the z-index in ag-pinned-left-cols-container
.ag-pinned-left-cols-container {
position: absolute !important;
left: 0;
z-index: 10000000;
pointer-events: none;
}
Im trying to create an acordion with react and styled-components.
Im trying changing display: none to display:block and adding a transition, but it changes with no transition, it only works fine if i remove the display property on the styled-component but i can see part of the div if i remove that property.Sorry for my english and thanks
https://codesandbox.io/s/z2nj50z46p?fontsize=14
I think your problem was in this part of the css
const AcordionItemWrapper = styled.div`
width: 100%; // This is now 100% and not 80%
height: auto;
overflow: hidden;
background-color: blue;
`;
And this change produces this result.
This ensures that your darkgoldenrod tab is 100% of it's containers width. When it is active the dropdown is also 100%.
After further investigation I have found your problem. Some mark up issues, plus browser applies a default margin on certain html elements. In this case paragraph has a default margin being applied. background color is ignored when margin is used.
The below link should be what you want.
https://codesandbox.io/s/nkj7mx73jj
I developing a mobile website with angular-material which uses a floating button on the homepage as seen in many Google Applications. The button is always present and fixed in the right lower corner. It all works well. However, when I scroll the page and the browser address bar hides, the body height changes as well. The result is that the button moves up, too. See the images for better understanding.
This is the CSS of the button:
.floating-button{
position: fixed;
margin-top: 120%;
margin-left: 80%;
}
When i use top instead of margin-top, the button moves up and once the address bar is hidden, it jumpes back down.
Is there any possibility that the button will stay fixed? I would prefer not forcing the address bar to hide or stay fixed. Thanks in advance!
.floating-button{
position: absolute;
margin-top: 120%;
margin-left: 80%;
}
Try using the position absolute rule instead. Position absolute keeps an element on the page where you specify it independent of other elements.
I know this is an old question, but I came here with a similar problem and a combination of your question and what I already had solved my problem.
What I had is that the FAB would get hidden (move down) when the address bar is triggered and Kiko's answer didn't change that, so I assume it would bring my problem to your code.
For it to stop moving, I had to change my position: absolute to fixed like yours. The rest of the CSS is below:
.floating-button {
position: fixed;
right: 20px;
bottom: 20px;
}
I hope this helps future people passing by.