Its pretty hard to recreate this in jsfiddle so I'm going to go ahead and paste a screenshot, HTML and CSS:
I'm having problem displaying the dropdown in the image above.
HTML and CSS:
<div class="row-fluid profile-gallery-image-container">
<div class="span12">
<img src="#"/>
<div class="image-options">
<div class="dropdown">
<i class="icon-cog icon-white"></i>
<ul class="dropdown-menu">
<li>test</li>
</ul>
</div>
</div>
<div class="delete-image">
<a href="javascript:void(0);"/></a>
</div>
</div>
</div>
.profile-gallery-image-container {
max-width: 130px;
max-height: 110px;
margin-bottom: 0px;
display: inline-block;
position: relative;
border: 2px solid rgba(140,140,140,1);
z-index: 0;
}
.image-options {
float: right;
top: 0px;
right: 0px;
position: absolute;
padding-top: 2px;
border-left: 2px solid rgba(255,128,64,1);
border-bottom: 2px solid rgba(255,128,64,1);
width: 15px;
height: 15px;
}
What am i doing wrong?
This could be to do with z-index levels or could be overflow settings.
Setting the parent container to have "overflow:visible;" would be a start - but then I'd look at position: relative on the menu CSS - that often helps matters.
But ultimately without seeing a working demo I can't figure it out.
Related
I want to fixed the "X" button inside the popup and sticky top.
But position:fixed & position:absolute both not working.
It will work fine if I using IOS google chrome and safari.
.popup-inner {
position: absolute;
bottom: 0px;
overflow: auto;
padding-bottom: 30px;
-webkit-text-size-adjust: none;
}
.popup-close {
width: 30px;
height: 30px;
position: fixed;
top: 25px;
right: 20px;
}
<a class="btn" data-popup-open="popup-1" href="#"><i class="fa fa-globe" aria-hidden="true"></i>popup</a>
<div class="popup" data-popup="popup-1">
<div class="popup-overlay"></div>
<div class="popup-inner">
<div class="fixed-content">
<div class="col-main">
<div>123</div>
<div class="content">
<ul>
<li>
<a>
<span>aaaaa</span>
<div class="lan">bbbb</div>
</a>
</li>
</ul>
</div>
</div>
</div>
<a class="popup-close" data-popup-close="popup-1" href="#">
<div class="popup-icon"></div>
</a>
</div>
</div>
JSFiddle Here
Thanks for help.
I would suggest some CSS fixes
CSS
.popup-icon{
height:30px;
width:30px;
position: relative;
}
.popup-icon:before,
.popup-icon:after {
content: "";
position: absolute;
display: block;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 3px;
background: #aaa;
margin: auto;
}
Link for reference
i´m working with dropdowns using bootstrap, i have an div element called "side-menu" with
overflow-y:scroll; width:60px,
and inside of it i got dropdowns , as you know dropdowns has UL tags that holds the content you want to popup,
well i want to popup that content outside of my side-menu in the same position as my dropdown is even if i scroll my side-menu.
but seems that my "side-menu" has a overflow-x that doesn´t let my content go out even when i set overflow-x:hidden
any idea on how to do it ?
html:
<div class="side-menu">
<ul class="main-navigation-menu">
<li class="dropdown">
<button class="item dropdown-toggle" type="button" id="dropdownChamados" data-toggle="dropdown" >
<div class="item-content">
<div class="item-media"><i class="ti-bar-chart"></i></div>
<div class="item-inner"> <span class="name"> Orçamentos</span> <i class="icon-arrow"></i></div>
<div>
</button>
<ul class="dropdown-menu dropdown-item sub-menu" aria-labelledby="dropdownChamados">
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</li>
</ul>
</div>
CSS:
.side-menu{
margin-top: 68px;
position: fixed;
float: left;
width: 60px;
padding: 0px !important;
height: calc(100vh - 68px);
border-right: 1px solid #c8c7cc;
background-color: #FFF;
overflow-y: scroll;
overflow-x: hidden;
}
.main-navigation-menu .dropdown .dropdown-menu {
position: absolute;
left: 60px;
height: auto;
bottom: auto;
top: auto;
width: 260px;
border-radius: 0;
border-bottom: 1px solid;
border-right: 1px solid;
border-color: #c8c7cc;
margin-top: -1px;
overflow-y: scroll;
overflow-x: hidden;
}
Oh ok I get it now, use javascript for that, here's the code:
`
<button /* attributes here */ onclick="showmenu()"></button>
<script>
var dropdown = document.querySelector(".dropdown-menu").style.display;
function showmenu()
{
if(dropdown=="block"){dropdown="none";}
else if(dropdown=="none"){dropdown="block";}
}
</script>
Here's the css to modify:
.side-menu
{
overflow:visible;
}
.dropdown-menu
{
display:none;
}
Well, if you hide the overflow-x, it is expected not to show... Duh
Maybe try overflow-x: visible on .side-menu ?
Maybe you should use position absolute for submenu :
.submenu {
position : absolute;
top : 100px; /*position from top*/
left : 100px; /*position from left*/
}
(The title might sound stupid but I don't know how to put it more sophisticated.)
As you can see in the follwing screenshots, I have 3 stacked divs.
<div class="col-xs-3">
<div class="center-horizontal-inline">
<a class="upvote" href="#" data-id="iZheLNnewWtMhPTQd">
</div>
<div class="score">
115
<span class="badge score-diff vertical-align"> +5 </span>
</div>
<div class="center-horizontal-inline">
</div>
The one in the middle contains the number (115). The other two the vote-arrows. For the one containing the number, I want to add a "badge" (in bootstrap context) right next to the number, let's say to the right. You can see my attempt shining through the colored overlay.
The goal is to leave the number centered respectively to the arrow-icons, while placing the badge with an offset (or "right next to") respectively to the number.
My attempt was to set a float: right; for the badge, but as you can see, the number has an offset now. When I try position: absolute; on the badge, there is no offset (as wanted), but I can't get the badge right next to the number, I can only attach it to the right border because I don't have the number as positioning-reference anymore.
Hope my explanation was clear enough. I also didn't know how to search for that problem...
EDIT 1:
As I want it to look like (positioning-wise):
Here we go, using relative and absolute positions together:
DEMO: http://jsfiddle.net/1qbo7uwn/
HTML
<div class="score">
<span class="score-wrap">
<span class="score-main">123</span>
<span class="score-diff">8</span>
</span>
</div>
CSS
.score {
width: 80px;
border: 2px solid blue;
padding: 10px 0;
text-align: center;
}
.score-wrap {
display: inline-block;
position: relative;
}
.score-main {
border: 2px solid green;
}
.score-diff {
position: absolute;
border: 2px solid red;
left: 100%;
top: -2px;
}
Added some span tags in the HTML.
EDIT: vertical align of everything, by setting line height.
http://jsfiddle.net/1qbo7uwn/1/
As you said you are okay with HTML modification. Here's my attempt:
Demo Fiddle
HTML
<div class="wrap">
<div class="vote up">
<i class="fa fa-angle-up"></i>
</div>
<div class="stat">
<span class="score">115
<span class="badge">+5</span>
</span>
</div>
<div class="vote inactive">
<i class="fa fa-angle-down"></i>
</div>
</div>
CSS
.wrap{
margin: 100px;
text-align:center;
}
.vote{
font-size:36px;
}
.up{
color:green;
}
.down{
color:red;
}
.inactive{
color:gray;
}
.score{
position: relative;
display:block;
padding: 5px 0;
}
.badge{
background: #eee;
padding:5px 10px;
border-radius: 30px;
position: absolute;
top:0;
margin-left:10px;
}
Try
Demo: http://jsfiddle.net/tamilcselvan/rjv1xxo2/1/
.center-horizontal-inline {
font-size: 2em;
text-align: center;
}
.score {
text-align: center;
}
.score:after {
content:attr(data-badge);
position: absolute;
margin-left: .4em;
font-size: x-small;
min-width: 10px;
padding: 3px 7px;
font-size: 12px;
font-weight: 700;
line-height: 1;
color: #FFF;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
background-color: #777;
border-radius: 10px;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-xs-3">
<div class="center-horizontal-inline vote"> <i class="glyphicon glyphicon-chevron-up"></i>
</div>
<div class="score" data-badge="+5">115</div>
<div class="center-horizontal-inline"> <i class="glyphicon glyphicon-chevron-down"></i>
</div>
</div>
I have 6 icon, I want to display them as vertically, and before icon there is one red bar, will show the user mouse over effect, something like this :
how can I show this effect in CSS ?
what i try is this :
<div style="width: 20%; float: right";>
<div>
<div style="width: 20%; float: left; width: 26px; height: 26px">
<img src="../../../Images/red_rectangle.png" /></div>
<div style="width: 80%; float: right; width: 26px; height: 26px">
<img src="../../../Images/Diploma_24.png" title="Education" /></div>
</div>
<div>
<div style="width: 20%; float: left; width: 26px; height: 26px">
<img src="../../../Images/red_rectangle.png" /></div>
<div style="width: 80%; float: right; width: 26px; height: 26px">
<img src="../../../Images/Medal_24.png" title="Membership" /></div>
</div>
</div>
but by default i dont want to show red bar,
///*/// when mouse over : show red bar icon
when click on icon, :- i also want to remain show red bar , until user don't click on other icons
DEMO: http://jsfiddle.net/gvee/PcgaA/2/
HTML
<img src="http://placekitten.com/26/26" />
<img src="http://placekitten.com/26/26" />
<img src="http://placekitten.com/26/26" />
CSS
img {
border-left: 2px solid transparent;
padding-left: 2px;
margin: 5px;
}
img:hover {
border-left-color: red;
}
Here is an example using ::after to create a psuedo element. The div elements will need replaced with img tags.
CSS
.selection{
width: 30px;
height: 30px;
border: 3px solid black;
margin: 4px;
}
.selection:hover::before{
content: ' ';
width: 5px;
background: red;
height: 30px;
display: block;
position: relative;
left: -10px;
}
HTML
<div id="container">
<div class="selection"></div>
<div class="selection"></div>
<div class="selection"></div>
<div class="selection"></div>
</div>
JS Fiddle: http://jsfiddle.net/3RJJe/1/
try this in ur CSS file
CSS styling:
img {margin-left:5px;}
img:hover {border-left:5px solid #f00}
Note: this is just generalized CSS, u will need to have specific CSS syntax.
<div>
<div>
<img src="../../../Images/red_rectangle.png" />
</div>
<div>
<img src="../../../Images/Diploma_24.png" title="Education" />
</div>
</div>
But this would be a better idea:
<ul class="my-menu">
<br>
<li>
<img src="../../../Images/red_rectangle.png" />
</li><br>
<li>
<img src="../../../Images/Diploma_24.png" title="Education" />
</li><br>
</ul>
CSS styling:
.my-menu li img {margin-left:5px; border-left:5px solid #fff}
.my-menu li img:hover {border-left:5px solid #f00}
I am trying to align my 40px40px image to bottom right. I've tried this, worked fine, but if I use another back image, it doesn't fit to bottom right. How can I avoid this problem ?
<div style="width:179px;margin-right:9px;padding-bottom:10px;background-color:white;border:1px solid #c9d2d6;padding:4px;padding-bottom:7px;border-radius:4px;position:relative">
<img src="http://media-cache-ec4.pinterest.com/upload/212443307392484250_XX0wNZSy_b.jpg" style="width:179px;" \>
<div style="position:absolute;z-index:5;top:73%;left:75%;width:40px;height:40px;border:1px solid #333333;">
<img width=40 src="http://media-cache-ec4.pinterest.com/avatars/baduizm1974-1346279934.jpg" \>
</div>
<div style="border-radius:6px;width:179px;border-top:0px;position:relative;background-color:white;">
<div style="text-align:left;padding-left:6px;padding-right:5px;padding-top:3px;">Fragments by textile artist Lorenzo Nanni (2001) </div>
</div>
</div>
UPDATE:
That said, you should use a mix of CSS and HTML instead:
HTML:
<div class="container">
<div class="picture-container">
<img src="http://media-cache-ec4.pinterest.com/upload/212443307392484250_XX0wNZSy_b.jpg" class="background-picture" \>
<div class="avatar">
<img src="http://media-cache-ec4.pinterest.com/avatars/baduizm1974-1346279934.jpg" \>
</div>
</div>
<div class="container-text">
<div>Fragments by textile artist Lorenzo Nanni (2001)<br />More text</br />Goes here</div>
</div>
</div>
CSS:
.container {
width: 179px;
margin-right: 9px;
padding-bottom: 10px;
background-color: white;
border: 1px solid #c9d2d6;
padding: 4px;
padding-bottom: 7px;
border-radius: 4px;
position: relative;
}
.container .picture-container {
position: relative;
min-height: 60px;
}
.container .background-picture {
width: 179px;
}
.container .avatar {
position: absolute;
z-index: 5;
bottom: 10px;
right: 5px;
width: 40px;
height: 40px;
border: 1px solid #333333;
}
.container .avatar img {
width: 40px;
}
.container .container-text {
border-radius: 6px;
width: 179px;
border-top: 0px;
position: relative;
background-color: white;
}
.container .container-text div {
text-align: left;
padding-left: 6px;
padding-right: 5px;
padding-top: 3px;
}
This also fixed the problem in the comment below.
DEMO
Old post, that explains why you have a problem in the first place and doesn't account for taller text:
In
<div style="position:absolute;z-index:5;top:73%;left:75%;width:40px;height:40px;border:1px solid #333333;">
<img width=40 src="http://media-cache-ec4.pinterest.com/avatars/baduizm1974-1346279934.jpg" \>
</div>
instead of
top:73%;left:75%; then use bottom and right like so: bottom: 60px;right: 10px;
Full example:
<div style="width:179px;margin-right:9px;padding-bottom:10px;background-color:white;border:1px solid #c9d2d6;padding:4px;padding-bottom:7px;border-radius:4px;position:relative">
<img src="http://media-cache-ec4.pinterest.com/upload/212443307392484250_XX0wNZSy_b.jpg" style="width:179px;" \>
<div style="position:absolute;z-index:5;bottom: 60px;right: 10px;width:40px;height:40px;border:1px solid #333333;">
<img width=40 src="http://media-cache-ec4.pinterest.com/avatars/baduizm1974-1346279934.jpg" \>
</div>
<div style="border-radius:6px;width:179px;border-top:0px;position:relative;background-color:white;">
<div style="text-align:left;padding-left:6px;padding-right:5px;padding-top:3px;">Fragments by textile artist Lorenzo Nanni (2001) </div>
</div>
</div>
DEMO
You have to put it inside a container, then make the image a block to avoid the space under it. Note that using properties right & bottom are a better solution than left and top.
http://jsfiddle.net/Ka4r4/