I am use this code to display flash message
req.flash('success', 'Data saved...!!!');
When flash message is shown it looks like its part of content of website. So, is there any other way to show a message in keystone.js.
You just need some CSS to make it fixed in the center of the screen above everything else:
#flash-messages {
position: fixed;
top: 50%;
left: 0;
right: 0;
display: block;
z-index: 9999999;
text-align: center;
}
.alert{
box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.34);
color: #fff;
h4 {
font-size: 4rem;
}
}
.alert-warning {
background-color: #d80000;
border-color: #9c0000;
}
.alert-success {
background-color: #2c9800;
border-color: #247d00;
}
For FlashMessage it looks like part of the website
you imported/included the FlashMessage Mixin/Component in your view by the generator, otherwise, it won't show up.
For how to use FlashMessage
1. inclouds the FlashMessage Mixin in view, to where you want.
2. trigger FlashMessage API in controller ./routes/views/*.js when condition match.
- `true` send all error messages to `req.flash`
- `"validation"` only send validation error messages to `req.flash`\
- `"update"` only send update errors to `req.flash`
3.the message data will available in res.locals.messages for View to use.
Related
The problem I'm facing is that when I click on a button to show this element, on IE 10 it doesn't show up. I'm adding the display: block property via JavaScript, that's why it's not in the CSS. It works on all other browsers except IE.
If I remove the transition it shows up.
section {
display: none;
position: relative;
top: 50%;
margin: 0 auto;
width: 400px;
transition: all 0.5s linear;
transform: translate(0,-300%);
}
section.visible {
transform: translate(0,-50%);
}
I solved the issue by showing the section when adding display: block on the visible class rather than using jQuery show(). Guess IE10+ has issues with that.
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
Situation
I'm currently building a site and desire to have some elements create a border/outline upon hovering the mouse over them. This is simple enough to make work. For reference, please see the staging site at Stagin area link. I'm using the grid part of the latest bootstrap and the box-sizing model.
Issue
I find that upon hovering, the content below that which is being hovered gets "pushed" far down below the next element. Using the stagin area as reference, I can change the behaviour through CSS to fix this on the left hand side or the right hand side but, not both at the same time.
Code
Here is a snippet of the CSS I use to make the effect:
.hover-border:hover {
border: 3px solid #3A3A3A;
display: block;
}
Using this method, anything but the first element behaves as expected. If I try this next snippet, the first element works but, then the others break:
.hover-border:hover {
border: 3px solid #3A3A3A;
display: block;
margin-top: -6px;
}
For the sake of clarification with regard to properties inherited, I have set the margin/padding on the elements in question to '0 !important' for standard behaviour until hover
Problem
How can I stop the element below from being pushed?
Personally - I go with something along the lines of:
.hover-border {
border: 3px solid transparent;
display: block;
}
.hover-border:hover {
border: 3px solid #3A3A3A;
}
The best solution to these issues is to use the box-sizing:border box property
* {box-sizing:border-box;}
Then elements will retain whatever size you define but it will now INCLUDE borders and padding.
Another solution with less code:
.hover-border:hover{
box-shadow: inset 0 0 0 3px #3a3a3a;
}
Try This will work.
.hover-border {
border: 3px solid transparent;
display: block;
}
.hover-border:hover{
border: 3px solid #3a3a3a;
}
Or
a.no-decoration, a.no-decoration img {
border: medium none;
color: inherit;
cursor: pointer;
outline: medium none;
text-decoration: none;
display: block; /*Added*/
border: 3px solid transparent; /*Added*/
}
Borders are tough to work with when sizing is important. I found it much better to use box-shadow, which just alters the background, so takes up no size.
https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow?v=a
This will work:
.hover-border:hover {
outline: solid 4px #78CF82;
}
"Because the outline property is not a part of the element's dimensions; the element's total width and height is not affected by the width of the outline."
I've got a problem with Chrome.
I'm trying to vertically-align some divelements using display: inline-block;
instead of floating them. The problem occurs when I put some text into them: for a strange reason, Chrome displays differently filled divs onto different lines.
Firefox and IE are working correctly.
For better understanding check this example
How can I avoid this?
You need to add for global wrapper font-size: 0; and set regular font size for your inline blocks, you can also add: letter-spacing: 0; and word-spacing: 0;, something like this:
.wrapper {
font-size: 0;
letter-spacing: 0;
word-spacing: 0;
}
.wrapper .inline_block {
display: inline-block;
font-size: 12px;
letter-spacing: 1px;
word-spacing: .1em;
vertical-align: top;
}
and example fiddle: http://jsfiddle.net/3ab22/
and updated fiddle: http://jsfiddle.net/3ab22/3/
http://pastebin.com/GQ6Q0dti
-- I want to center my webpage but I've found no successful tutorials.
Could someone please help me and fix my problem
I just want to center my page. Thanks
If you want to center it horizontally+vertically use position: absolute;
Demo
.center {
position: absolute;
top: 50%;
left: 50%;
height: 200px;
width: 400px;
margin-top: -100px; /* Half of container height */
margin-left: -200px; /* Half of container width */
}
and if you want to center it only horizontally simply use this
margin: 0 auto;
^ ^
T/B L/R
Just don't forget the width to the container ;)
if you want to make horizontal center only, the best way is not to use absolute position, use default position and set margin:0px auto;
#Table_01 {
width:792px;
margin:0px auto;
}
#template {
height:1584px;
}