When I add small icons to input as a background with style no-repeat right center they look great.
But If I try to do the same to select tag instead of input tag then I have a problem I cannot see icon probably because right side of select is covered with select triangle(drop down button). Is there any way to 'margin right' that background image ? using css or jquery or smth
You should be able to use px or % values to position the bg image more accurately, e.g.:
no-repeat 95% center
Also, you may need to increase the padding-right on the select
Related
In a page I have to show a list of items with icons. These icons vary in size as you can see in the picture (first one is larger for example. To have the same icon size everywhere in css I put the width to 32px. However for the smaller icons (for instance the temperature one in the light blue background) space is added to the left and right of the icon. I wish that the space is added only to the right, so the icon aligns left. This space is not padding (otherwise it would be shown in green).
Is there anyway to tell the icons that when they enlarge space is added only to the right ?
Not sure but you can try making them all text-align: left and width : 100% and add padding and margin equals zero just in case, also check if the icon in put inside a div maybe or something.
I have created a segment from a circle but when I try to apply a background image to it, it applies it to the whole circle resulting in the image getting centered somewhere below what the user can't see.
Right now, only the portion of the circle that overlaps with the rectangle gets displayed thanks to overflow: hidden, I have just disabled the hidden for now to show how the image is actually getting rendered.
Can someone please tell me how I can apply a background image only to the portion of the circle that's visible?
This is the result I want:
Demo: https://codesandbox.io/s/segment-background-image-msu63
^ I achieved this by hardcoding the position of the image but I am looking for a CSS oriented approach because that'll be much more dynamic.
EDIT: so I was able to figure it out. The trick was to place another div on top of the semi-circle and add the image on that and set the overflow to hidden on the parent div. It works like a charm!
p.s the demo is updated with the solution.
The trick was to place another div on top of the semi-circle and add the image on that and set the overflow to hidden on the parent div. It works like a charm!
p.s the demo is updated with the solution.
You can adjust the background-position top top center:
background: url("./360.v1.png") top center no-repeat rgba(85, 112, 24, 0.76);
I would like to control a css sprite with javascript/jquery. Based on a user input the image should move position.
The case: I have an image container with 400x400, but the image I want to show is 400x1200, so I can only display 400 in height at the time, but the width would be constant.
I would to like to display parts of the image when a user clicks a button. I have drawn an example to show what I want: http://0o2471.net/55070
In that mockup you have the image container which is 400x400 marked with black frame, the green background is the "image" that I want to display based on the user input. So let's say the user press the "Button bottom" then the bottom part would change its position to the center(image container.)
Any suggestions on how I do this? Which functions in jquery/javascript should I use? Is css sprites the best way? I don't need the whole code, just a few directions.
Use background-position CSS rule. JQuery code for this
$(element).css({'background-position' : '0 -100px'})
I have an element that has margin-top and border. When I call $(element).show() it doesn't use the element's margin and the it doesn't look good (in original fiddle If you click on the div that is after the input text the slide animate starts from top of the text input and you see a black line passing it and it's not beautiful! I want the animate start form the bottom of the text input.)
This is my beta in jsFiddle. but The orginal is diffrent (I remove an element because the wanted element cannot be found!)
Can anybody help me?
I don't understand in 100% what you want to achieve, but your div #AdvancedPanel have margin-top 35px from div #urlpanel. If you give some height to div #AdvancedPanel then it looks good. Will you precise what you really want ?
Looking at this layout, I want to use jQuery/Javascript to put the Red Box, in the Gray Container under the left small Blue Box whether zooming in or out with any browser.
I am trying to accomplish this by NOT putting the redbox #badplacement div inside the Gray Container's #outerwrapper div. Any idea how this can be accomplished?
(To start, I change the #badplacement css left to 243px, on normal browser zoom level, where it is under the small blue box.)
Fiddle: http://jsfiddle.net/Q56up/
Clone the outerwrapper div with css rules but without background and place it over the original (position:absolute, z-index:1). Put Red Box inside and position it relative.