i'm wondering the way to get the state for each section, using React fullPage.js.
I want to know the way to get section's state, so i can give the css property to the header for each different sections.
Such as, when you get to the website, the header is shown. However, from the second page, the header goes on disapper(display:none).
Thanks for giving me a hand !
You can use multiple methods:
Using fullpage.js callbacks (See JS example or React Example)
Calling fullpage_api.getActiveSection (See example)
Using CSS state classes (See example or example 2)
Related
I am trying to create a simple dashboard to show information at a glance. I am using the swimlane number card chart found here: https://swimlane.gitbook.io/ngx-charts/examples/number-card-chart.
Everything is working but I can't get the title of a card to wrap to the next line if it is longer than the card, here is an image of what I am talking about:
I have tried applying style to the parent div and tried with selectors like ".ngx-charts-number-card.title" ".ngx-charts-number-card.title" ".card.title" etc. I can't even modify the style when using the inspector live in the browser. I can't find any documentation to style these elements so any help would be appreciated.
I'm using Material-UI GridList to display some pictures in my React app. I'd like to have an IconButton on top of the image in my GridTile component. I can accomplish this by passing the button to the actionIcon prop. But it only shows up if I also pass a title prop. Looks like this when (title='image'):
Without the title prop, the overlay doesn't show. Passing title='' and title={null} both have the same result.
Is there any other way to have an IconButton on top of the image in a GridTile? My goal is to end up with something like this:
Thanks in advance, I appreciate any advice!
The GridTile component displays the overlay and actionIcon only if title evaluates to true (as of this writing, you can see that test around line 200 of the source). null, undefined, and an empty string all test out to false, which is why you're not seeing the overlay appear when you're using those values.
One workaround is to provide a title that has no impact on display but is not false, like a space (' '). For example, the following tile will have an overlay and visible actionIcon but effectively no title:
<GridTile
key={tile.img}
title={' '}
actionIcon={<IconButton><StarBorder color="white" /></IconButton>}
>
As far as I know, this is the only possible fix in material-ui v0 (short of implementing this feature yourself and submitting a pull request). For a better, more elegant solution, you're going to have to look towards material-ui v1.
Material-ui v1 has a GridListTileBar component which controls the display of the overlay, icon, and title. This gives you fine grained control over what to display, so that you can implement your desired behavior with no workarounds.
However, I know that a full transition to v1 (which has a lot of breaking changes) can be daunting. If you want to transition only partially, you can always install the two versions side by side. This will allow you to use the newest GridList and all of those features without having to change too much in the rest of your app.
I'm intermediate in my Angular understanding and am trying to wrap my head around how to accomplish the following.
I want to create a UI component that can be used to contain heterogeneous content, likely from other components.
It displays a certain amount of the content with an overflow ellipsis affordance.
It has a full border and a header.
The issue is that due to the border and functionality, I want this component to contain the content controlled by some other component.
I've looked at inheritance, directives, and manipulating the view container. Each solution looks is intuitively displeasing as is either impossible or would seem to place a heavy load on the DOM render.
Use
Read detailed tutorial at http://toddmotto.com/transclusion-in-angular-2-with-ng-content
I use shortcode to embed an HTML world map on one of my web pages. Right below the world map is a third party link for which I want to set the display value to "none", however since I have no CSS skills or web dev background I am having difficulty writing the custom CSS for this. I've played around with containers and specific page ID's, but no luck. The page is www.sheerheroine.com/map. Can anyone steer me in the right direction on how to write the code please? When I inspect the page I can see which container the link is in, however when I use this container the entire map is removed. Thanks!
The !important declaration makes the display CSS impossible to override. The following javascript would remove the element you wish to not display -- document.getElementsByClassName('fm-map-container')[0].childNodes[3].remove();. Try it in the developer's console. For it to work on the page, you would need to delay the execution until the element exists though. As others suggest, it would seemingly violate the terms of use of the lovely vector map you are using free of charge. For a proof-of-concept, however, you may find this code enlightening.
As the entire map con-taint is coming because of thirdparty image, better check with the that third party style code.
Or
in alternatively, just check the the height of the total map area.
lets assume here total height of map image is 10px from bottom.
and lets assume the height of that area(to which area,you don't want to show user) is 2 px from bottom.
Then create a div element, where you will put the entire map image, but follow the below stlye, where we can hide some portion of image to user
<div style="max-width: (10 - 2)px"> here .. put your map image url..</div>
I am building this form: http://codepen.io/anon/pen/gFoIG/
and so far I am satisfied. Unfortunately I have some issue that I seem not able to fix.
First of all, I want to enforce the label positions beside their respective inputs. Now the form breaks down easily (with the opera emulator for smartphone and tablet, the privacy label goes below the check, but I want that it stays beside it)
The other issue that I have is that I want it to fall back gracefully when there are small screens, like placing the second image below the first and placing the input controls one below the other and take the full screen width to be bigger and easier to interact with, but so far I only was able to break the layout with my tests.
This issue: the the form layout breaks, the internal control (input, button, etc) go outside the container div. How do I enforce the container to keep everything inside? I've experimented with blocks, floats and whatever, but if the layout breaks, the input boxes usually go outside the gray rectangle.
Last issue: If I insert this form inside an existing website (for example, a page in wordpress) the layout get completely destroyed because influences from the theme style. How do I enforce my style on my form, keeping it isolated from the other styles? I can think of the iframe as a solution, but it is the only one? It is a good practice?
Anyone can help me with that?
You might want to take a look here. Its a site I just set up to explain an approach to responsive using a jQuery plugin to manage redoing layout. I think it could work for your example quite easily. Also because it can target a container div at any depth in a web page, it could be helpful in the scenario where the layout you want to reflow is inside a 3rd party container (as long as you can run script on the page).