i googled half a day now and tried several solutions but nothing worked for me. So YOU guys are my last chance :(
I set up a new website using foundation5. For the mobile version i'm using the offcanvas. I'm now trying to replace the offcanvas burger or at least animate it. I think the out-of-the-box style is not really userfriendly as it doesnt indicates that it also could be used to close the offcanvas again.
I am lookig for something like here: http://sarasoueidan.com/blog/navicon-transformicons/
I allready tried it like
.menu-icon.arrow.close {
transform: scale3d(.8,.8,.8);
}
.menu-icon.arrow.close .lines{
&:before,
&:after {
top: 0;
width: $button-size/1.8;
}
&:before { transform: rotate3d(0,0,1,40deg); }
&:after { transform: rotate3d(0,0,1,-40deg); }
}
with the button like this
<section class="left-small">
<a class="left-off-canvas-toggle menu-icon lines-button arrow arrow-left" role="button" aria-label="Toggle Navigation"><span class="lines"></span></a>
</section>
Any suggestions what I should do?
Here's a jsfiddle using CSS classes taken from the link you provided and some Javascript to add/remove the "close" class http://jsfiddle.net/3cc3T/6/ in order to obtain the animation
$(".lines-button").click(function(){
$(this).toggleClass('close');
});
$(".exit-off-canvas").click(function(){
$("#startupButton").removeClass("close");
});
Related
(Forewarning: I'm new to React, so I'm not sure all the vocab I'm using is correct)
I want something that's like a modal in that it pops up over the background, but I don't want it to lock the background/make it greyed out/make the background non-interactable (i.e., I want to be able to have the "modal" open but then click on the background/copy and paste something from that background into the "modal"). I've looked over some pre-built React components, but not seeing anything that fits the bill. Looking for any advice/pointers on this front. TIA!
This is more of a css question really. Using react you will want a div of height h and width w then you can position it in the center of the screen with a position: fixed you can then use a z-index to make sure it is over all the content is the screen and leave the rest of the page interactive.
function App(){
const [isOpen, setIsOpen] = useState(false);
return (
<div>
<h1>Some content</h1>
<button onClick={()=>setIsOpen(true)}>Open Modal</button>
<div className="willFloat" style={{display: isOpen?'block':'none', height: '110px', width: '150px', position: 'fixed', zIndex: 1, top: '50%', left: '50%'}}>
<p>This will float in the center</p>
<button onClick={()=>setIsOpen(false)}>Close Modal</button>
</div>
</div>
);
}
This is of course just an example and uses quite a bit of inline styling and onClick function handling which you will want to separate out for any real projects.
With some additional styling you can get this div to do whatever you want. Learn some more html/css and it will make your life easier as well.Best
I am currently trying to learn NextJS and I've decided to go with a simple weather api that collects data from given city. I've learnt some new stuff and I really like it so far. There is however one issue that I can't seem to solve and that would be adding a class with styling.
Now... Given the GIF below, you can see it DOES add the class when location is being typed but the styling does not change.
https://gyazo.com/55be0759cc8cc514905a7a661274f73c
The 'Home_main__1Z1aG' should change its height and font-size when I add the class but it doesnt. I've never experienced this before and I've made sure that I am targeting the correct div.
I use state to add the class to the 'Home_main__1Z1aG' div.
<main className={`${styles.main} ${searchedCity ? 'loc_set' : ''}`}>
<input value={searchedCity} placeholder="City, Country" className={styles.title} onChange={e => setSearchedCity(e.target.value)} />
</main>
My styling:
.loc_set {
height: 10vh;
.title {
font-size: 2.2rem;
}
}
One important thing to mention is that I've added SCSS to my project.
I think that I need to somehow render the whole div since it is serverside rendered, but am I thinking wrong or? I've basically tried moving my styling around to make sure nesting wasnt an issue, I've made sure that the class is correctly named etc..
Components in Next.js use CSS modules. Assuming that the HTML you've provided is in a component and not a page, you'll have to reference it using imports.
<main className={`${styles.main} ${searchedCity ? styles.locSet : ''}`}>
<input value={searchedCity} placeholder="City, Country" className={styles.title} onChange={e => setSearchedCity(e.target.value)} />
</main>
I am not sure if _ would work, so maybe change that to a hyphenated classname.
.loc-set {
height: 10vh;
.title {
font-size: 2.2rem;
}
}
You have to use ampersand:
.loc_set {
height: 10vh;
& .title {
font-size: 2.2rem;
}
}
I am using this package in my React application.
The problem is when running the application in a specific device Galaxy Fold, the container of selecting images is too big.
I need to change the size of the div with this id rc-imageselect.
Here is my code
<div className={classes.recapt} style={{ transform: 'scale(0.8, 0.8) translateX(10%)', display: "table" }}>
<Recaptcha
expiredCallback={() => setCaptchaCode(false)}
sitekey={localStorage.getItem("CAPTCHA_KEY")}
render="explicit"
onloadCallback={callback}
verifyCallback={verifyCallback}
/>
</div>
export default makeStyles((theme) => ({
recapt: {
"&div": {
"&#rc-imageselect": {
transform: 'scale(0.8, 0.8) translateX(10%)'
}
}
}
}));
But this doesn't work.
I changed it in te inspect panel and it works. So my guess I am selection the div in a wrong way.
Any help would be appreciated.
I think your style targeting has problem, try like this :
"& > div > image"
And i think u cannot using query (#elementID) on that .
Edit
After uploading photo : Take look at this
There seems to be an automatic greying of the original button color when applying "disabled" to <Button>. I want to change the color completely.
Current button:
<Button disabled>{example}</Button>
Current styling that is not overwriting the greying:
.labels .button{
background-color: #6363FA;
margin: 10px;
color: #F2F1F7;
}
Hoping to be able to apply a new background-color for disabled somewhere
From my experience, here's one good way you can restyle a Button like that
(Follow the guide here: https://react.semantic-ui.com/theming/#theming-with-create-react-app first if you haven't setup theming!!)
Go and edit some-location/semantic-ui/site/elements/button.overrides, add a class like .ui.huge.disabled.button for a <Button /> with properties size='huge' disabled
sample button disabled css class
Which will result in something like this:
button screenshot
By the way, I found that class name above by inspecting it in the browser:
css class in inspector
I hope this is clear! If you have any questions, let me know :)
PS: Sorry didn't have enough rep to embed images...
EDIT: Forgot to mention, in the CSS example above, #gold and #black are custom colors I added into semantic-ui/site/globals/site.variables
I found a simpler way. I'm using Semantic UI React - not sure if that matters.
I have a css class for the button:
.main-app .landing-page .quick-search {
background-color: #41B3A3;
color: rgba(255,255,255,0.9);
}
and I add one like this and it works to respond to the disabled property
.main-app .landing-page .quick-search:disabled {
background-color: #f5f7f6;
color: rgba(56, 143, 89, 0.9);
}
I have a div (using React component), something like this:
<div className="drag-tab" onMouseDown={this.handleMouseDown}>
<span className="drag-icon"></span>
</div>
handleMouseDown looks like this:
handleMouseDown(e) {
console.log('The mouse down event');
}
I want to write acceptance test for this using selenium webdriver. Important part from my code looks like this:
async function dragWidget() {
const elem = driver.findElement(By.css('.drag-tab'));
//await driver.sleep(1000);
return driver
.actions()
.mouseDown(elem)
// some other stuff for dragging here
.perform()
}
When I uncomment await driver.sleep(1000); it goes into handler and logs "The mouse down event". But without sleep it does not go there. It seems that it needs some time for setting the onMouseDown listener. I have tried everything to wait until it is ready to be "mouse downed", but without any success. Thing I tried are to wait for elementIsEnabled, elementLocated, elementIsVisible but they didn't work. I don't want to use sleep though. Note that similar thing happens if I change mouse down event with onClick. But I need the solution for the mouse down.
Thank you
UPDATE
The issue is that the div has the styles which make the element out of bound of his parent div i.e it's like that:
<div className="parent-div">
<div className="drag-tab" onMouseDown={this.handleMouseDown}>
<span className="drag-icon"></span>
</div>
</div>
The styles:
.drag-tab {
position: absolute;
display: inline;
width: 40px;
height: 48px;
top: 150px;
left: -40px;
}
The problem is -40px part which makes the div `40px left to the parent div. Weird thing is that if I change -40px to -20px the test works, -21px doesn't. (the break point seems the half of the width).