I'm really not getting why my <h:commandbutton> wont work.
If I put the same commandbutton outside of the navbar, it works. the button becomes white if I hover over it. My code is the following:
<nav class=" navbar nav-bottom">
<img class="nav-item navbar-picture" src="#{resource['images/logo.gif']}" />
<img class="nav-item nav-logo-text" src="#{resource['images/retailsonar.svg']}" />
<div class="topnav-right">
<div style="float:left; margin-top:5px">
<h:outputText class="navbar-text" id="welkom" value="Welkom, #{userBean.getNaam()}"/>
</div>
<div style="float:right">
<h:form>
<h:commandButton class="btn-navbar" action="#{userBean.logout()}" value="logout" />
</h:form>
</div>
</div>
</nav>
<!-- navbar einde -->
<div class="vertical-center-full-page">
<center class="vertical-center">
<h:form>
<h:commandButton class="btn-navbar" action="#{userBean.logout()}" value="logout" />
</h:form>
the button in the navbar wont work
the button on the main screen does work, I can log out by clicking on it
Related
I'm using vue-slick-carousel in my app. I have the following code:
<template>
<div id="app">
<div class="banner-container">
<div>
<VueSlickCarousel v-bind="settings">
<div v-for="item in items" :key="item.id">
<!-- ALTERNATIVE 1 (WORKS) -->
<div>
<a href="abc" target="_blank">
<img id="picture1" src="./assets/carouse-item.png" />
<div class="position-relative">
<div class="banner-description">
<span class="banner-title">
<a v-bind:href="'#'" class="header-anchor">#</a>
TITLE<br />
</span>
<span class="banner-alternative-text">
<a v-bind:href="'#'" class="header-anchor">#</a>
DESCRIPTION<br />
</span>
</div>
</div>
</a>
</div>
<!-- ALTERNATIVE 2 (DOESN'T WORK) -->
<!-- <Child :item="item"/> -->
</div>
</VueSlickCarousel>
</div>
</div>
</div>
</template>
There are 2 alternatives. Alternative 1 works fine:
Alternative 2 is basically the code under Alternative 2 extracted into a new component - Child. It produces this output:
I can't understand why just extracting the part of code into a new component changes the layout like that.
The source code of the app is available at https://github.com/marcinjahn/vue-carousel-issue.
I have in one line a pickList and a panel but when I resize window then the panel overlaps pickList. Please see below code and screen(https://gofile.io/?c=iAqMJh). Only when panel arrives the arrows of the pickList then resizing happens without any error.
<div class="ui-g ui-fluid">
<div class="ui-g-12 ui-md-2">
<p:outputLabel
value="#{pageMsgs['citiesMSG.aaaa']}"
style="font-weight: bold" />
</div>
<div class="ui-md-4 ui-g-12">
<h:panelGroup>
<p:pickList id="pick1"
value="#{citiesBean.rowLevelCities}"
converter="#{pickListConverter}" var="cities"
responisve="true"
itemLabel="#{cities.name}" itemValue="#{cities}"
disabled="#{!citiesController.isEditMode(true)}">
<p:ajax event="transfer"
listener="#{citiesController.onTransferCityHeader}"
update="pick1 panelH" />
</p:pickList>
</h:panelGroup>
</div>
<div class="ui-md-6 ui-g-12">
<p:panel header="Header"
id="panelH">
<div class="ui-g ui-fluid">
<div class="ui-md-3 ui-g-12">
<p:outputLabel
value="#{pageMsgs['citiesMSG.cityHeader']}"
style="font-weight: bold" />
</div>
<div class="ui-md-1 ui-g-12" />
<div class="ui-md-3 ui-g-12">
<p:outputLabel
value="#{pageMsgs['citiesMSG.cityHeader']}"
style="font-weight: bold" />
</div>
</div>
</p:panel>
</div>
</div>
I'm using JSF 2.2
I have a reset button on my xhtml and basically when the field is empty it will prompt a message and the field background will turn to red.
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<div id="cId" class="panel-body-width panel-input-body-width">
<div>
<div id="snDIV" class="row row-in-fieldset-div">
<div class="col-md-4">
<p:outputLabel id="myLabel" value="myNumber" />
</div>
<div class="col-semicolon col-md-1">
<p:outputLabel value=":" />
</div>
<div class="col-md-3 row-in-fieldset-cp">
<p:inputText id="myNumber"
value="#{userBean.myNumberInput}"
required="#{userBean.isRequired}"
requiredMessage="Input should not be empty" >
<p:ajax event="blur" update="myNumber myNumberMsg" />
</p:inputText>
</div>
</div>
<div class="col-md-3 row-in-fieldset-msg">
<p:message id="myNumberMsg" for="myNumber" />
</div>
</div>
</div>
</div>
<br />
<div class="panel-footer">
<p:commandButton id="reset" value="Reset"
actionListener="#{userBean.reset}" process="#this"
update="myNumber myNumberMsg" >
</p:commandButton>
</div>
</ui:composition>
Problem is, once i hit reset, the value does change to default and the error message disappears but the background color of the field is still red and does not change back to white. Anyone has an idea as to why?
I did try using the update=":form" but doesn't seem to work and my page won't load.
You should take a look at the resetInput component: http://www.primefaces.org/showcase/ui/misc/resetInput.xhtml
I'm very noob in bootstrap. I tried my first bootstrap page and then downloaded a theme from bootswatch.com and replaced the bootstrap.css with the Cerulean theme. When I change the font in the bootstrap.css it stay with the old theme
#import url(//fonts.googleapis.com/css?family=Caesar+Dressing);
but its not reflecting when I refresh my page.
<!DOCTYPE html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script>
<link href="css/bootstrap.css" rel="stylesheet">
<title>Twitter Bootstrap Tutorial - A responsive layout tutorial</title>
<style type='text/css'>
</style>
<script>
$(function() {
// Setup drop down menu
$('.dropdown-toggle').dropdown();
// Fix input element click problem
$('.dropdown input, .dropdown label').click(function(e) {
e.stopPropagation();
});
});
</script>
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container"><!-- Collapsable nav bar -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Your site name for the upper left corner of the site -->
<a class="brand">GUVI</a>
<!-- Start of the nav bar content -->
<div class="nav-collapse"><!-- Other nav bar content -->
<!-- The drop down menu -->
<ul class="nav pull-right">
<li>Sign Up</li>
<li class="divider-vertical"></li>
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">Sign In <strong class="caret"></strong></a>
<div class="dropdown-menu" style="padding: 15px; padding-bottom: 0px;">
<form action="[YOUR ACTION]" method="post" accept-charset="UTF-8">
<input id="user_username" style="margin-bottom: 15px;" type="text" name="user[username]" size="30" />
<input id="user_password" style="margin-bottom: 15px;" type="password" name="user[password]" size="30" />
<input id="user_remember_me" style="float: left; margin-right: 10px;" type="checkbox" name="user[remember_me]" value="1" />
<label class="string optional" for="user_remember_me"> Remember me</label>
<input class="btn btn-primary" style="clear: left; width: 100%; height: 32px; font-size: 13px;" type="submit" name="commit" value="Sign In" />
</form>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
You're linking to the right font, yeah; that said, here's my take on this:
In most cases you should use a tag to import Google web fonts. I generally avoid using #import where possible because it delays the loading of the file.
All you should need to do to replace the font is to specify the new font-family as 'Caesar Dressing' inside a body {} style block. Assuming you've already done that in your local copy of bootstrap.css, if that still doesn't work try specifying it inside a tag inside your HTML. You should avoid doing that where possible though; it makes it annoying down the road when you have multiple pages to maintain.
One other thing: I noticed you have some inline styles for some of your inputs. You should really avoid using those where possible--it's good form to try and separate presentation and content markup as much as possible.
I have a couple divs and they are set up to be sepereate. but when I load the page they all go underneath the first div that is created. So the example below SiteFullControl is the first div, everything just falls underneath here when the page load. any ideas?
<div id="SiteFullControl" >
<fullcontrol:FullAlbum runat="server" ID="FullControlAlbum" />
</div>
<div id="SitePartialControl" >
<partialalbum:partialalbum ID="partialcontrolalbums" runat="server" />
</div>
<div id="SiteViewOnlyAlbums" class="">
<viewonly:viewonly ID="viewonlyalbums" runat="server" />
</div>
<div id="SitePublicAlbums" class="">
<publicalbum:publicalbum ID="publicalbum" runat="server" />
</div>
<div id="SiteFavoriteAlbums" class="">
<favoritealbum:favoritealbum ID="favoritealbum" runat="server" />
</div>
<div id="SiteFriends" class="">
<friends:friends ID="friend" runat="server" />
</div>
<div id="SiteCreateAlbum" class="">
<createalbum:createalbum ID="createalbums" runat="server" />
</div>
Example of whats happen when the page load
<div id="SiteFullControl" >
<fullcontrol:FullAlbum runat="server" ID="FullControlAlbum" />
I checked the css with firebug and it does not have any position for the css.
use this CSS rule, it may work:
display:block;
no more help can be given without accessing CSS properties.