remove GWT textbox shadow effect - gwt

when we create a textbox in GWT ,it always have a shadow effect(3D effect), borders are not sleek
i search for it but couldn't find a way to remove the default shadow effect from the textbox


on gwt designer, you can define the individual css styles for each widget your use. Just put in the style tag of your widget:
-webkit-box-shadow: 0px 0px 0px 0px;
-moz-box-shadow: 0px 0px 0px 0px;
box-shadow: 0px 0px 0px 0px;
This should work.


You should make a custom CSS class for this visual effect, rather than placing the same styles everywhere, so that it will be easier to apply and maintain.
input.noShadows {
-webkit-box-shadow: 0px 0px 0px 0px;
-moz-box-shadow: 0px 0px 0px 0px;
box-shadow: 0px 0px 0px 0px;
}
Then just apply the noShadows class to the elements where needed. Or, give .noShadows input and just put the class on the form parent container.

Related

how to make a horizontal swipe able card

I am working on an app using ionic and i want to reproduce something similar to this horizontal scrolling card but i am quite lost as is not my solution. I am wondering if someone has been able to do something similar should shed some light.

You can use ion-slide-box .
You can customize the border,width, etc. For example I make invisible for:
.slider-pager {
display:none !important;
}
And add border, fix the margin:
.slider-slide {
padding-top: 80px;
color: #000;
background-color: #fff;
text-align: center;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
width: 200px !important;
border: 1px solid #000;
margin: 62px 56px
padding-left: 20px;
padding-right: 20px;
}
Have a nice coding and make your own custom style!

Accordion is not expanding div

Browser: ie11 (My company requires this).
Once expanded, it overflows the div and the footer.
I need it to extend the div behind it so it always fits.
Currently, the div behind has these attributes:
height:600px;
width:650px;
background-color:white;
margin-left:200px;
margin-top:-520px;
position:absolute;
z-index:10;
border-radius:50px 10px 50px 10px;
border:solid;
border-width: 5 5px;
border-color: #fcf17a;
box-shadow:5px 5px 12px black;
font-size: 12px;
I am also using the Vallenato accordion as I'm not too good with JS myself.
Found here:
http://www.switchroyale.com/vallenato/
Image of accordion here
http://i.imgur.com/0mCCeX6.png
Thanks for your time.

CSS dashed drop shadow

Let's say I have a span with a dashed underline:
<span class="underline">Hello, I'm underlined text</span>
.underline {
color: #444;
font-size: 250%;
display:inline-block;
border-bottom: 1px dashed #444;
}
I need a bottom drop shadow for the underline. I assume box-shadow is not the case and the only possible solution is to do it by the means of pseudo elements.
I'm doing this way:
.underline:after {
content:"";
border-bottom: 1px dashed #ff0000;
display: block;
}
This displays the red dashed stroke above the underline but I need to do that below the underline.
How is that possible?
Thanks in advance.

Use position: relative; like this:
.underline:after {
content:"";
border-bottom: 1px dashed #ff0000;
display: block;
position: relative;
top: 2px;
}

I'm not sure why you don't want to use box-shadow (unless its a browser problem) But it would solve the problem.
box-shadow: 0px 10px #888888;
.underline {
color: #444;
font-size: 250%;
box-shadow: 0px 10px 10px #888888;
display:inline-block;
border-bottom: 1px dashed #444;
}
hope this helps

How to get custom button designed with background color and rectangle?

I am working with GWT. i have a requirement where i need to show the button as below.Please help me how to achieve this?
Thanks!

You can use GWT Button class and style it the way you need. For example, if you're using UiBinder:
<g:Button ui:field="button" styleName="my-button">
<ui:msg key="myButtonMsg">Button</ui:msg>
</g:Button>
with your own css class like
.my-button {
background: green;
border: 1px solid green;
color: white;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
padding: 5px 15px 5px 15px;
font-weight: bold;
}
If you need the text to have white box around it then add <span> around button text and add color: black; and background-color: white; properties for the span.

How to run multiple css selector classes at once?

I'm new to web design and I'm working on a small project, but I'm faced with a problem and I would appreciate any help.
So I have three div containers and I'm using them to show thumbnails of photos inside an album and I've given each one of them a CSS :hover selector and I want all three classes to run at once when the mouse is over any one of the divs. I tried to simulate a mouseover event but it didn't work and I tried to setattribute with javascript didn't work either. Here is my css.
#frame {
border: solid 2px black;
background-image:url(cpHDFLI6_mini.jpg);
background-repeat:no-repeat;
position:absolute;
top:87px;
right:183px;
left:auto;
display: block;
width: 60px;
height: 70px;
-o-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
transform: rotate(30deg);
}
#frame1 {
border: solid 2px black;
background-image:url(20397.jpg);
background-repeat:no-repeat;
position:absolute;
top:75px;
right:228px;
left:auto;
display: block;
width: 60px;
height: 70px;
z-index:1;
}
#frame2 {
border: solid 2px black;
background-image:url(candle.jpg);
background-repeat:no-repeat;
position:absolute;
top:87px;
right:273px;
left:auto;
display: block;
width: 60px;
height: 70px;
-o-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
transform: rotate(-30deg);
z-index:0;
}
#frame2:hover {
opacity: 1;
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom,
from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));
-webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
-moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
}
#frame1:hover {
opacity: 1;
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom,
from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));
-webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
-moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
}
#frame:hover {
opacity: 1;
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom,
from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));
-webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
-moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
}
If you don't understand what I want I can explain more.

NO Way to do it on CSS only. And Hover is not apply for DIV. Its for A, UL > LI...
You must know about Javascript or jQuery.
Mouse hover on 1 div then $.AddClass ( Active Class ) for ALL DIVS, and When Mouse Out of Div, $.RemoveClass for ALL DIVS.
If you don't know about jQuery or Javascript, you can ask here, we can help.
You can copy and paste it for DIv2 and Div3 about mouse move out and over too. If you understand on DOM, you can try $("div[name=3DIV]"). for shorter code , however I am not sure u understand the script or not, so I posted simple script but long code.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" /></script>
<script language="javascript">
$(document).ready(function() {
$("#divID1").mouseover(function() {
$("#divID1").addClass("ACTIVE_CLASS");
$("#divID2").addClass("ACTIVE_CLASS");
$("#divID3").addClass("ACTIVE_CLASS");
});
$("#divID1").mouseout()(function() {
$("#divID1").removeClass("ACTIVE_CLASS");
$("#divID2").removeClass("ACTIVE_CLASS");
$("#divID3").removeClass("ACTIVE_CLASS");
});
});
</script>