Card links

[crispy68]

Maybe I'm missing it, but is there a way to add a link to an entire card that will open in a new browser window without showing a physical button? Essentially the entire card is the button and I do understand using stretched link.

Using an on-click event does not allow you to open in a new window currently. I tried adding a button to the card and leaving the text blank, which does work, but it still adds some height to the card which I don't want. Outside of adding additional CSS to override this, is there a way?

[Pablo]

The card itself cannot be a link.
But maybe you can add a transparent button or shape?
You can also 'hide' it by using a negative margin.

[wwonderfull]

without button you can do it like this on the cards event try to add this code inside on click event with js

Code: Select all

window.open('http://wonderful.free.nf', '_blank');

[crispy68]

@Pablo,

I did make the button transparent with no text but there was still a height applied to the button which caused some issues. If I add CSS to make the height = 0 it works. Just wanted to see if there was another way to make it work without the extra CSS. No biggie but maybe something to consider in the future for the card.

@wwonderfull

Thanks for the info. I had seen that adding a normal on click event uses window.location.href versus your option, which would work, but didn't think about just adding it to the card itself versus the button.

Either way I have 2 work arounds. Thanks.

[wwonderfull]

I was in stack overflow also there where had this trick, but it would not match how the structure of wwb works along with how the script works.
https://stackoverflow.com/questions/700 ... side-of-it

Code: Select all

<div class="todays-news">
    <div class="container">
        <div class="owl-carousel owl-theme">
            <div class="item">
                <div class="card">
                  <img src="images/home/home-image.png" />
                  <div class="card-body">
                    <strong>This is a title</strong>
                    <p>This is a paragraph.</p>
                    <a href="https://www.example.com/">Continue Reading</a>
                  </div>
                </div>
            </div>
            <div class="item">
                <div class="card">
                  <img src="images/home/home-image-2.png" />
                  <div class="card-body">
                    <strong>This is a title</strong>
                    <p>This is a paragraph.</p>
                    <a href="https://www.example.com/">Continue Reading</a>
                  </div>
                </div>
            </div>
        </div>
    </div>
</div>

but I think in terms of WYSIWYG web builder there is a solution. As I had some computer HDD hardware issue, I was not able to experiment for some days although had seen this post.

I carefully speculated the html structure of WWB which is clean and fine and then for the button I saw the CSS.

I think as you said it is possible with CSS it is indeed possible with CSS even without writing snippets of code.

The button we see on CARD is made out of margin and padding. If you go to the button property inside the CARD, remove the button's text and also padding and margin of the button and it will become height-less and width-less so from my expertise I am sure your problem can be solved without using a single extra CSS. Yet the button can be used for entire card linking still opening on a new window tab.

Let me know if I am right on that.

[crispy68]

@wonderfull,

Unfortunately, it still doesnt work. My button has no padding, no margin, no text and I even set the font size to the lowest it could go and it still sets a height for the button in the CSS.

Based on my testing, it appears that the height is being set based on the font size. I set the lowest at '6' point which equals 8px and the height it is setting in the CSS is 8px. If I set it to 8pt I get 11px.

The easiest thing is to just set the height = 0px in the CSS and it works fine. Simple short code.

[wwonderfull]

I tested yesterday and not sure how it does not work can you give a demo so I can check?

here is a demo I created see if that is what you had referred to.
Updated Link: https://wormhole.app/byedP#iTn9BtW4-nQBT28jE43Ceg

[crispy68]

You will notice it more if you stick it in a card container which makes it flexible. In your example, the cards have a fixed height. However, if you look at the code for the button in the card you will see your button has a height of 13px. Changing this doesn't change the height of your card.

If you place it in a responsive container, and then zero out the height of the button, you will see that the card changes height.

[crispy68]

It's more apparent when I created a card with just an image.

See this demo: LINK

When you preview, it will be more obvious. You will see at the bottom of the card there is extra space where the background shows thru. This is from the button height.

[wwonderfull]

You will notice it more if you stick it in a card container which makes it flexible. In your example, the cards have a fixed height. However, if you look at the code for the button in the card you will see your button has a height of 13px. Changing this doesn't change the height of your card.

If you place it in a responsive container, and then zero out the height of the button, you will see that the card changes height.

True even reducing font size does not do much stays at 13 px

But still I was able to do it without adding the custom css.

I went to the card then the buttons property and then on margin-top gave a -13px

[crispy68]

I want to the card then the buttons property and then on margin gave a -13px

That sort of adds extra code for margin doesn't it. In the end, the code to add is short and sweet. I think making the height 0 would cause less issues than add negative margin.

[wwonderfull]

I want to the card then the buttons property and then on margin gave a -13px

That sort of adds code for margin doesn't it. In the end, the code to add is short and sweet. I would prefer the height to be 0 so it causes no issues.

Yes, we do have JavaScript and CSS workaround for sure, I was just thinking if this discussion could bring us to a better conclusion for @pablo to consider

[crispy68]

I just think an option to make the entire card a 'button' would be fairly simple. Adding a button now with stretchable link works, just need an option where there is no physical button in the card with height of zero.

[wwonderfull]

I just think an option to make the entire card a 'button' would be fairly simple. Adding a button now with stretchable link works, just need an option where there is no physical button in the card with height of zero.

Correct. The JavaScript method I had provided earlier was also a good method. The problem was that for cards on event when I went to link, I could not target it to another window the target could not be used I would like the improvement on that where we can use that



So instead of onclick link I had to use on click javascript


So the on EVENTS => Onclick => Link we could have some options which we see on buttons as we see below