In my App component I have a navbar. This navbar is visible in all the chilren of my app component. I want to hide the navbar in one of the children. In order to achieve that I decided to use a ternary operator in order to apply a classname on the navbar component.
If the window.location.href is equal to the url of the component in which I want to hide the navbar, then a classname that hides the navbar is applied. However, my code is not working. I can still see the navbar in the component in which I want to hide it. When I inspect the document, I note that the classname that hides the navbar is not being applied. This is my code
<div className={window.location.href==='http://localhost:3001/checkin'
?
"navbar-hide"
:
"navbar"
}>
<Link to="/login">Login</Link>
<Link to="/EventManager">EventManager</Link>
</div>
The classname navbar is present regardless of the window.location.href.
Related
In my html template I have two common component
If I click on app-headers link its active class is applied.After that If i click on sidenavbar's link its active class is applied. At a time I want only one active class be applied between two child component. what changes can be done from parent component so only one components active class is applied.
I tried by :host ::ng-deep in scss , but I am not able to make it conditional. I want this changes be reflected only, when I click on other components . But its ovverriding child components css.
You could have a flag when they click make that as true and when other options clicked then make it as false and use it in required way. Here's an example below which changes the color based on colorFlag to true or false in css:
<div class="col-12 text-right" style="{{(colorFlag) ? 'color: red;':'color:blue;'}}">
<!-- Your Code Here -->
</div>
I have buttons that are close to each other that when the tooltip pops out it would block the other buttons out, here's a picture of the said problem:
If I hover the request button below the other one and then tries to hover the button above it, I will end up hovering on the tooltip instead of the button below it.
I can hide the tooltip on hover (see code below) using CSS but it produces a flickering effect when I hover to the next button then ends up not showing the tooltip on that specific next button.
.tooltip:hover {
display: none;
}
So my questions would be:
Is there a property on bootstrap-vue that would only show the tooltip when hovered on the button itself;
or hide the tooltip when hovering the tooltip itself;
If none, any alternative that would replicate the behavior I wanted without needing to change or edit each existing button on my app (preferred).
You can use the noninteractive modifier on the directive. (or prop if you're using the component)
This will make it so the tooltip can't be interacted with, so hovering the tooltip wont keep it visible.
new Vue({
el: "#app"
});
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap#4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.js"></script>
<div id="app" class="p-5">
<b-button v-b-tooltip.noninteractive.hover title="Try and hover me!">
Hover me
</b-button>
</div>
Alternative solution:
Add an event listener as to when the mouse leaves/(un)hover the button and hide all tooltips:
<button
v-b-tooltip.hover="'Edit This Bish'"
#mouseleave="$root.emit('bv::hide::tooltip')"
>
The Button
</button>
The con with this is that you'll have to edit this to all existing buttons on other tables. That's why I'm still open to other more easier and general solution than this.
Boostrap-vue Documentation: How to hide all open tooltips
I'm working on my portfolio website and I'm doing it with Gatsby. I've imported a Swiper component, precisely a CubeEffect slideshow.
As I have my background black, I would like to change the Swiper Shadow to red (by default is black) but I'm struggling to access to swiper-cube-shadow::before className, because is an own swiper's className.
I've added css style to the Swiper component, to the SwiperSlide component but I don't know how to access to the swiper-cube-shadow component that should be at the same level of the component and consequently to the className...
I cannot add a selector to a component that I don't know how to select, because is inside the Swiper component with is own name and If I create a new component with the same name will not modify the original component but just create a new one.
On the first link you have a picture of the HTML elements (I don't have the privilege to attach an image yet) with the <div class-name:'swiper-cube-shadow'> that I'm trying to customize.
<Swiper css={css `
[css styles]
`}
<SwiperSlide css={css`
[css styles]
`}>
<Dado2/>
</SwiperSlide>
</Swiper>
class-name:swiper-cube-shadow::before
There is a React component using Emotion called OtherComponent:
OtherComponent:
...
return <div css={otherComponentStyles}>
<div className='something'>
</div>
</div>
And another component called MainComponent that uses OtherComponent:
MainComponent:
...
return <OtherComponent css={mainComponentStyles} ... />
What happens in this situation is that OtherComponent properly uses otherComponentStyles. But it ignores mainComponentStyles.
But what I would like to do is to apply style to OtherComponent from the level of MainComponent.
I know i can wrap OtherComponent into a div, ad set css=... to the div. But it is a nasty fix of the problem.
Hence the question: how to apply CSS with Emotion from parent component aka MainComponent?
You are not applying those styles to any html tag, it's not <OtherComponent> which is rendering, it's the <div> which is rendering to the page, so you must apply styles to a valid html tag.
I am trying to style an HTML element inside the component from the Fluent UI React library.
What I want to do is put the "On" / "Off" text to the left of the toggle rather than on the left. When I look at my "compiled" code I can see that the component is translated into:
<div>
<label></label>
<div id="target-me">
<button>
<span></span>
</button>
<label></label>
</div>
</div>
I want to add an inline-flex to the target-me div and set flex-flow property to row-reverse in order to get the button element to the right of the label element. The problem is, I can't manage to target the "target-me" div in my code.
How can I achieve this without rewriting a custom component ?
Thanks!
Ok, well I found the answer to my own question so here it is:
<Toggle styles={{ container: { flexFlow: "row-reverse" } }} />
Essentially you can target different parts of the component (root, container, label..) by using the styles property. Use VS Code's Intellisense to find out what elements you can target inside the component and then just give it some regular CSS-in-JS that you want.