I have first time problem like that. Text is not wrapping in span (if I changed it to div too) inside bootstrap col.
CSS word-wrap is not working, i have no idea what to do. Span is display inline-block with width: 100%
This is my structure:
<div class="col-4 dropdown-item-container">
<a class="z-depth-1 dropdown-item" href="#">
<img class="dropdown-image" src="img/cat8.jpg" />
<span>System do wykonywania połączeń DOMINO</span>
</a>
</div>
And it's looks like that:
I found problem, in bootstrap class .dropdown-item have set white-space: nowrap;
Related
So I've created a div and inside of that div I am mapping over some lements that are contained within my wishlist. I want that div to have borders all around the elements I've mapped over but instead it, apparently, stays empty even tho I don't think it should be. Here is the relevant code:
<div className='wishlistWrapper'>
{productsInWishList.map(product=>
<div className='productsWishListWrapper'>
<p className='productName'> <strong>{product.name}</strong>
<span>
<BsX className='removeProduct' size={25}
onClick= {()=>removeFromWishList(product)}/>
</span>
</p>
<img className='productImage' src={product.image}/>
<p className='productPrice'> <strong>{product.price}</strong> </p>
</div>)}
</div>
I've fixed the problem, so basically I had display: inline-block and float: left at the same time-> removing the float: left and changing the display to display:inline-flexbox solved everything
I have this code as a custom element:
<link rel="import" href="../paper-ripple/paper-ripple.html">
<polymer-element name="menu-item">
<template>
<style>
:host {
box-sizing: border-box;
position: absolute;
font-size: 16px;
width:100%;
}
.center{
text-align: center;
}
</style>
<div class="item">
<div class="content center" fit>
<content select="*"></content>
</div>
<paper-ripple fit></paper-ripple>
</div>
</template>
<script>
Polymer({
});
</script>
It is instantiated as follows: <menu-item>Home</menu-item>
Problem is, either the ripple fires and the link does not.
Or the link fires but the ripple does not.
How should I be doing this?
Thanks,
g3
I think the basic problem is that the way you have it structured, the anchor tag and the paper-ripple are siblings, so there's no way for the click event to bubble up from the ripple to the anchor, or vice versa.
One approach would be to have the anchor tag inside your element and use data binding, like so:
<div class="item">
<a href="{{url}}">
<div class="content center" fit>
{{text}}
</div>
<paper-ripple fit></paper-ripple>
</a>
</div>
...
<menu-item url="{{url('#/')}}" text="Home"></menu-item>
Full demo here:
http://jsbin.com/bumiva/3/edit
Another approach would be to use your original structure and add a click listener on the outer <div> and follow the link manually, like this:
http://jsbin.com/wadiwu/2/edit
Hope this helps.
I was able to get it to work by changing your code to create the element to have the anchor tags around the element, like so:
<menu-item>site</menu-item>
removing select="*" from your content element, and giving your :host style some height. I set mine to height: 32px;
Here's the code, a bit messy, going to fix it up after this is answered.
<table>
<tr>
<td>
<a href="" onmouseover="document.getElementById('place-holder-1').src='graphics/websites/labyrinth/labyrintharrow1.png';" onmouseout="document.getElementById('place-holder-1').src='';">
website screenshot service
<img src="" id="place-holder-1" style="zindex: 100; position: absolute;" />
</a>
</td>
</tr>
</table>
Here is a live demo: http://jsfiddle.net/Lrnvrdub/
And thanks for the help it's greatly appreciated.
Edit: all of the replies work fantastically but when I try to adjust the size of the image, I have tried using both css and html, an empty square is in the image's place when the link isn't hovered.
Here's an example: http://jsfiddle.net/csewukgs/
Another option to Fabio's solid answer is to use a background image.
<a class="bullet" href="">Answer1</a>
<a class="bullet" href="">Answer2</a>
.bullet {
background: url("path/to/image.png") no-repeat 0 50%;
padding-left: 18px; //width of image, plus some extra spacing
}
The benefit being that if you have a list of links, you do not need to add an img element to every one.
One caveat, if the image is non-decorative and actually communicates something important, do use an img element with an appropriate title attribute, which is helpful to screen-reader users.
<a class="bullet" href="">Answer1 <img src="..." title="The correct answer"></a>
// use Fabio's float:left solution
delete the inline style and add this
a img{float:left}
you may want to add some margin as well, but you'll get the idea
Note: it's a good idea to give a class to that img so you don't have to be this generic. Like
.bullet{float:left}
HTML
<img class="bullet" src="uyourimage" id="place-holder-1" />
This is my solution: http://jsfiddle.net/1Latpnzn/2/
It assumes that you want to shift the text to the right to make room for the image. By setting the placeholder to be as follows:
#place-holder-1 {
display: inline-block;
vertical-align: middle;
}
reordering the html:
<a href="" id="hover-link">
<img id="place-holder-1" />
<span>Answer1</span>
</a>
and removing the position: absolute; image can be positioned to the left of the text.
If you can change the position from absolute to inline block and move the image before the "answer 1" text that will work, and to get it to be aligned with the text you can add the vertial-align:bottom style
<a href=""
onmouseover="document.getElementById('place-holder-1').src='graphics/websites/labyrinth/labyrintharrow1.png';"
onmouseout="document.getElementById('place-holder-1').src='';">
<img src="" id="place-holder-1" style="zindex: 100; position: inline-block; vertical-align:bottom" />
Answer1
</a>
Here my first div shows an image. If you mouse hover on the image then it should show another div named hdiv.
Here $pitem[6] return data from database with php for loop.
CODE
<div class="pcimga">
<div class="pcimg"><img src="Portfolio_Image/'.$pitem[6].'" class="pcimg" /></div>
<div class="hdiv" style="display:none;">
<span class=" butnn"><a data-toggle="modal" href="#myModal'.$pitem[0].'">View</a>
</div>
</div>
Try this
$('.pcimga').hover(function() {
$(this).find('.hdiv').show();
}, function(){
$(this).find('.hdiv').hide();
});
Check it here JsFiddle
try this...
.pgimga:hover~.hdiv
{
display:block;
}
let me know if you want any further guidance..
Try this in CSS. You need to use !important to override the inline style "display:none"
.pcimg:hover+.hdiv
{
display:inherit !important;
}
You can do it with pure CSS:
1. When .hdiv is next to .pcimg
.pcimg:hover+.hdiv{
display:block !important;
}
Fiddle
2. When there is gap between .hdiv and .pcimg
.pcimg:hover~.hdiv{
display:block !important;
}
Fiddle
Note : Internal styles have higher priority than External styles.So for giving External styles more priority !important is needed
You can do it like this with onmouseover and onmouseout events using jquery:
<div class="pcimga">
<div class="pcimg"><img onmouseover='$(".hdiv").show();' onmouseout='$(".hdiv").hide();' src="Portfolio_Image/'.$pitem[6].'" class="pcimg" /></div>
<div class="hdiv" style="display:none;">
<span class=" butnn"><a data-toggle="modal" href="#myModal'.$pitem[0].'">View</a>
</div>
</div>
if you have multiple instances of this block, all of the images will be visible though. to distinguish which one is hovered you can send hideDiv(this) and get which image hovered to show appropriate image.
My problem is in my navigation bar, which can be found here: http://grupocoral.netai.net/
There is a space between those images and i want to remove it. How can I do it?
Javascript Code:
function swap(element, image) {
element.src = image;
}
And the html code:
<div id="navbar"><img src="images/homeover.png">
<img src="images/membros.png" onmouseover="swap(this, 'images/membrosover.png');" onmouseout="swap(this, 'images/membros.png');">
<img src="images/canticos.png" onmouseover="swap(this, 'images/canticosover.png');" onmouseout="swap(this, 'images/canticos.png');">
<img src="images/celebracoes.png" onmouseover="swap(this, 'images/celebracoesover.png');" onmouseout="swap(this, 'images/celebracoes.png');">
<img src="images/contactos.png" onmouseover="swap(this, 'images/contactosover.png');" onmouseout="swap(this, 'images/contactos.png');">
</div>
Just in case, navbar CSS code:
#navbar{
width: 1280px;
margin: 0 auto;
height: 40px;
horizontal-align: center;
padding:inherit;
}
By the way, do you know any other way of making a menu like that without JS?
Thanks,
langel
It's due to the white space in your code. Remove the white space between your links and that should clear it up.
In other words, change your HTML block of navigation to:
<div id="navbar"><img src="images/homeover.png"><img src="images/membros.png" onmouseover="swap(this, 'images/membrosover.png');" onmouseout="swap(this, 'images/membros.png');"><img src="images/canticos.png" onmouseover="swap(this, 'images/canticosover.png');" onmouseout="swap(this, 'images/canticos.png');"><img src="images/celebracoes.png" onmouseover="swap(this, 'images/celebracoesover.png');" onmouseout="swap(this, 'images/celebracoes.png');"><img src="images/contactos.png" onmouseover="swap(this, 'images/contactosover.png');" onmouseout="swap(this, 'images/contactos.png');"> </div>
This keeps my code clean and it removes the whitespaces in the code.
<a><img src="" /></a><!--
--><a><img src="" /></a><!--
--><a><img src="" /></a><!--
--><a><img src="" /></a>
Inline elements like these are whitespace dependent, which means that browsers will render some whitespace between them.
to counter this you can either run all your elements together on one line
linklink
or block the closing and opening tags
<a href="#">
link</a><a href="#">
</a>
<a href="#">
link</a><a href="#">
</a>
:)
to remove the space just remove the break line between the anchor ex:
and i suggest to use the css without the js :
<div id="navbar">
<a class="home" href="#"></a>....
</div>
CSS :
#navbar a{display:inline-block;margin:0;}
#navbar a.member{background:url(images/member.png) no-repeat 0 0}
#navbar a.member:hover{background:url(images/memberhover.png) no-repeat 0 0}
You do have an alternative option to your javascript image swap. You can use the CSS :hover in combination with background-image.
dabblet example:
http://dabblet.com/gist/2253898
CSS:
#Membros{
background-image:url('http://grupocoral.netai.net/images/membros.png');
width:240px;
height:40px;
}
#Membros:hover {
background-image:url('http://grupocoral.netai.net/images/membrosover.png');
}
HTML
<div id="Membros"></div>
I hope this helps!
By the way, do you know any other way of making a menu like that without JS?
Yes, here is an example, I've used one of your background image link with 'Home' on it, you should use only one image without any text label on it.
you can also instead of using javascript to change the image source, use :hover css pseudo-class to change the background, it will require you to change the way is made but it will make this menu work even when JS is disabled
css_pseudo_classes