What seemed like an easy task has become hours of puzzling by now.
I have a dropdownlist (#html.dropdownlistfor(model)), which I style via css ( new { #class = "searchDropDownList" } )
The thing is, the standard dropdown list is too short (height-wise), but when I add height to make the box bigger, the selected item is not centered anymore. vertical-align: middle doesnt work on the selected item.
When I add padding to the top of the box, the text goes down as I want, but when you would then hover the textbox, you can see the Selection Arrow being croocked, since that ones also goes down.
See pictures:
Firefox:
Chrome:
Does anyone know how to lower only the text?
EDIT:
Current css:
.searchDropDownList {
display: inline;
width: 114px;
height: 26px;
float: left;
font-size: 14px;
margin: 4px auto auto 2px;
text-align: left;
vertical-align: middle;
padding-left: 2px;
padding-top: auto;
line-height: 10px;
}
Changing the padding-top: auto; to 3px results in the images posted above.
Related
I can't get rid of padding inside of a buttons. There probobably is something I am missing, but after several hours of googling and trying I am rising a white flag. Please help.
Buttons in question are placed in table cells as shown in the picture below. I am trying to get rid of a spacing shown in red color. Also pink arrows show that padding between rows is affected as well, although I am not quite sure if the reason stems from the same problem. When I enlarge button height, cells misalignment is still present (see second picture).
Buttons in table #1
Buttons in table #2
I have literally tried setting padding:0 and margin:0 everywhere with no success.
button {
padding: 0;
margin: 0;
}
.day-button {
width: 50px;
height: 44px;
border: none;
overflow: hidden;
padding: 0px;
margin: 0px;
}
.text-up {
font-weight: bold;
font-size: 14px;
background-color: aquamarine;
padding: 0px;
margin: 0px;
}
.text-down {
font-weight: bold;
font-size: 10px;
background-color: aquamarine;
padding: 0px;
margin: 0px;
}
<td>
<button class="day-button"><span class="text-up">10</span><br/><span class="text-down">NONE</span></button>
</td>
Solution:
The spacing you are referring to is caused by the fixed height you have set on your .day-button class.
If you removed it, the height will be set to auto depending on the content size.
For the spacing between the spans you can remove the <br> as #Sfili_81 said, and then change your button's display to:
button {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
I have a Kendo Grid displaying fees, and above that I have an AutoComplete to allow the ability to search based on user. The problem with this is that the AutoComplete is covering part of the grid. Here is what it looks like:
This is the css:
#searchPanel {
margin-bottom: 10px;
display: inline-block;
float: right;
}
#searchPanel .editor-field {
float: right;
margin: 0 0.5em 0 0;
padding-bottom: 15px;
}
#searchPanel .editor-label {
float: left;
padding-right: 7px;
}
I have tried using position and z-index to get rid of the white box but it still is showing up over the grid. It seems to be an issue with just the autocomplete box and not the label. The autocomplete box has class .editor-field and the label has class .editor-label, and they are both wrapped in the searchPanel div.
I would like to vertically center font awesome element in a box (div). I almost do it, however icons are not precisely centered. Only the second one looks ok. I have added the red axis of symmetry to illustrate the differences. What is the issue and how can I fix it?
.icon-wrap a:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em;
}
.icon-wrap a {
display: inline-block;
width: 110px;
height: 110px;
text-align: center;
overflow: hidden;
margin: 0px auto;
border: 6px solid black;
border-radius: 100%;
text-decoration: none;
}
...
Here's my code working in a fiddle
Actually, the plus-square-o icon seems to be built that way in Font Awesome. That's why 2 others are pretty well aligned and the first one is not.
If you hover on this icon in Font Awesome you can see it's not the same alignment as the one plus-square.
So, in this case you can either change the icon (to align each icon perfectly) or you can manipulate only on the first <div class="icon-wrap">.
Something, like this:
.icon-wrap:first-child .icon-holder {
padding-top: 5px;
}
Here's an updated jsfiddle to that.
open the following URL in chrome
www.nextag.com/camera/stores-html
and refresh the page
Notice the location of the help icon next to ZIP code on top right corner..it is misaligned
Now open the same in firefox.. it is properly aligned..
CSS code for this is as follows:
background: none repeat scroll 0 0 white;
border: 1px solid #C2CCCC;
border-radius: 4px 4px 4px 4px;
color: #C2CCCC;
display: block;
float: right;
font-weight: bold;
height: 13px;
margin-left: 4px;
text-align: center;
width: 12px;
padding-right: 1px;
to make it work in firefox.. i added the following 3 ATTRIBUTES:
position: relative;
top: -15px;
left: 18px;
then it started working fine in chrome, but now it got misaligned in firefox.. what do i do??
You have a SPAN inside A. Simply disable the "float: right" property and add "display: inline"
.rb span.zip-info {
dispay: inline;
float: none;
}
Have you tried using the "position: absolute" attribute instead of "position: relative"?
Seems like Firefox has an invisible padding or margin that places the element at the top right of the text space. Chrome is placing the element at the top right of the fieldset element outside of the flow of text.
You can do one thing add a div wrapper and then absolutely position the element in the top right of the wrapper.
Hope this helps.
Add property float:left
.rb #zipTxt a {
color: #2283AB;
font-size: 12px;
font-weight: bold;
float: left;
}
I have this CSS code:
#tweet-container{
width: 290px;
height: 272px;
border: 1px solid #CCC;
color: #CCC;
font-size: 28px;
text-align: center;
letter-spacing: -2px;
min-height: 10px;
display: table-cell;
vertical-align: middle;
padding: 15px;
}
But firefox doesn't seem to recognize the top and bottom padding. Safari and Chrome both show it normally, and even in Firebug when I add padding-top: it doesn't work. Its like its not a valid statement or something. Is there something I'm missing?
Humm, this is a bit interesting. You've set the width as 272px, but its actually displayed as 270px. You've set the height as 290px, with the 30px total of padding, the real displayed height should be 320px, but its actually 318px.
Had a little play and taking out display: table-cell; seems to sort the issue. Although the padding isn't spread equally for some reaosn, it all appears at the bottom. Putting the text in a p tag, and giving that a 15px top margin has done the job though I think.
did you try adding padding:15px!important; ?