I have a simple website made with react, I am trying to add some links at the top of a Boostrap modal, so that when clicked, it takes you to a specific section of the modal.
for example a link looks like this,
<h4>Infected Olecrenon Bursitis</h4>
and the div I want it to take us to looks like this,
<div className="text-left border border-info rounded" id="iob">
//some code
</div>
Before opening the Bootstrap modal, we are on this page link. www.page.com/primary/guide Then we click an img which then opens the modal.
If I try it with the above code, the modal disappears and the screen fades, and my url now says
www.page.com/primary/guide/#iob
Related
I am making a react js application. Within this application i understand i have a tag inside a tag like so:
<a><a></a></a>
I have located the issue in hand as you can see in these pictures. But I am unable to fix the problem. If anyone could give me a hand i would be very thankful.
The commented out code is where i am having my issue. As you can see i have a Link tag and inside that Link tag i have a Dropdown tag. The Dropdown is causing the issue but it is needed for my application.
Edit:
I understand an a-tag cannot live inside another a-tag, i have tried a few different ways to to get the full use of the dropdown and the link. As you can see in these new pictures i am trying to get the card to be a link to a group while also having a dropdown with two options, Edit and Delete.
This is what the card looks like, the three dots is the dropdown menu. when this card is clicked it brings me to the "/group/manage/" page.
This is what the card looks like with the dropdown menu clicked.
I recommend restructuring your component in a way similar to this:
<Card>
<Link>
{mainContent}
</Link>
<Dropdown>
{dropDownItems}
</Dropdown>
</Card>
Then use CSS to position the dropdown to the top right, on top of the main content.
I am using React with ant design. I am trying to create a page with a list of cards. In each card, there is an image carousel. I would like that when the user clicks on and image, the preview opens and they can swipe (or click on the arrows) to see all the images as a big, fullscreen preview.
I tried this:
<Image.PreviewGroup>
<Carousel autoplay>
{this.images.map(
(image: string, index: number) => {
return <Image key={index} src={image} preview={{ getContainer: '#root' }} />;
}
)}
</Carousel>
</Image.PreviewGroup>
But what happens here is that when the preview is opened, instead of showing 5 images, it is showing 11 (the images are shown twice, one of the images is shown 3 times).
If I place <Image.PreviewGroup> inside the <Carousel>, then instead of having an image carousel, I have multiple images stacked under each other.
How can I get it to show a clickable carousel, which when clicked, opens a fullscreen preview with the correct number of images that can be seen by swiping/clicking on arrows?
Thanks in advance.
just got into same issue and solved it. for the code structure, the first one you tried was fine
MAIN PROBLEM:
the main issue is on the carousel, which is using slick lib. if you inspect your page, you will find that inside the carousel wrapper tag, it generates 2-3 images for each <img> we declare in our code. so automatically, the Image.PreviewGroup that wraps the carousel, will detect more <img> than it should have
SOLUTION:
add infinite={false} props to your carousel component. for more detail , please refer to slick docs
I have the following code that opens up a pop up and displays information returned by the function //showDetails(Data.path)// when we click on the icon.
<a ng-show="Data.path" ng-click="showDetails(Data.path)">
<ng-md-icon icon="info" style="fill: green" size="15"></ng-md-icon>
</a>
I want the data to appear in a md-dialog modal window. Is there an easy way to do that ?
You have to setup a controller which tells $mdDialog what it needs to do when the showDetails(...) function is triggered.
See: https://material.angularjs.org/latest/demo/dialog (Click "View Source" <> icon, and then switch to the "JS" tab to see an example of controller code to use; or just go straight to the Codepen).
If you are using ng-include for your modal, remember Angular creates a new child scope for it. You can acess the data in the modal using the following in your modal HTML:
{{$parent.Data.path}}
I have the following sample code which provides the sample structure for the Left Nav Menu and the Middle Content section.
Here is the Plunker created for this example.
Plunker URL
When i click on Display Left Nav Menu Icon and select a menu item it updates the content of the view "content" as expected.
How ever as soon as i click on the LEft Nav Menu Icon the content from menu.html appear in the content view . Not sure why it is happening.
Left Nav Icon is in leftnav.html and it's handlers are in leftnav.controller.js why the main controller is getting invoked ??
Could you please let me know.
Thanks.
You have a location in the href of your a tag. Just getting rid of that should give you the correct functionality.
<a href="" class="btn btn-default" id="menu-toggle" ng-click='toggle()'>
I'm about to kill someone and I'm thinking of the JQM team at the moment. Sigh!
So, clearly I'm doing something stupid.
I've populated a JQM popup div with some info from my database and on first page load, clicking the button with the popup's id as HREF works great!
When I submit the form and return to the same page, it doesn't work. Inspecting the element I see that the ID of the popup is appended with '-placeholder' and the div simply has a comment in it.
Problem: On page reload, I can't click on the HREF that links to the popup (or I can but nothing happens - obviously because the markup has vanished).
Here's the view code of 1. the link to the popup div and 2. the actual pop up div on first and second page load.
Linking to popup:
Browse Database
Original popup div element
<div id="reqform_search_sicnaic" data-role="popup">
<div data-role="header" data-theme="b">
Random Header
</div>
<div data-role="content">
Random content
</div>
</div>
Popup div after form submission / second page load
<div style="display: none;" id="reqform_search_sicnaic-placeholder"><!-- placeholder for reqform_search_sicnaic --></div>
Obviously, I can't open the dialog on page load. :(