Is it possible to vertically center the text on the autocomplete options I get?
As u can see the text it is on the top of the box and i apparently cannot move it vertically:
https://jsfiddle.net/tL2f6hoa/1/
.ui-menu .ui-menu-item a{
background:red;
height:3em;
}
Instead of setting a height for the object you can set a padding instead to get the same effect.
.ui-menu .ui-menu-item a{
background:red;
padding: 10px 3px;
}
Hope it Helps. Cheers!
Related
I'm trying to get an input to load a CSS sprite, and put the icon I want out of it, right at the END of the input. Here is what I have so far:
#test2 {
width: 140px;
outline:0;
background: url(http://www.chambresdhotes.org/new_design/sprites-all.png) -87px -97px no-repeat;
}
Here is some code I have that works fine, but it uses an individual image (this is what is currently live, but we want to convert it into a sprite for SEO);
#test1 {
width: 140px;
background-image:url(http://www.chambresdhotes.org//new_design/bookings/images/calendar1.png);
background-repeat:no-repeat;
background-position:95% center;
outline:0;
}
Here is a JSFiddle to see the 2 running alongside each other:
https://jsfiddle.net/vr5emuar/
Can anyone explain where I'm going wrong? I've even tried using :after on the input (but it seems that doesn't work, as you can't use :before or :after on inputs)
Thanks!
::after and ::before are pseudo-elements and an input can't have element inside it.
There are multiple solutions :
If you use css sprite, your sprite should be vertical and icons must be separated with some transparents pixel to avoid others icons to be visible in the input.
Use a span or i element around the input, it generate icon with pseudo-element (:after) and put it over the input with absolute positionning on :after and relative position on the span.
You can do it like below only change needed is your sprite should be vertical.
.input {border:none; float:left;padding:1px; outline: 0;}
.calander{
border:1px solid #efefef;
display:inline-block;
float:left;
background: url(http://www.chambresdhotes.org/new_design/sprites-all.png) no-repeat scroll 85px -94px #fff;
width:190px;
padding: 4px 4px 6px 0px
}
<div class="calander"><input type="text" class="input" /></div>
i have a problem using css.
.ventabotones div{
float:left;
margin-right: 3%;
}
.ventabotones{
overflow:hidden;
}
.ventabotones{
height:80px;
border: 1px solid;
border-radius: 10px;
}
How could center horizontally #ventabotones content?
use this code in css div you want to center on paginal
margin : 0 auto;
just add this to your css.
.ventabotones{
text-align:center;
}
and if it still doesn't come in center, possible reasons
your container doesn't have enough width to show the content in center
some global CSS Class is overriding the local CSS Class
that's all that can be said without a glimpse of your html markup
I am using the following CSS on anchor tags with specific classes. Works OK except that long link text is forced into new lines. I guess this has to do with the width...
a.interactive {
background:url(../images/icons/icon_interactive.png) left center no-repeat;
padding-left:30px;
height:25px;
width:25px;
display:inline-block;
text-decoration: none;
vertical-align:text-center;
}
try this
a.interactive {
background:url(../images/icons/icon_interactive.png) left center no-repeat;
height:100%;
width:100%;
display:inline-block;
text-decoration: none;
vertical-align:text-center;
}
you need to maximize the width for that use 100% width or maximum width your design allow you.
a.interactive {
/*...*/
white-space: nowrap;
}
I am styling a asp:DropDownList element with custom CSS. I have set the height and am trying to get the text to appear in the middle of the element, rather than at the bottom. Vertical-align:middle does not seem to work, and if I add padding-bottom to push it up from the bottom, in IE there is an ugly gap between the arrow on the right of the drop-down and the border. This is my CSS currently:
.dropdowndiv
{
font-size:10pt;
margin-bottom:2px;
height:26px;
width:220px;
border:1px solid #d5d5d5;
text-transform:uppercase;
vertical-align:middle;
}
Try this:
.dropdowndiv
{
font-size:10pt;
padding-bottom:4px;
height:26px;
width:220px;
border:1px solid #d5d5d5;
text-transform:uppercase;
vertical-align:middle;
}
I changed the margin-bottom setting of 2px to a padding-bottom of 4px.
UPDATE:
Looked fine on mine, but you can add padding to any side to get it the way you wish.
Failing that you may want to look at Tag mapping - Lee Dumond suggested this on his blog in response to a similar problem I was experiencing at the time:
http://leedumond.com/blog/fixing-asp-net-server-control-rendering-issues-with-tag-mapping/
Adding a line height of 26px should align your text to the middle.
I have set an image 32x32px as a list style image like this:
.class li{
list-style-image:url(../images/site/img.png);
}
It works great but the problem is the text is on the bottom of the list item (because the image is 32px high the list item is also 32px high). I would like to have the text vertically centered so it looks good.
I tried:
.class li{
line-height:1em;
}
But that didn't help.
You can use the vertical-align property to specify centered alignment. Like so:
.class li {
vertical-align: middle;
}
The list-style-image tag should be applied to the list itself, and not the list item as you have. So it would be..
ul.class{
list-style-image:url(../images/site/img.png);
}
I find it rather difficult to get the image exactly to where I want when relying only on list-style to do the work.
Therefore I prefer placing the image as background inside the LI tag like so
ul {list-style-type:none}
ul li {list-style-type:none;
background:url(image.png) 1px 4px no-repeat;
margin:0;
padding-left:20px}
This results in the image being placed 1 pixel to the right and 4 pixels to the bottom measured from the top left corner of the area covered by the LI tag. margin:0 is required to avoid indentation of the LI contents, as we do this with the padding:20px to make room for the image to the left of the LI contents.
I tried all of the above and nothing worked so I did this
.coreUL li{
display:block;
list-style:none;
background-image:url(../images/factoryIcons.png);
background-repeat:no-repeat;
background-position:left 8px;
padding-top:10px;
padding-left:50px;
height:100px;
}
Now that works like a charm -- infact this also gives me more control on the exact place where i wanted to put my li images . The images I used were 32 X 32 px in size so I gave them a little extra padding by making that 50px;
i hope this helps.
Setting your line-height to the height of the element will align text vertically. So if you <li> height is 32px then set your line-height to 32px.
.class li { height:32px; line-height:32px; list-style-image:url(img.png); }
#mindmyweb, yes indeed your solution works. But your example was a bit too decorated with 100px high lines, so here is a more modest example.
The image should be a 20x20 png bullet, centered, wıth bevel etc, with 3px shadow edge area.
.post li, .page li {
background-image: url("images/bullet-square-big-red.png");
background-position: left 2px;
background-repeat: no-repeat;
list-style: none outside none;
margin-bottom: 12px;
padding-left: 25px;
padding-top: 0;
}
Works exactly same in firefox 24, chrome 30, ie>=7.