I am using dijit.form.dropDownbutton in my application. However, I want to remove the down arrow icon in the drop down button. Is there a way to do so?
First, don't do it. It's there because of the various usability conventions - something users come to expect. It points them to a familiar functionality, where a down arrow icon indicates a dropdown box.
Secondly, if you choose to ignore the first advice you can go ahead and do it. The button is controlled by (in case of claro theme):
.claro .dijitArrowButtonInner {
width: 15px;
height: 15px;
margin: 0 auto;
background-image: url(form/images/buttonArrows.png);
background-repeat: no-repeat;
background-position: -51px 53%;
}
overriding it and adding: display: none; removes the arrow and re-sizes the button. You can override it by, for example, assigning an additional class yourclass to the div and building a paraller CSS hierarchy:
.claro .yourclass .dijitArrowButtonInner {
display: none !important;
}
so that in your <head> part you have:
<style>
.claro .yourclass .dijitArrowButtonInner {
display: none !important;
}
</style>
and then:
<body class=" claro ">
...
<div id="dropdownButtonContainer" class="yourclass"></div>
...
If there is a programmatic way that is simpler than that - I am not aware of it.
EDIT
also, as a friendly advice, you should really try and accept answers for your questions, otherwise at some point no one will answer you.
Related
I am trying to define an Angular component that displays an info area. This disappears when the condition is met. partially this works, but the border always remains, the rest of the style elements are hidden when the condition is met.
info-component-html:
<div *ngIf="visible" >
<div class="s-help-content "><span [translate]="text"></span></div>
</div>
CSS:
.s-help{
background-repeat: no-repeat;
background-position: center left calc(0.37em + 0.37rem);
background-size: calc(1em + 1rem) calc(1em + 1rem);
border: 2px solid $warning !important;
border-radius: 4px;
display: block !important;
color: $gray-700;
min-width: 220px;
white-space: normal !important;
padding-left: 5px !important;
padding-right: 5px !important;
}
.s-help-content {
padding-top: 6px;
padding-bottom: 6px;
padding-left: 45px;
padding-right: 6px;
}
component used in code
<s-help [visible]="true" [ngClass]="'s-help'" [text]="'INFOTEXT.101' | translate"></s-help>
When the condition is met, the components are hidden but I still see the defined border which comes from the CSS directive. When I hide the border in the browser inspector, the components border disappears but I don't understand why the border is not hidden.
If I set my code so that the style statement is in the component.html and not inside the code with the component, I don't have the following problem. However, I need to use these components in other code places where I need to define other border colors, so the following solution does work, BUT i can´t use it because i need to define other css classes, and it cant be static the s-help css class:
info-component.html:
<div *ngIf="visible" class="s-help" >
<div class="s-help-content "><span [translate]="text"></span></div>
</div>
component used in code
<s-help [visible]="true" [text]="'INFOTEXT.101' | translate"></s-help>
The following solution works for me. Here the border is also hidden. however, the class statement must be made when the component is defined in the code!
Any suggestions?
this border shouldnt be here
I am not an Angular developer, but my first approach would be to add a CSS class that has a display: none property to try to solve it.
It's little bit unclear for me, but ngClass and ngStyle always override other styles. if you want to hide the border check the border's css from devtools and apply class based on appropriate condition to hide it with display: none property
So I'm trying to get two individual divs which are close in proximity to share one background image but I'm not sure if this is possible. I've uploaded two pictures, the second being designed for a smaller screen (just to further explain what I mean) http://imgur.com/a/2dypd . I can't imagine two separate background images would work as they wouldn't line up when resizing the window.
The only solution I can think of is creating two plain white divs to overlay on one single div but that seems like a dodgy way to go about it. I'm not expecting a hunk of code to be written for me, maybe just explain if it's possible and a reference so I can learn. Cheers.
Based on #cale_b's comment, you can set the same background to both div's and then use the background-position property to do the delusion of background sharing.
Then you can use media queries to make it look good in mobile too.
Here you've got a simple example that looks like the one you posted:
#wrapper {
width: 800px;
font-family: sans-serif;
}
#top {
height: 200px;
margin-bottom: 20px;
background-image: url("https://placekitten.com/800/400");
background-position: 0 0;
line-height: 150px;
color: #FFF;
font-size: 32px;
text-indent: 50px;
}
#bottom {
width: 500px;
height: 100px;
background-image: url("https://placekitten.com/800/400");
background-position: 0 -220px;
}
#bottom ul {
list-style: none;
}
#bottom ul li {
display: inline-block;
list-style: none;
padding: 0 10px;
line-height: 50px;
color: #000;
font-size: 24px;
}
<div id="wrapper">
<div id="top">
I'm a banner
</div>
<div id="bottom">
<ul>
<li>I'm</li>
<li>a</li>
<li>menu</li>
</ul>
</div>
</div>
As I understand, you want to use only one image copy of one image over two div and you dont want to use any overlay.
So you can do the following:
On the bottom div, use background-position-y:-100px or any other desired value. This way you push the image upwards.
This looks promising so far, but you will face an issue with the size of the background size specially if you are making a responsive web page.
I would say that background-size:100% 100%for both div would do the job yet it will make the image stretching (unless you go really responsive).
I still recommend using an overlay or even a ready made image. But if you insist on using two div then the above steps should be enough while you have to make your design suitable for this image.
N.B. keep in mind that you might need to use background-repeat:no-repeat
I Had read somewhere on a webtutorial that we can use only a single Image for hover effects in css. For Eg. I Need to input only this image in CSS
So, When the Facebook Icon is not hover we see the dull grey icon, but when someone hovers over the icon, the blue icon is displayed and I need to use only one image file in the CSS for this purpose.
How Can we do that. Also, I would like to know what are these kind of images know as ?
They are called sprites
They allow you to use one image for multiple elements, that can look entirely different
Official Documentation
I made a quick example to do what you required here
<div></div>
div {
background: url('http://i45.tinypic.com/2jee9zo.png');
background-position: -10px -15px;
height: 70px;
width: 70px;
}
div:hover {
background-position: -10px 83px;
}
You can use a CSS sprite. This is a useful tool: http://es.spritegen.website-performance.org/
Further reading: http://www.w3schools.com/css/css_image_sprites.asp
edit: Its called a spirte (sorry added this, cause i forgot to awnser your first question how this was named)
You can do this by positioning your background image as in example from my work down below
This is CSS, btw
input#searchSubmit { height: 34px; width: 36px; background: url('../images/searchSubmit.png') no-repeat; margin: 8px 8px 0 4px; cursor: pointer; border: none; }
input#searchSubmit:hover { background-position: 0px -34px; }
As you see, as I hover over the searchSubmit , it will change the background position of the image, pasted on the button, showing instead of the black with red search icon, the red with white search icon.
site is here, so you can see it in action, all my action buttons are made this way btw.
click here for seeing this in action
I'm trying to get various locations to appear on a image with mouseovers. So basically I have an image and when you hover over a link nearby a hoverbox appears at the location specified in CSS on the image. However I'm trying to get it to happen with multiple links without creating code for each CSS box.
I have something like 50 links and and when I hover over one I want to be able to pull from a db or text file to grab the location where it should create a hover on the image. My original thought was using PHP to help pull in the information from a file, put it into an array and then having the CSS update on the fly. This seems doable if the user just clicks the link as then I can tell CSS what place in the array to look for the location. I am unsure how I could get this to work with mouseovers if at all possible.
The CSS code is very basic at the moment as shown below.
#box {
position: absolute;
top: 100px;
left: 200px;
background-color: #ffffff;}
Let me know if anything doesn't make sense or if I'm just forgetting something.
Thank you!
Ok, so what you're trying to do is called a CSS sprite. Here's what you want (my example is orthogonal to your code, but teaches the principle):
.link {
width: 50px;
heigh: 50px;
float: left;
text-indent: -9000px;
background-color: transparent;
background-image: url(path/to/sprite.png);
background-repeat: no-repeat;
}
.link#one {
background-position: 0px 0px; /* This one is top left on the image. */
}
.link#two {
background-position: 0px 50px; /* This one is 50px from top and 0px from left on the image. */
}
You can see where to go from here (and you don't need to use .link#one. I just used it for example purposes. You could just use #one, or even a class .one.
Practice with this and you'll get how it works soon enough. Here's some sample HTML:
<a id="one" class="link">One</a>
<a id="two" class="link">Two</a>
Just through all that together, and make your image a 100px tall by 50px wide .png file with 50px x 50px for each link.
I wrote some CSS in my HTML code to create rollover buttons. Then i tried to run it with IE 7 and surprise! it doesn't run. In fact it shows both the button and underlying rollover. How can i get around IE's inability to cache background images? Preferably using CSS but javascript 'will' be tried.
Sample CSS:
#Menu
{
width: 100%;
height: 32px;
margin-top: 93px;
padding-left: 13px;
}
#Menu a
{
height: 32px;
line-height: 32px;
width: 123px;
background: url("img/menu.png") top left no-repeat;
background-position: -123px 0;
float: left;
margin-left: 3px;
text-decoration: none;
color: #1e1e1d;
font-size: 12px;
text-align: center;
}
#Top #Menu a:hover, #Top #Menu a.active
{
background-position: 0px 0;
text-decoration: underline;
}
Well firstly you are giving conflicting instructions ...
background: url("img/menu.png") top left no-repeat;
background-position: -123px 0;
... the background is already positioned using shorthand.
I assume that your regular and hover states both share the same image, so why not do both with shorthand? Remove...
background-position: -123px 0;
... and for your hover and active states, use ...
background-position: bottom left;
Then have both your states in one image, one below the other (which I assume is what you've been trying anyway).
Image rollover issue comes mainly because of downloading image every time on hovering a link or tab. This flicker is caused by the delay when the primary image is removed and the rollover image is loaded (even though they are technically the same image, Internet Explorer prefers to treat them separately).
check it out complete fix for rollover issue:
http://faqspoint.blogspot.com/2011/12/ie-rollover-problem.html
if you are using the :hover pseudo-selector, then it won't work in IE unless it is an anchor tag. Try changing the button into an anchor. You can still make it look like a button using css.
If you want to use javascript, then have a look at jQuery.
Try making sure your CSS background syntax is correct. Some browsers let you specify the properties in any order however IE will choke. You should specify the attachment in the form X Y (horizontal then vertical). You currently have top left. Make it left top. Also you have no-repeat at the end of the line, it should come just after the url declaration and before the position declaration.
The order for CSS background shorthand values should be:
background-color
background-image
background-repeat
background-position
background-attachment
eg. background: #fff url(example.jpg) no-repeat left top fixed;