I can't center the text inside the button, tried margin - 0, padding -0
html code -
.del{
height: 30px;
width: 30px;
text-align: center;
font-size: large;
border: none;
color: #eee;
background-color: rgb(187, 141, 81);
border-radius: 30px;
}
<button class="del btn btn-sm" type="submit">x</button>
Related
I currently have 2 submit buttons that cannot be place side by side.
.submit-button {
color: #fff;
background: #55a1ff;
border: 0;
outline: 0;
width: calc(15%);
height: 50px;
font-size: 16px;
text-align: center;
cursor: pointer;
margin-top: 70px;
margin-left:100px;
border-radius: 30px;
}
.cancel-button {
color: #fff;
background: #55a1ff;
border: 0;
outline: 0;
width: calc(15%);
height: 50px;
font-size: 16px;
text-align: center;
cursor: pointer;
margin-left:450px;
border-radius: 30px;
}
<div class="arrange3">
<button type="submit" class="submit-button" name="save", value="save">Submit</button>
</div>
<div class="arrange3">
<button type="cancel" class="cancel-button" name="cancel", value="save">Cancel Claim</button>
</div>
How am i suppose to place the buttons side by side. It would be great if u can provide the code to me. Thanks
Make arrange3 class display inline.
.arrange3{
display: inline;
}
is there any way to prevent the button resizing by the number of text characters inside the button?
I have 2 buttons with the same CSS class but the size of one of them is different because of the number of characters inside it
<button class="my-btn" type="submit">Send</button>
<button class="my-btn" type="button">Subscribe</button>
CSS:
.my-btn {
padding: 10px 40px;
text-align: center;
border-radius: 30px;
border: 5px solid #6f97fd;
font-size: 0.8rem;
font-weight: bold;
color: white;
display: inline-block;
background: linear-gradient(90deg, #76b3fe , #8680e4 );
}
You just need to give it a width. Below I've given it 200px, you can change this to your preference.
Additionally, apply min-width or max-width if you want to ensure it doesn't go below or above a certain width.
.my-btn {
padding: 10px 40px;
text-align: center;
border-radius: 30px;
border: 5px solid #6f97fd;
/*change width to your preference*/
width: 200px;
font-size: 0.8rem;
font-weight: bold;
color: white;
display: inline-block;
background: linear-gradient(90deg, #76b3fe , #8680e4 );
}
<button class="my-btn" type="submit">Send</button>
<button class="my-btn" type="button">Subscribe</button>
You could use max-width in .my-btn class
I think fix width is your solution
.my-btn {
padding: 10px 40px;
text-align: center;
border-radius: 30px;
border: 5px solid #6f97fd;
font-size: 0.8rem;
font-weight: bold;
color: white;
display: inline-block;
background: linear-gradient(90deg, #76b3fe , #8680e4 );
width: 150px;
}
<button class="my-btn" type="submit">Send</button>
<button class="my-btn" type="button">Subscribe</button>
Does anyone know why the tooltip is not at the center(center-top) of the item?
here is the picture... as you can see its a little bit more on the right of the top center
item
and the same is on the other items.. here it will be easier to see
item 2
here is my html code:
<button class="btn btn-icon coverage-item "
type="button"
placement="top"
ngbTooltip="Incendio">
<img src="/assets/img/coverages/icon_thunderbolt.svg"/>
</button>
and this is the scss code:
#import "~bootstrap/scss/_functions.scss";
#import "../../scss/variables";
.coverage-item {
background: $white;
border: 1.5px solid $brand-primary;
color: $gray-light;
height: 3.5rem;
width: 3.5rem;
position: relative;
font-size: 1.5rem;
padding: 0rem 0rem;
}
.coverage-item__new {
background: $white;
border: 1.5px dashed $gray-lighter;
color: $gray-light;
height: 3.5rem;
width: 3.5rem;
position: relative;
font-size: 1.5rem;
padding: 0rem 0rem;
I just added this code to my scss file and it's working.
app-coverage-item {
.tooltip {
margin-left: -2px;
}
}
I'm using this hover effect for buttons, but in a few cases when the height changes, the top remains the same and the bottom moves up, instead of vice versa like it should. How can I make sure it always goes in the correct direction?
jsfiddle
.button {
box-sizing: border-box;
display: inline-block;
width: 215px;
height: 55px;
color: white;
font-family: $arial;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
text-align: center;
text-decoration: none;
text-shadow: 1px 1px 1px rgba(43, 36, 36, 0.35);
letter-spacing: .1em;
border-radius: 3px;
position: relative;
background: #009ee0;
border: 1px solid #148fc6;
border-bottom: 4px solid #148fc6;
}
.button:hover {
border-bottom: 1px;
height: 53px;
}
.button span {
position: absolute;
width: 90%;
left: 0;
right: 0;
margin: auto;
top: 50%;
transform: translateY(-43%);
line-height: 1.2;
}
div {
padding: 20px 5px;
}
<div>
<a href="#" class="button">
<span>Wrong way</span>
</a>
</div>
<div>
<a href="#" class="button">
<span>I work fine</span>
</a>
<a href="#" class="button">
<span>I work fine</span>
</a>
</div>
You're reducing the height from 55px to 53px. That 2px has to go somewhere. The top button is just collapsing it. (The bottom two are doing the same, it just doesn't look like it because they are being affected by vertical text alignment). change your hover rule to this to accommodate for the height loss.
.button:hover {
border-bottom: 1px;
margin-top: 2px;
height: 53px;
}
https://jsfiddle.net/exd6hhvz/
I was able to make it work consistently by adding margin-top: 2px; to .button:hover
Here's an example: https://jsfiddle.net/vf03czp5/
So I've spent some time trying to figure this one out, but I've ended up turning to StackOverflow for help. I'm trying to get my search bar and go button to display on one line and am having trouble doing this.
The html code for the inputs is:
<nav class="sidebar">
<input type="text" id="search" placeholder="search">
<input type="button" name="button" value="Go" class="goButton">
</nav>
And the CSS for the two inputs is as follows:
#content .sidebar #search {
width: calc( 100% - 45px );
border-radius: 0px;
height: 42px;
text-align: center;
color: #333333;
font-size: 14px;
margin-bottom: 21px;
}
/* Go button for search*/
#content .sidebar .goButton {
position: relative;
top: -48px;
width: 45px;
background-color: #BA2022;
color: #F3EBDE;
border-style: none;
text-transform: uppercase;
margin-top: 8px;
border-radius: 0px;
height: 42px;
text-align: center;
font-size: 14px;
margin-bottom: 21px;
}
Can anyone suggest a fix for this? Currently, the inputs display as follows:
Thanks in advance.
It gets aligned when the text box is a little smaller and the margin-top of the button is removed:
#content .sidebar #search {
width: calc( 100% - 60px );
border-radius: 0px;
height: 42px;
text-align: center;
color: #333333;
font-size: 14px;
margin-bottom: 21px;
}
/* Go button for search*/
#content .sidebar .goButton {
position: relative;
width: 45px;
background-color: #BA2022;
color: #F3EBDE;
border-style: none;
text-transform: uppercase;
margin-top: 8px;
border-radius: 0px;
height: 42px;
text-align: center;
font-size: 14px;
margin-bottom: 21px;
}
FIDDLE: http://jsfiddle.net/s0y93L87/
try put this:
#content .sidebar #search {
border-radius: 0px;
height: 42px;
text-align: center;
color: #333333;
font-size: 14px;
margin-bottom: 21px;
float: left;
width: 200px;
}
/* Go button for search*/
#content .sidebar .goButton {
position: relative;
top: -48px;
width: 45px;
background-color: #BA2022;
color: #F3EBDE;
border-style: none;
text-transform: uppercase;
border-radius: 0px;
height: 48px;
text-align: center;
font-size: 14px;
margin-bottom: 21px;
float: left;
}
There are a few reason why applyingwidth: calc( 100% - 45px ); to the text input isn't leaving enough room for the 45px-width button:
The browser is adding padding to the text input (+2 pixels for left and right padding) (at least in Chrome)
The browser is adding a border to the text input (+2 pixels for left and right borders) (at least in Chrome)
Because the text input and button are not on the same line, there is a single whitespace character separating them, adding more width.
Define explicit padding and border for the text input so browsers can't reset it, and adjust the 45px to 47px accordingly (to account for left and right 1px borders):
#content .sidebar #search {
border:1px solid #aaa;
padding:0;
width: calc( 100% - 47px );
}
And remove the whitespace between the two inputs by putting them on the same line in the HTML:
<input type="text" id="search" placeholder="search"><input type="button" name="button" value="Go" class="goButton">
I also removed the top: -48px from your .goButton CSS.
Using a CSS reset can help eliminate this kind of problem of browsers adding unexpected styles.
Result: http://jsfiddle.net/k305a0jo/1/
Have you tried put it inside a table? something like this:
<nav class="sidebar">
<table>
<tr>
<td class='search'>
<input type="text" id="search" placeholder="search">
</td>
<td class='go'>
<input type="button" name="button" value="Go" class="goButton">
</td>
</tr>
</table>
</nav>
.sidebar #search {
width: calc(100%-45px);
border-radius: 0px;
height: 42px;
text-align: center;
color: #333333;
font-size: 14px;
}
/* Go button for search*/
.sidebar .goButton {
top:-48px;
background-color: #BA2022;
width:45px;
color: #F3EBDE;
border-style: none;
text-transform: uppercase;
border-radius: 0px;
height: 42px;
text-align: center;
font-size: 14px;
}
td.search {
}
td.go {
}
tr {
width: calc(100%);
margin-bottom: 21px;
}
Here is a jsfiddle:
http://jsfiddle.net/yzmkxfa7/4/