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;
}
Related
This is my reference photo on what i would like to achieve. My intention is to have the buttons be the same height regardless of text length and have them be in on line (and stop them from forming this sort of three triangle look below (screenshot below is my existing jsfiddle.
first i tried to set them the same width but the shorter first button does not naturally fit since the other two need an extra space for the words:
.up-promos .top-area .tabs a {
width: 150px;
}
Because of this, I also tried adjusting the height for them to stay the same size however all of them do not align (first button with the least text looks awkward) and the first button somehow moves down. I also tried aligning the text to center and adjusting the margin but the height css probably prevents this change.
.up-promos .top-area .tabs a {
border: 1px solid #fff;
color: #fff;
padding: 10px;
border-radius: 8px;
display: inline-block;
text-align: center;
margin: 0 0 10px 10px;
text-decoration:none;
text-align: center;
width:150px;
height: 30px;
}
Here is the JSFiddle for all of this:
https://jsfiddle.net/b34rsLyu/
I will need some help on these adjustments. Tried what I thought was the solution, hope I can get a guide in the correct fix.
There a few things that can be done.
use flex for .tabs container.
dynamically calculate font size - using font-size: calc( ... )- to prevent overflow for button, or any other container.
if you want to achieve alignment like in in the first screenshot, set a min-width in r-button class and flex-wrap: wrap in .tabs class.
Try using these values, and then modify other classes as you see fit.
.tabs {
display: flex;
align-items: center;
justify-content: center;
background: #eee;
gap: 8px;
flex-wrap: wrap;
}
.r-button {
border: 1px solid black;
border-radius: 8px;
padding: 15px 0px;
word-wrap: break-word;
min-width: 10rem;
font-size: calc(1rem - 0.1vmin);
}
Check the docs for more on css Flex property
You could use display: flex on your container to have better control over how elements behave and flow in relation to each other, here's the simplest solution you can get:
.up-promos .tabs {
display: flex;
}
If you want to learn more about display: flex, because there's tons of things you can tweak on it, I seriously suggest this guide. It's my go-to place to remind myself about all the properties it has as I always fail to remember them.
I'm setting up the scoreboard display for my rock paper scissors game (Win:Draw:Lose), but if the results go up too high it is displayed over multiple rows. Where/How would I implement something to make the width longer? Ideally, having a function of some sort to make the border width longer when the text is about to go over to the next row would be best.
Having a big border width to counter this problem looks ugly and not very good maintainability.
Any help or suggestions would be highly appreciated, Thanks.
(please add your code while asking a question so that we can know what's wrong and help)
(here I'm guessing you used fixed width property to set the width of the scoreboard)
You should remove the width property from the scoreboard, use min-width instead. Also, add white-space: nowrap; to ensure the score will keep in 1 line.
So that if the needed width is less than a certain amount, the width will be min-width. But if it needs more space, as in your example, it will extend to fit it's content.
You can read more about min-width here.
I think this is what you are looking for: JSFIDDLE link
body {
background: #202020;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.container-score {
text-align: center;
background: #3b4675;
padding: 48px;
position: relative;
}
.score {
padding: 16px 48px;
border: 4px solid white;
font-size: 72px;
color: white;
white-space: nowrap;
}
.title {
background: red;
display: inline-block;
padding: 4px 16px;
color: white;
position: absolute;
top: 24px;
left: 50%;
white-space: nowrap;
transform: translateX(-50%);
}
<div class="container-score">
<div class="title">
<p>WIN : DRAW : LOSS </p>
</div>
<div class="score">
<p>10: 10: 10</p>
</div>
</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.
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.
tab-ver.tab {
background: url(../images/16by16.png) no-repeat center center;
text-indent: -10000em;
height: 16px;
width: 16px;
padding: 4px 1px;
margin-right: 1px;
margin-left: 50px;
}
<div id="tab-ver" class="tab">English</div>
The problem of above script is that the a link doesn't work at all. If the user clicks the 16by16.png image, the user is not redirected to yahoo.com.
However to fix this problem?
Thank you
// update001//
I have tried the following suggestion:
#tab-ver.tab {
text-indent: -10000em;
}
#tab-ver.tab a{
background: url(../images/16by16.png) no-repeat center center;
height: 16px;
width: 16px;
padding: 4px 1px;
margin-right: 1px;
margin-left: 50px;
display: block;
}
It works for my original problem. However, the displayed image now is offset to bottom of the horizontal menu. It is caused by 'display: block'. However, if I remove 'display:block', then the image will be invisible.
thank you
// update 1 //
Based on the suggestion, the following script works best for me
#tab-en-ver.tab a {
background: url(../images//16by16.png) no-repeat center center;
height: 16px;
width: 16px;
padding: 4px 1px;
margin-right: 1px;
margin-left: 50px;
text-indent: -10000em;
}
However, this suggestion does have one problem. The text 'English' mixes with the image. I cannot figure out how to remove the text 'English' from a link.
by adding the following extra rule will cause the image disappear.
#tab-ver.tab {
text-indent: -10000em;
}
any idea?
Give that CSS to the <a> instead. Add a display: block so it'll display as a block-level element like the <div>. The <div> will expand to fit the <a>.
EDIT: try inline-block instead and see if it helps.
#tab-ver.tab a {
display: inline-block;
background: url(../images/16by16.png) no-repeat center center;
text-indent: -10000em;
height: 16px;
width: 16px;
padding: 4px 1px;
margin-right: 1px;
margin-left: 50px;
}
If you want the text ("English") to be hidden, than you have to use <img/> tag, with an alt attribute, something like:
<img src="english-flag.png" alt="English" />
You can also use some CSS hacks, but:
What for? It's so easy to do it with plain HTML!
Those are hacks, so they may work or not in different browsers.
One of such hacks can be to set a background to the <a/> element, to offset the text, to set the overflow to hidden, and to set fixed width:
a{
padding-left:16px;
overflow:hidden;
display:block;
width:16px;
height:16px;
url(../images/16by16.png) no-repeat left top;}
English
You can have the a tag fill up the div by using:
a {
display: block;
height: 16px;
}
You can then also remove the height from the div as it will grow automatically.