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."
Related
How am i able to increase the height(thickness) of a vaadin progressbar- 7.6.3. And also how can i display the values which are progressed. For example in the middle of a progressbar showing how much is done and how much is remaining. I have tried with the following code but it is always the default size.
_progress.setWidth("100%");
_progress.setHeight("100%");
and also i tired using css, something like,
_progress.setCaption(" ");
_progress.setCaptionAsHtml(true);
_progress.addstylename("progress");
where ".progress" i have defined in my .css with
.progress1 {
color: black;
text-align: right;
font-size: 2em;
font-weight: bold;
height: 100%;
}
Instead of defining a style just for your progress bar, you have to include the wrapper to your style rule.
.v-progressbar-fat .v-progressbar-wrapper {
height: 20px;
}
If you add this to your style sheet and apply the style name "fat" to your progress bar, it's height will be changed to 20px (Or whatever amount you wish)
I am using Table component from react-virtualized to render a dataset of 1,000 rows and 20 columns. Even after reading documentation for Table and Column and after a few experiments, I am not able to draw borders between cells in my Table.
Examples from react-virtualized with borders include only Grid component, such as Grid and CellMeasurer.
It think that Grid has a different implementation of cells than Table which appears to use flexboxes? Notice in the images below that a cell "content" in Grid occupies whole cell whereas in Table only a portion.
The Table component uses flexbox layout so you can still do what you're aiming for, using flex styles.
For example, you can specify a rowStyle={{alignItems: "stretch"}} so that the columns fill the full height of the row. Then if you want to vertically center column text, you can specify a Column prop style={{display: "flex", alignItems: "center"}}.
(The same can also be done with CSS classes of course.)
This should more or less get you what you need, although this may not be the correct way to override. I just started working with react-virtualized yesterday so I'm still toying around with things.
#border: 1px solid #D3D3D3;
.column() {
align-items: center;
border-right: #border;
display: flex;
flex: 1;
height: 100%;
min-width: 0;
&:last-child {
border-right: none;
}
}
/*** Overrides for react-virtualized styles ***/
.ReactVirtualized__Table__Grid {
background-color: white;
border-bottom: #border;
border-right: #border;
}
.ReactVirtualized__Table__headerColumn {
.column();
}
.ReactVirtualized__Table__headerRow {
background-image: linear-gradient(#fff, #efefef);
border: #border;
padding-right: 0 !important;
}
.ReactVirtualized__Table__row {
border-bottom: #border;
border-left: #border;
}
.ReactVirtualized__Table__rowColumn {
.column();
}
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.
Primefaces 5
Are there component that shows data similar to p:messages component. I.e. greyed / colored box with close button, but without warning sign.
Or how can you use Messages component to show any content as panel component.
EDIT: If Message panel should be shown for several updates, as far as I know you must use FacesContext to add a message for every update. I don't want to do it.
EDIT2: This is what I want to achieve. At the best with a primefaces component.
As you can see:
any content
command link
close button
Depends if you want it to be inline or kind of 'popup'.
If you want it to not always be visibile, I'd use an overlayPanel and with giving it a styleClass and some custom css it looks like what you want (styling done against default showcase theme):
.myCustomOverlay .ui-overlaypanel-content {
background-color: lightpink;
padding-right: 2em;
}
.myCustomOverlay .ui-overlaypanel-close.ui-state-default {
background-color: transparent;
background-image: none;
border: medium none;
box-shadow: 0 0 0 transparent;
right: 5px;
top: 5px;
}
You can try this online with a browser developer tool
If you want it to be visible inline, I'd use a panel and style that in a similar fashion
.myPanel.ui-panel {
background: none repeat scroll 0 0 lightpink;
}
.myPanel .ui-panel-titlebar.ui-widget-header {
background: none repeat scroll 0 0 transparent;
border: medium none;
}
.myPanel .ui-panel-titlebar-icon {
background: none repeat scroll 0 0 transparent;
border: medium none;
box-shadow: 0 0 0 transparent;
}
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/