[Bug] Various issues with script

indianknight commented 4 years ago

Version

1.0.2

Reproduction link

http://beta.newshash.nl/

Operating System

CentOs

Device

Mobile or any Browser

Browser & Version

Version 85.0.4183.102 (Official Build) (64-bit)

Steps to reproduce

On my beta site that is going to be launch soon see here http://beta.newshash.nl responsiveness is broken then I used blog-4 component on the landing page to show memes for the moment, those hover effect is gone. Also, the Nav tab don;'t work at runtime, I am not sure if the java framework I am using to generate those html is cauisng the issue or argon design and hence I posted a question also on vaadin forum (vaadin is java front end framework) https://vaadin.com/forum/thread/18446057

So, please help me investiage this issue.

What is expected?

Responsiveness should remain as its a single page site and javascript hover efefcts seems to loss.

What is actually happening?

At runtime those javascript don't work plus my UI framework can't put those scripts to end of body tag like in all your demos. I use defer attributre to achieve this while loading script. So may be thats is happening. Not sure

Solution

None.. nada

Additional comments

Please help me as launch date is near and I am alone in this !!

rarestoma commented 4 years ago

Hi @indianknight,

Thank you for working with our products.

The nav has to be outside the viewport and should have this structure as in our product:

<div class="navbar-collapse collapse" id="navbar_global" style="">
        <div class="navbar-collapse-header">
          <div class="row">
            <div class="col-6 collapse-brand">
              <a href="./index.html">
                <img src="./assets/img/brand/blue.png">
              </a>
            </div>
            <div class="col-6 collapse-close">
              <button type="button" class="navbar-toggler collapsed" data-toggle="collapse" data-target="#navbar_global" aria-controls="navbar_global" aria-expanded="false" aria-label="Toggle navigation">
                <span></span>
                <span></span>
              </button>
            </div>
          </div>
        </div>
        <ul class="navbar-nav navbar-nav-hover align-items-lg-center ml-lg-auto">
          <li class="nav-item">
            <a href="javascript:;" class="nav-link" role="button">
              <i class="ni ni-ui-04 d-lg-none"></i>
              <span class="nav-link-inner--text">Elements</span>
            </a>
          </li>
        </ul>
      </div>

Also, for the cards you have to remove the padding-bottom to remove that grey area.

Please let me know if it works.

Thank you, Rares

indianknight commented 3 years ago

Hi Rares, Thanks for your reply. I removed that viewport now and switched to vaadin AppLayout and things looks better now I really like Argon for some reason no idea why :).

I am left with last 2 bugs on UI one is related to Bootstrap Navs pills I used from Argon (as-is). I tried everything I could but looks I need to add some js to make it work, although in my prototype of site in html this works perfectly fine. Only on real site the nav-item and tab-pane (containing results in a container for each nav-item) are generated dynamically. I am not sure what is happening because as I said all works ok on my prototype where its not generated dynamically.
I am trying to deploy working site soon on heroku if you can help then may be we can find a way to take this offline as I don't want to launch this with a bug.

indianknight commented 3 years ago

Update : I added a carousel now for the nav button Microservices and I cannot make that image strech. I went through the bootstrap doc and there they mention to use d-block w-100 and something I also saw on Argon design example. But my images are still small and almost unreadable, I tried some css tricks like width:100% for the image and also for the carousel div.

Could you please help !!

rarestoma commented 3 years ago

Hi @indianknight,

From what I understand, you want to remove the white margins from the carousel, right? You can do that by adding p-0 class to modal-body.

If you want the modal to be bigger, you can add modal-xl class to modal-dialog.

Please let me know if it works.

Thank you, Rares

indianknight commented 3 years ago

@rarestoma man it worked damn I didn't noticed that .. I did that correctyl for the other dialogue.

Also, strangley that tab issue I had is gone on production but on my local development environment I had that issue from start and I kept it to fix for later. Today I enabled my working site privately on heroku to test and I found that tabs issue is gone like it was never there :).

I will close this issue. Thanks :+1:

creativetimofficial / ct-argon-design-system-pro