I want to show date on main.gsp. Do I just call g:formatDate? Because I did that but date is not rendered:
<span id='loginLink' style='position: absolute; right: 20px; top: 20px;'>
<sec:ifLoggedIn>
You are logged in as:<sec:username/> (<g:link controller='logout'>Logout</g:link>)
</sec:ifLoggedIn>
<sec:ifNotLoggedIn>
<g:link controller='login'>Login</g:link>
</sec:ifNotLoggedIn>
</span>
<span style='position: absolute; right: 20px; top: 40px;'>
Date:<g:formatDate format="yyyy-MM-dd" date="${date}"/>
</span>
Are you sure that the 'main' controller action returns the 'date' variable containing the actual date? For example:
def main = {
[date: new Date()]
}
Another solution would be to instanciate the Date class directly in your gsp code.
<g:formatDate format="yyyy-MM-dd" date="${new Date()}"/>
Related
I'm starting to work with styled-components and had a question about scoping.
This is just a dummy example but one that shows the point.
So I have a component. I setup a styled div called Wrapper then instead of creating another styled component to handle group, I thought be easier to just add a class to the inner div called .group and using nesting like in SCSS to style the inner div. This works but the problem with using className for the inner div is there could be a collision with global styles called .group
So, is there a way to avoid this with scoping somehow, or would I have to create another styled component called Group to handle that inner CSS ? Seems like a lot of boilerplate to have to add another styled component just to style the inner components.
const Wrapper = styled.div`
color: blue;
.group {
padding: 10px;
color: green;
}
`
const MyComponent = () => {
return (
<Wrapper>
<div className='group'>
<h1>heading text</h1>
<h2>subheading text</h2>
</div>
<div>This is my blue text</div>
</Wrapper>
);
}
Here is my globalStylesheet with group. Obviously this only has one style but it could have way more to handle grouped elements globally.
export default createGlobalStyle`
h1, h2, h3, h4, h5, h6 {
font-family: '.....';
}
.group {
background-color: red;
}
`;
I know I could also do
> div {
border: 1px solid red;
}
but I want to be able to be more explicit with a className
I think it's better to create another styled-component for group like
const Group = styled.div`
padding: 10px;
color: green;
`
So you can be sure that overwriting styles properly. And if there will be more styles in Wrapper, it stays less readable. Also you can easily replace Group component into children or make as parent(in this case you should rewrite .group style from Wrapper to another one).
In future to prevent boilerplate code you can rewrite existed styled-components like
const Timer = styled.div`
background: #ff5f36;
border-radius: 50%;
width: 48px;
height: 48px;
display: flex;
justify-content: center;
align-items: center;
font-family: GTWalsheim;
font-size: 32px;
color: #ffffff;
`
const TimeIsUp = styled(Timer)`
width: 172px;
border-radius: 8px;
`
EDIT
Also you can easily replace Group component into children or make as parent
I'll try to explain in code below
const MyComponent = () => {
return (
<Wrapper>
<div className='someClass'>
<Group> // so you can replace only your component, without rewriting any style
<h1>heading text</h1>
<h2>subheading text</h2>
</Group>
</div>
<div>This is my blue text</div>
</Wrapper>
);
}
I mean you can easily replace Group component to any place of code. While when you write style from parent as it was in Wrapper, you should replace this .group style from Wrapper to another element which is parent for .group
I've been working on a website that was built in WordPress using bootstrap templates. This website was not originally built by me, so I have troubles with it from time to time when implementing changes. The website uses yarn to build a 'dist' folder from node.js modules and elements contained within the theme folder. The stylesheets are scss files. After the build process finishes, it has created a 'dist' folder that is to be uploaded to the theme folder, which contains all the combined stylesheets, images, etc.
I'm having issues with a form that is created via contact form 7 and I'm not sure if this is an issue relating to the build process using yarn or something else. The issue is with a checkbox that I've added to the form. It works as expected on desktop displays, but when the site is viewed on an iPhone (via Chrome, Safari and Google browser apps) the checkbox tick doesn't appear on click.
Just for clarification, the last few websites I have built myself, that have included a form with a checkbox or checkboxes, are working perfectly across desktop and IOS devices. I use css stylesheets rather than scss, but I have used all the same styles on both the websites that are working fine and the one that is not working on IOS, so I really can't see why the checkbox is not working on mobile. I have also tried applying a couple of other fixes that have also not helped resolve the issue.
Please see below for the html code and scss code for the checkbox section of the website:
<div class="af-field af-field-type-checkbox af-field-checkbox acf-field acf-field-checkbox">
<div class="af-label acf-label">
<label for="brochure-pack-checkbox">Please send me a Giraffe Equity Release brochure pack</label>
</div>
<div class="af-input acf-input">
<div class="acf-input-wrap">
<span class="wpcf7-form-control-wrap brochure-pack"><span class="wpcf7-form-control wpcf7-checkbox" id="brochure-pack-checkbox"><span class="wpcf7-list-item first last"><label><input type="checkbox" name="brochure-pack[]" value="Please send me a Giraffe Equity Release brochure pack"><span class="wpcf7-list-item-label">Please send me a Giraffe Equity Release brochure pack</span></label></span></span></span>
</div>
<p></p></div>
<p></p></div>
.acf-field-checkbox {
.wpcf7-list-item {
position: relative;
margin-left: 0;
width: 100%;
display: block;
}
.wpcf7-list-item-label {
font-size: 2rem;
font-weight: 600;
line-height: 1.5em;
margin-left: 35px;
display: block;
cursor: pointer;
}
.wpcf7-list-item-label:before {
position: absolute;
left: 0;
width: 28px;
height: 28px;
border: 1px solid #b79c68;
border-radius: .25rem;
display: block;
}
.wpcf7-list-item-label:after {
position: absolute;
content: '\1F5F8';
font-size: 30px;
color: #b79c68;
width: 0px;
height: 0px;
top: 2px;
left: 2px;
opacity: 0;
}
input[type=checkbox] {
display: none;
-webkit-appearance: checkbox;
}
input[type=checkbox]:checked {
+ span.wpcf7-list-item-label:after {
opacity: 1;
}
}
label {
margin-bottom: 0;
cursor: pointer;
display: block;
}
}
I appreciate there may be some styles applied that are not needed, but they are not affecting the checkbox functionality. Once I have found the right solution to get this working for this specific website, I will clean up the styles applied and remove any that aren't necessary.
If anyone has any idea why the checkbox could be not working on this website, when they work fine on the others I have built, I would really be grateful for any hints or advice you could give.
Thanks in advance, if you need anymore information about the issue, then please ask and I'm sure I can clear up anything needed.
For anyone that is interested or has a similar issue, the cause of this problem was this:
.wpcf7-list-item-label:after {
content: '\1F5F8';
}
For some reason that code rendered a tick on desktop but not IOS. Changed to another tick code and resolved the issue.
I am using the categories plugin for Flot. I have the xaxis ticks. (The xaxis lists different Products.) I want to make each xaxis tick clickable so that when you click on it, an alert is triggered with some information about that xaxis.
however, when I add a tickFormatter function, it is completely ignored. (I have a yaxis tickformatter function that works fine.) I think this is because of the categories plugin.
Can anyone demonstrate the categories plugin an a tickFormatter function on the xaxis.
Try something like this:
var ticks = $('.flot-x-axis > .flot-tick-label');
ticks.css({'z-index': 100, 'cursor': 'pointer'});
ticks.click(function(){
alert($(this).text());
});
Inspecting this sample here, the generated axis is:
<div class="flot-x-axis flot-x1-axis xAxis x1Axis" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;">
<div class="flot-tick-label tickLabel" style="position: absolute; max-width: 136px; top: 395px; left: 49px; text-align: center;">January</div>
...
I tried the above code on that page and it works.
EDITS
When using the flot-tickrotor plugin the labels are not divs but are "written" on the canvas. Try this instead:
$("#chart").bind("plotclick", function (event, pos, item) {
var x = chart.getXAxes()[0];
var y = chart.getYAxes()[0];
if (pos.y < y.min) { // make sure user is clicking in XAxis
alert(x.rotatedTicks[Math.round(pos.x)].label);
}
});
Example here.
I am trying to create a one page website that is similar this example :
http://themeforest.net/theme_previews/6622929-glissando-creative-minimal-onepage-psd-template?index=1&url_name=glissando-creative-minimal-onepage-psd-template
I thought I could use the transform css property but It's not giving me exactly what I want. Does anyone have any insight into this? I'm really new to coding!
Thanks!
html:
<div class="about">
<div class="aboutcontent">
</div>
</div>
scss:
.about {
width: 100%;
background: white;
transform: skewY(-5deg);
padding: 150px;
.aboutcontent {
transform: skewY(5deg);
}
}
I figured out the answer! My above code was actually correct. To make my website look like the example you should put a background image on the body and then you can position the skewY divs appropriately!
Hi guys im trying to add a delete icon in my filter. So i use filterStyle class to point to a function. and it works fine i see the icon when i click it the field clears. However the filter doesnt filter anything when im trying to search.<style>
span.deleteicon {
position: relative;
}
span.deleteicon span {
position: absolute;
display: block;
top: 5px;
right: 0px;
width: 16px;
height: 16px;
background: url('http://cdn.sstatic.net/stackoverflo/img/sprites.png?v=4') 0 -690px;
cursor: pointer;
}
span.deleteicon input {
padding-right: 16px;
}
</style>
my function is like $('input.deletable').wrap('<span class="deleteicon" />').after($('<span/>').click(function() {
$(this).prev('input').val('').focus();
}));
and called in my filter filterStyleClass="deletable" i understand my filter uses an ajax call is this affected anyway by this.
This really doesn't look like JSF at all.
You can check out the primefaces filter example.
http://www.primefaces.org/showcase/ui/data/datatable/filter.xhtml