My Google search didn't come up with any answer to is this expected behavior or am I doing something wrong.
My HTML:
<a v-on:click="showInformation = !showInformation">Show / Hide</a>
<transition name="fade">
<p class='further-info' v-if="!showInformation">Lorem ipsum dolor.</p>
</transition>
EDIT: Just found out that it works like this:
<transition name="fade">
<div v-if="!showInformation">
<p class='further-info'>Lorem ipsum dolor</p>
</div>
</transition>
This is not documented in the Vue.js documentation and it's clearly shown that it should work as the first example. Is this expected in my case?
My SASS:
.fade-enter-active, .fade-leave-active
transition: opacity .5s
.fade-enter, .fade-leave-to
opacity: 0
Pretty straight forward, but I may be doing something wrong. Whenever I click the button the p shows and hides correctly, but without any transition effect.
Using:
Laravel 5.7.9
Vue.js 2.9.6 (with ES6)
Sass 1.14.2 (but not relevant since it complies the transition code correctly)
The HTML file is written a blade template file
You should change the v-if to a v-show. This way the element exists in the page even though it's not displayed.
Related
I have a PHP blade file and I have a list of components working as they but can't seem to pass in a custom event in the kebab style casing the documentation mentions .
Blade template
<div id="app">
<Shop
:active-tab="activeTab"
#show-product-modal="handleShowProductModal"
>
</Shop>
</div>
Even the #show-product-modal color syntax in my text editor shows something is off but I can't tell what the issue is here. I've even tried camel casing it but that doesn't do it either. However, if i changed it to 1 word , like "#showitnow", it works fine.
When using VueJS you can't use kebab case for listening to component events. Instead your blade template should read:
<div id="app">
<Shop
:active-tab="activeTab"
#showProductModal="handleShowProductModal"
>
</Shop>
</div>
I am trying to get the whole div clickable and this works but only with a straight link to another site. Is there a way to make it work with this text in it also:
<div class='reddit' title='Share Us On Reddit' onclick="window.open('http://www.reddit.com/submit?url=httpsFwww.example.com&title=XXX is Cape Breton's Homepage. Start Your Web Search With Beautiful Cape Breton Island')">
Thanks
From CSS Tricks
This probably isn't a thing you need to rely on JavaScript for
anymore. Since HTML5, this is perfectly valid:
<a href="http://example.com">
<div>
anything
</div>
</a>
And remember you can make links display: block; so sometimes you
don't even need the div.
<div style="cursor:pointer" onclick="document.location='evenidontknow-page.html'">
<h2>Full Div Clickable</h2>
</div
The above code helped me very well, and this will not require any extra code.
Using a tag may solve the problem but we need to add extra code to it.
please check this link for more info w3schools
Bootstrap has a feature called "Stretched Link". From the documentation:
Make any HTML element or Bootstrap component clickable by “stretching” a nested link via CSS.
You can read more by visiting the following link:
https://getbootstrap.com/docs/4.4/utilities/stretched-link/
everybody.
I am using the following:
angular: 1.6.1,
angular-material: 1.1.3,
angular-ui-router: 1.0.0-rc.1
All my views are built using components and I am routing them with the UI-Router 1.x component syntax:
$stateProvider
.state('main', {
url: '/main',
component: 'main',
})
For the sake of completeness, my components are laid out as follows:
angular
.module('app.main')
.component('main', {
templateUrl: '/modules/main/main.html',
controller: MainCtrl,
})
MainCtrl.$inject = [];
function MainCtrl (){
}
My index.html is as follows:
<body ng-app="app" layout="column" ng-cloak>
<md-toolbar layout="row" layout-align="center center">
<h1>Site Title</h1>
</md-toolbar>
<div layout="column" flex ui-view></div>
My view for the main component is irrelevant at this point as the problem starts here. If, for example, my view for main.html is as follows:
<div layout="row" flex>
Content
</div>
The div will NOT flex. If, however, it is simply added in place of the ui-view in the parent, it will flex as normal.
<body ng-app="app" layout="column" ng-cloak>
<md-toolbar layout="row" layout-align="center center">
<h1>Site Title</h1>
</md-toolbar>
<div layout-align="column" flex>
Content (THIS WORKS FINE!)
</div>
Both contain the same attributes in the inspector apart from the usual differences in using ui-view.
This also seems to be causing problems with md-content, which will only scroll if it is the element in the parent that contains the ui-view. Any nested md-contents will not scroll.
I have also tried using the original ui-router way of routing to controllers and templates which was the norm before the .component syntax.
There is a similar problem listed here:
Angular Material layout breaks when using UI-Router
It seems that this gentleman's solution was to abandon UI-Router and use ng-route. I really don't want to move away from UI-Router and am considering completely abandoning Angular-Material but would really prefer to avoid that.
Can anybody please help out with this?
I have a very simple popup dialog that is driven by JavaScript in my Laravel app. Essentially, on click, a class is added to the popup div that uses a CSS transition to change its opacity from 0 to 1.
Here's my test:
public function testCantFindCodePopup()
{
$customer = $this->createCustomer();
$this->fillOutEmailAndDob($customer);
$this->visit('/product-codes/new')
->dontSee("Still can't find your code?");
$this->click('Can\'t find your code?');
sleep(0.5);
$this->see("Call customer service");
}
The transition takes 300ms, so I thought sleeping for 500ms would solve the issue, but no dice.
And actually, the test fails on the dontSee("Still can't find your code?") part, even though that text is inside of the popup, which has display: none set on it on load.
Am I doing something wrong, or is PHPUnit not aware of CSS and JavaScript like capybara is (because it runs in a headless browser).
If I can't use PHPUnit for this type of integration test, is there something similar that I can use? Note that I have ~70 other tests in PHPUnit, so whatever other tool there is, it can't be a wholesale replacement; ideally it'd exist alongside my PHPUnit tests.
Edit
Relevant part of the blade template:
<div class="form-control">
<label for="product-code">Enter Your{{$second}}Code</label>
<input type="text" id="product-code" name="product-code" />
</div>
<button class="btn btn-dark" type="submit">Submit</button>
<span class="label-explanation js__popup-toggle">Can't find your code?
<div class='popup'>
<span class="popup__close">×</span>
<img src="/assets/images/find-code-pop-up.png" alt="[alt text]" />
<p class="popup__cannot-find">Still can't find your code?<br/> Call customer service at xxx-xxx-xxxx.</p>
Relevant CSS:
.popup
width 300px
position absolute
left 35%
bottom 0
transition width 0.3s, height 0.3s, opacity 0.3s, transform 0.45s
opacity 0
background rgba(255,255,255,0.9)
color $brand-primary-dark
text-align center
transform scale(0)
p
font-size 16px
text-transform none
line-height 1.15
&.js__display
height auto
opacity 1
transform scale(1)
z-index 9999
.popup__close
font-size 20px
position absolute
top 0
right 5px
transition font-size 0.3s
&:hover
font-size 24px
You're not doing anything wrong. In this case, PHPUnit is not aware of CSS and JavaScript. I was checking Laravel Testing module source code (which extends PHPUnit functionality) and it just uses a crawler. So, it doesn't run any client-side script. Actually, it doesn't even render the page.
I didn't use it yet, but you may give a try to phpunit-spiderling.
I see this is a very old question, but just for documentations sake:
If you would like to test with browser functionality you can have a look at Laravel Dusk:
https://laravel.com/docs/5.8/dusk
Dusk uses a Chrome driver to visit your project on your local machine for example. So it will execute the javascript too in case you are using a framework like Vue.js for example.
This is what a test looks like:
public function test_careers_page_shows_vacancies()
{
$this->browse(function (Browser $browser) {
$career = \App\Career::first();
$browser->visit("/careers")
->assertSee("Join our team!")
->pause(1000) // Pause for a second
->waitForText("Careers loaded") // Or wait for text
->assertSee($career->title);
});
}
Note that Dusk will use your local environment unlike phpunit which might use a testing environment. For example, I use an sqlite environment for phpunit. But Dusk browses to "http://myproject.test/" which uses a different database. You can solve this by setting up a testing database on you local machine.
for some reason this navbar is not rendering correctly on the browser :
<header data-role="header">
<div id="navbar-personalize" data-role="navbar" class="my-navbar">
<div data-align="left">
<img src="../../Images/dashboard6.png" alt="Dashboard"/>
</div>
<span data-role="view-title">Cart Summary</span>
<div data-align="right">
<a href="#merchandise-otherorders-view">
<img src="../../Images/whoelse6.png" alt="Who else is going?"/>
</a>
</div>
</div>
</header>
I have other navbars just like this one all around my index file, and they all work fine, except for this one. It seems that KendoUI isn't initializing it all. By inspecting the code I can see that it's missing all of kendo's styling (like "km-navbar" and such).
It may have to do with the fact that I'm defining this header in each one of the views inside the file, instead of defining it in the app layout, but for some reason defining it inside the app layout doesn't work for me, it simply doesn't render at all.
I'm out of ideas, can somebody help me?
Thanks
I had this problem today. Make sure that kendo.mobile.min.js is included on your page. The docs don't say to put it in, but adding that made it work for me.