It seems like overriding styles does not work consistently. I have this two styled components:
const StreamContentContainer = styled.div`
display: flex;
vertical-align: middle;
flex-direction: column;
flex: 0 100%;
align-items: center;
flex-wrap: wrap;
padding: 1rem;
flex-flow: column wrap;
`;
// new Component based on StreamContentContainer
with additional styles and override stlye
const FullStreamContentContainer = styled(StreamContentContainer)`
height: 56.11vw;
overflow: hidden;
padding: 0;
`;
Know if I use my FullStreamContentContainer there should be no padding. On CSR that works fine, the element shows up in the markup correctly.
But if the element is requested initial with SSR the padding of the StreamContentContainer overrides the FullStreamContentContainer again.
It does not matter if the node is generated on SSR or CSR, it shows up the same way in the markup:
<div class="sc-4y67w2-1 fodYop sc-4y67w2-0 WzHos">...</div>.
But if I inspect the element with the DevTools, I can see that on SSR first the class WzHos shows up and then the class fodYop:
Compared to the rules rendered on CSR the rules occur the other way round - like expected:
Does anybody know what causes this weird behavior and how to avoid it?
Problem resolved: Increased the specificity of FullStreamContentContainer styles by using
const FullStreamContentContainer = styled(StreamContentContainer)`
&&& {
height: 56.11vw;
overflow: hidden;
padding: 0;
}
`;
Relating to the SC docs, the repeated class bumps the specificity high enough to override the source order.
Hi guys i have a problem in IE 11. I have a embed svg which need to interact with its elements... Here is the example just click on floor 5 :
http://infinityproperty.sitetester.biz/floorplans/59
In Chrome and Firefox everything is ok bur in IE it is too little? What could make this thing?
For someone which try everything to resize svg in ie there is a problem with inline svg. When you try to resize it in 100% width it works fine in the major browsers but IE refuse to resize it.
I have managed it to work with one css hack here it is.
Conteiner:
#svg {
display: inline-block;
padding-bottom: 70%;
position: relative;
vertical-align: middle;
width: 100%;
}
#svg svg {
display: block;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
Also remove the width and height of the svg.
With this i got it to work. :)
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
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/
How can I change the default graphic for the Infowindow close button?
You can do it with CSS, like this:
img[src="http://maps.gstatic.com/intl/en_us/mapfiles/iw_close.gif"]
{ content:url("/img/own_close_button.png"); }
Works on:
Chrome 14.0.835.163
Safari 4.0.5
Opera 10.6
Most mobile devices (default browser)
Does not work on:
FireFox 27.0
IE 11.0
If you're using google maps API V3, then you might want to use the official add on infobox.
Google Maps Utility - Infobox
First you need to hide the default close icon:
.gm-style-iw button.gm-ui-hover-effect img {
display: none !important;
}
Second, force the default button (that holds the image) to have full opacity:
.gm-style-iw button.gm-ui-hover-effect {
opacity: 1 !important;
}
Third, set your own image and position it:
.gm-style-iw button.gm-ui-hover-effect:before {
display: block;
content: "";
background: url('assets/close-red.svg') center center no-repeat;
background-size: cover;
width: 8px;
height: 8px;
right: -19px;
position: relative;
}
Result:
With jQuery you can change the image file location. If I have an image button_close.png that is 16px in size:
jQuery('img[src="http://maps.gstatic.com/intl/en_us/mapfiles/iw_close.gif"]').livequery(function() {
jQuery(this).attr('width', 16).attr('height', 16).css({
width: '16px',
height: '16px'
}).attr('src', 'button_close.png');
});
Of course this only works as long as Google uses this file location.
button.gm-ui-hover-effect {
background: url(your-img.png) !important;
background-size: contain !important;
}
button.gm-ui-hover-effect img {
display: none !important;
}
Using what Dimitrije Djekanovic and Grant suggested, here is a working version for the current API version 3.49 (Mid-May of 2022):
/* hides the x image */
button.gm-ui-hover-effect > span {
display: none !important;
}
/* inserts the customized and clickable image instead */
button.gm-ui-hover-effect {
opacity: 1 !important;
background: url('close.svg') center center !important;
background-repeat: no-repeat !important;
background-size: 16px 16px !important;
/* above is a good size or uncomment the next line */
/* background-size: contain !important; */
}
To test this, go to the StackBlitz demo provided by the official documentation and paste the style.css file while having background changed to:
background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/5/51/Mr._Smiley_Face.svg/414px-Mr._Smiley_Face.svg.png')
center center !important;
There isn't really a way to do this. Your best bet would probably be to use a third-party or custom Infowindow.
There's a list of some third-party solutions here.
To replace with (or whatever image you might like), after
infowindow.open(map, marker);
you can try to add these lines
$('img[src="http://maps.gstatic.com/intl/en_us/mapfiles/iw_close.gif"]').each(function() {
$(this).attr('width', 14);
$(this).attr('height', 13);
$(this).css({width: '14px',height: '13px'});
$(this).attr('src','http://www.google.com/intl/en_us/mapfiles/close.gif');
});