You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@tapestry.apache.org by D Tim Cummings <ti...@triptera.com.au.INVALID> on 2022/02/08 02:33:00 UTC
quickstart navbar toggler not working
I just tried out quickstart 5.8.0 and noticed that when the browser
window is small it collapses the navbar behind a button. Unfortunately
clicking the button doesn't show the navbar. It used to work in old
versions of quickstart (eg 5.4.5) which used Bootstrap 3 but quickstart
5.8.0 uses Bootstrap 4.
What changes are required to get the navbar toggler button working with
Bootstrap 4?
Thanks
Tim
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
Re: quickstart navbar toggler not working
Posted by "Vangel V. Ajanovski" <aj...@gmail.com>.
On 8.2.22 03:33, D Tim Cummings wrote:
> I just tried out quickstart 5.8.0 and noticed that when the browser
> window is small it collapses the navbar behind a button. Unfortunately
> clicking the button doesn't show the navbar. It used to work in old
> versions of quickstart (eg 5.4.5) which used Bootstrap 3 but
> quickstart 5.8.0 uses Bootstrap 4.
>
> What changes are required to get the navbar toggler button working
> with Bootstrap 4?
You need to import the bootstrap collapse module ( and you might also
need the bootstrap dropdown module for drop down menus ).
Change Layout.java, this line:
@Import(stylesheet = "context:css/app.css")
into this:
@Import(stylesheet = "context:css/app.css",module = {
"bootstrap/collapse", "bootstrap/dropdown"})
I think that the quickstart should be fixed to include this.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
Re: quickstart navbar toggler not working
Posted by "Thiago H. de Paula Figueiredo" <th...@gmail.com>.
On Thu, Feb 10, 2022 at 12:27 AM D Tim Cummings <ti...@triptera.com.au.invalid>
wrote:
> Thanks Vangel and Thiago.
>
> https://issues.apache.org/jira/browse/TAP5-2703
Thank you very much!
> I don't know the annotation @Include.
That's a typo of mine and I apologize for that. It's @Import.
> I tried Vangel's solution using
> @Import(stylesheet = "context:css/app.css",module = {
> "bootstrap/collapse", "bootstrap/dropdown"}) and that gave me some more
> errors in browser javascript console and still no success in displaying
> navigation menu.
>
> DevTools failed to load source map: Could not load content for
> +
> http://localhost:8080/assets/meta/zae851f6d/tapestry5/bootstrap4/css/bootstrap.css.map+:
>
> <
> http://localhost:8080/assets/meta/zae851f6d/tapestry5/bootstrap4/css/bootstrap.css.map+:>
>
> HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
> DevTools failed to load source map: Could not load content for
> +
> http://localhost:8080/assets/meta/z2779b2b3/tapestry5/bootstrap4/css/bootstrap-grid.css.map+:
>
> <
> http://localhost:8080/assets/meta/z2779b2b3/tapestry5/bootstrap4/css/bootstrap-grid.css.map+:>
>
> HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
> console.js:104 RequireJS error: require: Cannot set properties of null
> (setting '_isTransitioning')
> console.js:104 RequireJS error: require: Cannot set properties of null
> (setting '_element')
> DevTools failed to load source map: Could not load content for
> +http://localhost:8080/modules.gz/bootstrap/popper.js.map+:
> <http://localhost:8080/modules.gz/bootstrap/popper.js.map+:> HTTP error:
> status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
> DevTools failed to load source map: Could not load content for
> +http://localhost:8080/modules.gz/bootstrap/dropdown.js.map+:
> <http://localhost:8080/modules.gz/bootstrap/dropdown.js.map+:> HTTP
> error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
> DevTools failed to load source map: Could not load content for
> +http://localhost:8080/modules.gz/bootstrap/collapse.js.map+:
> <http://localhost:8080/modules.gz/bootstrap/collapse.js.map+:> HTTP
> error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
> DevTools failed to load source map: Could not load content for
> +http://localhost:8080/modules.gz/bootstrap/util.js.map+:
> <http://localhost:8080/modules.gz/bootstrap/util.js.map+:> HTTP error:
> status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
>
>
> Tim
>
> On 9/2/22 23:18, Thiago H. de Paula Figueiredo wrote:
> > Hi!
> >
> > This is most probably caused by the lack of inclusion of the JavaScript
> > module that implements the Bootstrap 4 behaviors. Jira ticket please? :)
> >
> > Meanwhile, you can try adding @Include(module = "bootstrap") to your
> Layout
> > class. I haven't tested this and it might not work.
> >
> > Cheers!
> >
> > On Mon, Feb 7, 2022 at 11:33 PM D Tim Cummings<tim@triptera.com.au
> .invalid>
> > wrote:
> >
> >> I just tried out quickstart 5.8.0 and noticed that when the browser
> >> window is small it collapses the navbar behind a button. Unfortunately
> >> clicking the button doesn't show the navbar. It used to work in old
> >> versions of quickstart (eg 5.4.5) which used Bootstrap 3 but quickstart
> >> 5.8.0 uses Bootstrap 4.
> >>
> >> What changes are required to get the navbar toggler button working with
> >> Bootstrap 4?
> >>
> >> Thanks
> >>
> >> Tim
> >>
> >>
> >> ---------------------------------------------------------------------
> >> To unsubscribe, e-mail:users-unsubscribe@tapestry.apache.org
> >> For additional commands, e-mail:users-help@tapestry.apache.org
> >>
> >>
--
Thiago
Re: quickstart navbar toggler not working
Posted by D Tim Cummings <ti...@triptera.com.au.INVALID>.
Thanks Vangel
Working for me now.
Tim
On 11/2/22 10:34, Vangel V. Ajanovski wrote:
> there is one more change you need. In Layout.tml, in the
> navbar-toggler button change data-bs-toggle to data-toggle and
> data-bs-target to data-target.
>
> Something like this
>
> <button class="navbar-toggler" type="button" data-toggle="collapse"
> data-target="#navbarSupportedContent"
> aria-controls="navbarSupportedContent" aria-expanded="false"
> aria-label="Toggle navigation"><span
> class="navbar-toggler-icon"></span></button>
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
Re: quickstart navbar toggler not working
Posted by "Vangel V. Ajanovski" <aj...@gmail.com>.
On 10.2.22 04:26, D Tim Cummings wrote:
> I don't know the annotation @Include. I tried Vangel's solution using
> @Import(stylesheet = "context:css/app.css",module = {
> "bootstrap/collapse", "bootstrap/dropdown"}) and that gave me some
> more errors in browser javascript console and still no success in
> displaying navigation menu.
I forgot that there is one more change you need. In Layout.tml, in the
navbar-toggler button change data-bs-toggle to data-toggle and
data-bs-target to data-target.
Something like this
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation"><span
class="navbar-toggler-icon"></span></button>
I tested it with the 5.8.0 quickstart and it worked here.
The other errors are related to the fact that the source map files are
missing, but they are only useful for debugging purposes (afaik).
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
Re: quickstart navbar toggler not working
Posted by D Tim Cummings <ti...@triptera.com.au.INVALID>.
Thanks Vangel and Thiago.
https://issues.apache.org/jira/browse/TAP5-2703
I don't know the annotation @Include. I tried Vangel's solution using
@Import(stylesheet = "context:css/app.css",module = {
"bootstrap/collapse", "bootstrap/dropdown"}) and that gave me some more
errors in browser javascript console and still no success in displaying
navigation menu.
DevTools failed to load source map: Could not load content for
+http://localhost:8080/assets/meta/zae851f6d/tapestry5/bootstrap4/css/bootstrap.css.map+:
<http://localhost:8080/assets/meta/zae851f6d/tapestry5/bootstrap4/css/bootstrap.css.map+:>
HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
DevTools failed to load source map: Could not load content for
+http://localhost:8080/assets/meta/z2779b2b3/tapestry5/bootstrap4/css/bootstrap-grid.css.map+:
<http://localhost:8080/assets/meta/z2779b2b3/tapestry5/bootstrap4/css/bootstrap-grid.css.map+:>
HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
console.js:104 RequireJS error: require: Cannot set properties of null
(setting '_isTransitioning')
console.js:104 RequireJS error: require: Cannot set properties of null
(setting '_element')
DevTools failed to load source map: Could not load content for
+http://localhost:8080/modules.gz/bootstrap/popper.js.map+:
<http://localhost:8080/modules.gz/bootstrap/popper.js.map+:> HTTP error:
status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
DevTools failed to load source map: Could not load content for
+http://localhost:8080/modules.gz/bootstrap/dropdown.js.map+:
<http://localhost:8080/modules.gz/bootstrap/dropdown.js.map+:> HTTP
error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
DevTools failed to load source map: Could not load content for
+http://localhost:8080/modules.gz/bootstrap/collapse.js.map+:
<http://localhost:8080/modules.gz/bootstrap/collapse.js.map+:> HTTP
error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
DevTools failed to load source map: Could not load content for
+http://localhost:8080/modules.gz/bootstrap/util.js.map+:
<http://localhost:8080/modules.gz/bootstrap/util.js.map+:> HTTP error:
status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
Tim
On 9/2/22 23:18, Thiago H. de Paula Figueiredo wrote:
> Hi!
>
> This is most probably caused by the lack of inclusion of the JavaScript
> module that implements the Bootstrap 4 behaviors. Jira ticket please? :)
>
> Meanwhile, you can try adding @Include(module = "bootstrap") to your Layout
> class. I haven't tested this and it might not work.
>
> Cheers!
>
> On Mon, Feb 7, 2022 at 11:33 PM D Tim Cummings<ti...@triptera.com.au.invalid>
> wrote:
>
>> I just tried out quickstart 5.8.0 and noticed that when the browser
>> window is small it collapses the navbar behind a button. Unfortunately
>> clicking the button doesn't show the navbar. It used to work in old
>> versions of quickstart (eg 5.4.5) which used Bootstrap 3 but quickstart
>> 5.8.0 uses Bootstrap 4.
>>
>> What changes are required to get the navbar toggler button working with
>> Bootstrap 4?
>>
>> Thanks
>>
>> Tim
>>
>>
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail:users-unsubscribe@tapestry.apache.org
>> For additional commands, e-mail:users-help@tapestry.apache.org
>>
>>
Re: quickstart navbar toggler not working
Posted by "Thiago H. de Paula Figueiredo" <th...@gmail.com>.
Hi!
This is most probably caused by the lack of inclusion of the JavaScript
module that implements the Bootstrap 4 behaviors. Jira ticket please? :)
Meanwhile, you can try adding @Include(module = "bootstrap") to your Layout
class. I haven't tested this and it might not work.
Cheers!
On Mon, Feb 7, 2022 at 11:33 PM D Tim Cummings <ti...@triptera.com.au.invalid>
wrote:
> I just tried out quickstart 5.8.0 and noticed that when the browser
> window is small it collapses the navbar behind a button. Unfortunately
> clicking the button doesn't show the navbar. It used to work in old
> versions of quickstart (eg 5.4.5) which used Bootstrap 3 but quickstart
> 5.8.0 uses Bootstrap 4.
>
> What changes are required to get the navbar toggler button working with
> Bootstrap 4?
>
> Thanks
>
> Tim
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> For additional commands, e-mail: users-help@tapestry.apache.org
>
>
--
Thiago