We Keep Coding

ReactJS CSS inline style position dynamically

I have this element in my React code:
{focusedAnnotationIconProps && (
<div
style={{
backgroundColor: "#333",
width: "100px",
position: "absolute",
left: focusedAnnotationIconProps.left,
top: focusedAnnotationIconProps.top + 25,
color: "#fff",
}}
>
{annotationIconPopoverText}
</div>
)}
this is a popover that will show when hovering over an icon, so I get the CSS left/top position numbers from that Icon (in another part of the code), and place it there, and currently, is showing like this:
I need to center this popover in the middle of the icon
but the thing is, this <div> element has variable width, depending on the text inside
so I was thinking of someway to do something like this:
left: focusedAnnotationIconProps.left - this.width/2
but I know that won't work.. I tried using the calc css3 function, but won't work inline with CSS, so there's my problem.. would appreciate any help

With position: absolute, you can use these methods to center the elements:
Center Vertically:
style={{
top: "50%",
transform: "translateY(-50%)"
}}
Center Horizontally:
style={{
left: "50%",
transform: "translateX(-50%)"
}}
Center to the parent div:
style={{
left: "50%",
top: "50%",
transform: "translate(-50%, -50%)"
}}

How to display modal without backdrop effect with react-modal?

I am using react-modal for both modals and notifications.
I would like to disable the overlay/backdrop effect on the modal. I went through the API and I can't see anything about it.
Here is a basic modal I set up.
https://codesandbox.io/s/upbeat-ptolemy-g0pyb?file=/src/App.js
Any suggestions on how only display the modal without the backdrop? Note that I want to be able to close the modal if click outside of it.

You need to add overlay option to customStyles with alpha has 0.
Something like this
const customStyles = {
overlay: {
backgroundColor: "rgba(0, 0, 0, 0)"
},
content: {
top: "50%",
left: "50%",
right: "auto",
bottom: "auto",
marginRight: "-50%",
transform: "translate(-50%, -50%)"
}
};

As you can see from the image, i've removed background color property to remove overlay
styles.css
.ReactModalPortal .ReactModal__Overlay.ReactModal__Overlay--after-open {
background-color: unset !important;
}

I am hoping you can prevent this by adding some css
.modal-backdrop.show {
opacity: 0 !important;
}

React Native Half oval on View

I'm new to react-native, I want to create a view with a half oval in the bottom. I can achieve this problem using CSS, but I cannot use it in react-native as it only accepts the single number.
Example result
.halfOval {
background-color: #a0C580;
width: 400px;
height: 20px;
border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
<div class="halfOval"></div>

One solution I can say is to create a semicircle and scale it based on your device resolution. Sample code is given below
<View style={styles.ovalBgH}>
<View style={styles.ovalBg}>
</View>
</View>
Stylesheet code
ovalBgH:{
overflow: 'hidden',
width : 50,
height:25,
position : 'absolute',
borderBottomEndRadius:25,
borderBottomLeftRadius:25,
left:-25,
top:10,
backgroundColor:'transparent',
transform: [
{scaleX: 7}
]
},
ovalBg:{
backgroundColor: '#a0c580',
width : 50, height:50,
transform: [
{scaleX: 7}
]
}
Screenshot is given below

Try to use this kind of style may be your requirement would be fulfilled.
https://snack.expo.io/HkfD57Ipr
style={{
width: 100,
height: 50,
backgroundColor: '#a0C580',
borderBottomEndRadius: 100,
borderBottomStartRadius: 100,
transform: [{ scaleX: 3 }],
}}

Div with position absolute and lower z-index is showing on top of a higher z-index(fixed position)

Alright... I have a nav menu that when you scroll down past it, it changes to a fixed menu on top that accompanies the page.
But for some reason, I have a div on the page that has an absolute position and a lower z-index than the menu but it still shows up on top of the menu...
Here's the function that sets the menu to fixed past a certain point.
$(function(){
var pos = $('#nav').offset().top;
$(window).scroll(function(){
if( $(window).scrollTop() > pos ) {
$('#nav').parent().parent().css({position: 'fixed', top: '0px', background: '#fff', width: '100%', 'z-index': 9002, left:0});
} else {
$('#nav').parent().parent().css({position: 'static', top: '0px', background: 'none', width: '100%', 'z-index': 1});
}
});
});
This is the div that is showing on top when it shouldn't...
.header {
position: relative;
z-index: 1;
margin: 0;
padding: 0; }
Also, here you can see an example of it happening as you scroll down the page.

Apply a position:relative on <div id="page-content">
Change the z-index on <header class="site-header"> to 2

How to position a Bootstrap popover?

I'm trying to position a Bootstrap popover for a trigger that sits on the far top-right corner of a 960px wide web page.
Ideally, I'd position it on the bottom and move the arrow with CSS (so the arrow is on the top-right of the popover). Unfortunately the 'placement':'bottom' positioning is not enough, since it will center it below the trigger.
I'm looking for solution that will place the popover statically below and on the left of the trigger.

This works. Tested.
.popover {
top: 71px !important;
left: 379px !important;
}

Simply add an attribute to your popover! See my JSFiddle if you're in a hurry.
We want to add an ID or a class to a particular popover so that we may customize it the way we want via CSS.
Please note that we don't want to customize all popovers! This is terrible idea.
Here is a simple example - display the popover like this:
// We add the id 'my-popover'
$("#my-button").popover({
html : true,
placement: 'bottom'
}).data('bs.popover').tip().attr('id', 'my-popover');
#my-popover {
left: -169px!important;
}
#my-popover .arrow {
left: 90%
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<button id="my-button" data-toggle="popover">My Button</button>

I've created a jQuery plugin that provides 4 additonal placements:
topLeft, topRight, bottomLeft, bottomRight
You just include either the minified js or unminified js and have the matching css (minified vs unminified) in the same folder.
https://github.com/dkleehammer/bootstrap-popover-extra-placements

Popover's Viewport (Bootstrap v3)
The best solution that will work for you in all occassions, especially if your website has a fluid width, is to use the viewport option of the Bootstrap Popover.
This will make the popover take width inside a selector you have assigned. So if the trigger button is on the right of that container, the bootstrap arrow will also appear on the right while the popover is inside that area.
See jsfiddle.net
You can also use padding if you want some space from the edge of container. If you want no padding just use viewport: '.container'
$('#popoverButton').popover({
container: 'body',
placement: "bottom",
html: true,
viewport: { selector: '.container', padding: 5 },
content: '<strong>Hello Wooooooooooooooooooooooorld</strong>'
});
in the following html example:
<div class="container">
<button type="button" id="popoverButton">Click Me!</button>
</div>
and with CSS:
.container {
text-align:right;
width: 100px;
padding: 20px;
background: blue;
}
Popover's Boundary (Bootstrap v4)
Similar to viewport, in Bootstrap version 4, popover introduced the new option boundary
https://getbootstrap.com/docs/4.1/components/popovers/#options

I solved this (partially) by adding some lines of code to the bootstrap css library. You will have to modify tooltip.js, tooltip.less, popover.js, and popover.less
in tooltip.js, add this case in the switch statement there
case 'bottom-right':
tp = {top: pos.top + pos.height, left: pos.left + pos.width}
break
in tooltip.less, add these two lines in .tooltip{}
&.bottom-right { margin-top: -2px; }
&.bottom-right .tooltip-arrow { #popoverArrow > .bottom(); }
do the same in popover.js and popover.less. Basically, wherever you find code where other positions are mentioned, add your desired position accordingly.
As I mentioned earlier, this solved the problem partially. My problem now is that the little arrow of the popover does not appear.
note: if you want to have the popover in top-left, use top attribute of '.top' and left attribute of '.left'

To bootstrap 3.0.0:
.popover{ right:0!important; }
And modify too
.popover { max-width:WWWpx!important; }
where WWW is your correct max-width to show your popover content.

I had to make the following changes for the popover to position below with some overlap and to show the arrow correctly.
js
case 'bottom-right':
tp = {top: pos.top + pos.height + 10, left: pos.left + pos.width - 40}
break
css
.popover.bottom-right .arrow {
left: 20px; /* MODIFIED */
margin-left: -11px;
border-top-width: 0;
border-bottom-color: #999;
border-bottom-color: rgba(0, 0, 0, 0.25);
top: -11px;
}
.popover.bottom-right .arrow:after {
top: 1px;
margin-left: -10px;
border-top-width: 0;
border-bottom-color: #ffffff;
}
This can be extended for arrow locations elsewhere .. enjoy!

If you take a look at bootstrap source codes, you will notice that position can be modified using margin.
So, first you should change popover template to add own css class to not get in conflict with other popovers:
$(".trigger").popover({
html: true,
placement: 'bottom',
trigger: 'click',
template: '<div class="popover popover--topright" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
});
Then using css you can easily shift popover position:
.popover.popover--topright {
/* margin-top: 0px; // Use to change vertical position */
margin-right: 40px; /* Use to change horizontal position */
}
.popover.popover--topright .arrow {
left: 88% !important; /* fix arrow position */
}
This solution would not influence other popovers you have. Same solution can be used on tooltips as well because popover class inherit from tooltip class.
Here's a simple jsFiddle

Sure you can. Fortunately there is a clean way to do that and it is in the Bootstrap popover / tooltip documentation as well.
let mySpecialTooltip = $('#mySpecialTooltip);
mySpecialTooltip.tooltip({
container: 'body',
placement: 'bottom',
html: true,
template: '<div class="tooltip your-custom-class" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'
});
in your css file:-
.your-custom-class {
bottom: your value;
}
Make sure to add the template in bootstrap's tooltip documentation and add your custom class name and style it using css
And, that's it. You can find more about this on https://getbootstrap.com/docs/4.0/components/tooltips/

Maybe you don't need this logic for a responsive behavior.
E.g.
placement: 'auto left'
Bootstrap 3 has auto value for placement. Bootstrap doc:
When "auto" is specified, it will dynamically reorient the tooltip. For example, if placement is "auto left", the tooltip will display to the left when possible, otherwise it will display right.