Forums
View unanswered posts | View active topics It is currently Thu Apr 24, 2014 9:20 pm



Reply to topic  [ 6 posts ] 
 Applying shadow on DIV and it's getting bg-color too 
Author Message

Joined: Tue Apr 10, 2012 8:46 pm
Posts: 6
Post Applying shadow on DIV and it's getting bg-color too
Hi, everybody.

Here is the thing:
I have a DIV with a DROPDOWNLIST inside and my idea is when the dropdownlist is with focus, the DIV gets a shadow. When it looses focus, the DIV looses the shadow.
My code is working almost fine. I'm using javascript to change the class of the DIV and it's getting the shadow just like I want.
The problem is that it gets the shadow and a background-color. I have no idea why is this happening since I don't change the background-color on any moment.
* The bg-color is gray, which makes me belive the problem is in the shadow...

Here's the code:
HTML
Code:
<div id="cbo" class="form_cbodiv">
     <asp:DropDownList ID="cbo_ed" runat="server" onFocus="javascript:changeClassDiv(true);" onBlur="javascript:changeClassDiv(false);">
          <asp:ListItem Text="Field1" Value="1"></asp:ListItem>
          <asp:ListItem Text="Field2" Value="2" Selected="True"></asp:ListItem>
     </asp:DropDownList>
</div>


CSS
Code:
.form_cbodiv
{
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
   
   
    border: 3px solid #efefef;
    height: 27px;
    width: 151px;
    position: relative;
   
     behavior: url(PIE.htc);
}

.form_cbodiv_focus /*compra.aspx*/
{
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
   
    -webkit-box-shadow:  2px 2px 3px 1px #cacaca;
    -moz-box-shadow:  2px 2px 3px 1px #cacaca;
    box-shadow:  2px 2px 3px 1px #cacaca;   
   
    border: 3px solid #efefef;
    height: 27px;
    width: 151px;   
    position: relative;
   
     behavior: url(PIE.htc);
}


Javascript to change the class style
Code:
function changeClassDiv(foco) {
     if (foco) {
          document.getElementById('cbo').className = 'form_cbodiv_focus';
     } else {
          document.getElementById('cbo').className = 'form_cbodiv';
     }
}



Thanks for the support.


Wed Apr 11, 2012 11:22 am
Profile

Joined: Sat Aug 21, 2010 11:12 am
Posts: 223
Post Re: Applying shadow on DIV and it's getting bg-color too
Have you used browser dev tools to see exactly what is happening, is it inheriting the color from somewhere unexpected?

_________________
PIE needs more community support persons! Time is money, which means you can fund PIE development by answering support questions.


Thu Apr 12, 2012 3:58 am
Profile

Joined: Tue Apr 10, 2012 8:46 pm
Posts: 6
Post Re: Applying shadow on DIV and it's getting bg-color too
Tonttu wrote:
Have you used browser dev tools to see exactly what is happening, is it inheriting the color from somewhere unexpected?


In fact, there's no mention to the bg-color.
I attached a print screen of the css on the dev tools and another of the dropdownlist.

Thanks for your help!


Attachments:
ddl.png [3.17 KiB]
Not downloaded yet
css.png [14.96 KiB]
Not downloaded yet
Thu Apr 12, 2012 2:14 pm
Profile

Joined: Tue Apr 10, 2012 8:46 pm
Posts: 6
Post Re: Applying shadow on DIV and it's getting bg-color too
Something else I could do to help you help me?

Your support is the only one I have. Thank you, guys!


Sat Apr 14, 2012 11:39 am
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1430
Post Re: Applying shadow on DIV and it's getting bg-color too
You're most likely seeing https://github.com/lojjic/PIE/issues/12

Simply give your element the background color you wish it to have.


Sun Apr 15, 2012 4:59 pm
Profile

Joined: Tue Apr 10, 2012 8:46 pm
Posts: 6
Post Re: Applying shadow on DIV and it's getting bg-color too
Thank you, Jason!
That's exactly what was happening.

And thanks Tonttu too.


Sun Apr 15, 2012 10:18 pm
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 6 posts ] 

Who is online

Users browsing this forum: Bing [Bot] and 1 guest


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
cron
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.