i wanna know why my button clickable area is bugged, i can only click a small area, and it works terrible.
<button class="btn btn-primary btn-dark boton-carrito" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight"><img src="../multimedia/shopping-cart.png" alt="" class="foto_carrito"></button>
.boton-carrito {
width: 50px;
height: 50px;
margin-left: 15px;
display: block;
}
.foto_carrito {
width: 36px;
height: 36px;
margin-left: -8px;
}
Im using bootstrap too.
Perhaps if you make the area of your button bigger using padding (options: p-1, p-2, p-3, p-4, p-5) instead of using "boton-carrito"?
class="p-2"
if you're using React JS:
className="p-2"
Good luck!
try to using min-height and min-width
it will change the minimum size of your button component.
.boton-carrito {
display: block;
min-width: 50px;
min-height: 50px;
margin-left: 15px;
}
.foto_carrito {
min-width: 36px;
min-height: 36px;
margin-left: -8px;
}
<button
class="btn btn-primary btn-dark boton-carrito"
type="button"
data-bs-toggle="offcanvas"
data-bs-target="#offcanvasRight"
aria-controls="offcanvasRight">
<img
src="../multimedia/shopping-cart.png"
alt=""
class="foto_carrito" />
</button>
Here was the docs link for min-width and min-height for more information.
Thank you
Related
I have a lack of understanding how the css settings of a parent restrict its children.
Simple example:
I have a container with three buttons.
play button
fast forward button
fast backwards button
My goal is the following:
create a grid 1x3 (row x column)
aling buttons inside of the grid
With this I went to work and ended up here:
.adaptations {
margin-bottom: 20px;
}
.video-button-container {
height: 100px;
width: auto;
display: grid;
grid-template-columns: 33% 33% 33%;
}
.video-button {
height: 100%;
}
.video-button img {
height: 70%;
}
<div class="adaptations video-button-container">
<button type="button" class="video-button">
<img src="https://e7.pngegg.com/pngimages/552/785/png-clipart-smile-mouth-love-white.png">
</button>
<button type="button" class="video-button middle-button">
<img src="https://e7.pngegg.com/pngimages/552/785/png-clipart-smile-mouth-love-white.png">
</button>
<button type="button" class="video-button">
<img src="https://e7.pngegg.com/pngimages/552/785/png-clipart-smile-mouth-love-white.png">
</button>
</div>
Here's my problem: I managed to implement the said goal with fixed sizes (width, height). However, it is not desireable since screen sizes differ, hence, make it responsive and here lies my problem.
What I learned is that if I set my parent-div to height: 100px; the child elements will adjust themselves inside that div. Therefore I said height: 100%. Which sounds like (as far as I understand this): "You can use all the height that is available to you, therefore max. 100px)
Can you enlighten me on what I am missing?
I hope this is what you are trying to achieve.
.adaptations {
margin-bottom: 20px;
}
.video-button-container {
height: 100px;
width: auto;
display: grid;
grid-template-columns: 33% 33% 33%;
}
.video-button {
height: inherit; /* Use 'inherit' here instead of '100%' */
}
.video-button img {
height: 70%;
}
<div class="adaptations video-button-container">
<button type="button" class="video-button">
<img src="https://e7.pngegg.com/pngimages/552/785/png-clipart-smile-mouth-love-white.png">
</button>
<button type="button" class="video-button middle-button">
<img src="https://e7.pngegg.com/pngimages/552/785/png-clipart-smile-mouth-love-white.png">
</button>
<button type="button" class="video-button">
<img src="https://e7.pngegg.com/pngimages/552/785/png-clipart-smile-mouth-love-white.png">
</button>
</div>
Hello guys i have trouble with my code. I have a bootstrap button and thats is fine but how can i put space between the button and end of the page. because its only on iphone the problem. Its very weird because when im holding in normal its good the button but when i turn my iphone there is no space anymore.
This is my button:
<div class="row">
<div class="text-center">
<button type="button" class="learn btn btn-info">Learn more</button>
</div>
</div>
As Ashiqur suggested, add some margin to the bottom of the button
.learn {
margin-bottom: 1rem;
}
Maybe put CSS like this to your button :
button.learn {
margin-bottom: 10px;
// Or :
padding-bottom: 10px;
}
maybe you should add this :
html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
So I am trying to make this admin page responsive and there are some problems when I resize the page. I want the div with the Inventory to be aligned with the 3 buttons.
This is my container which needs to properly adapt when resizing the viewport.
.reports{
border: 1px solid red;
overflow-y: scroll;
/*overflow-x: hidden; */
height: 100%;
}
.row{
height: 4.5em;
width: 100%;
margin-left: 0;
}
.actions{
float: right;
width: 30%;
}
.entry-group{
border: 1px solid red;
float: left;
width: 70%;
}
.title{
border: 1px solid red;
float: right;
width: 72.5%;
height: 3.7em;
word-wrap: break-word;
margin-left: 2em;
}
<div class="reports">
<div class="list-group-item row">
<div class="entry-group">
<button class="btn btn-primary date" >2016-09-19</button>
<div class="title">
<h4 class="list-group-item-heading">2080136 - Inventory</h4>
<p class="list-group-item-text">2 Napier Court West Southend On Sea SS1 1JU</p>
</div>
</div>
<div class="actions">
<button class="btn btn-primary download">Download</button>
<button class="btn btn-primary edit">Edit</button>
</div>
</div>
</div>
I think there is a few issues with the code here. Firstly, I believe it odd to have DIVs between your 'tr' and td', and not having a 'table' element.
I think you are trying to mix different ways of doing things: bootstrap and HTML tables.
My suggestion is use something like layoutit.com to build a layout with divs only in bootstrap. You can easily still integrate it into your back end technology, and get the divs responsive by editing the class names, e.g. col-sm-1.
I understand that you want to use tables for reports, having said that, it should be carried through completely, without divs inbetween.
Add this:
.list-group-item-heading {
margin-top: 0;
}
https://jsfiddle.net/kefhvc7y/
Add:
.title h4 {
margin-top: 0px;
}
.date {
float: left;
}
and remove margin-left: 2em; from .title.
Here is an updated version of your fiddle: https://jsfiddle.net/r11p5n4d/
At the moment I have no control of my buttons, I want my buttons to be stacked horizontally with 30% width of #user-buttons. I read on the forum that the solution is to put Display: inside-block. But it didn't work. Any suggestion on how I should continue?
#user-buttons {
width: 100%;
border: 1px solid;
text-align: center;
background-color: red;
}
.button {
font-size: 10px;
font-weight: bold;
width: 30%;
}
<div id="user-buttons" class="controls">
<input type="button" class="button" value="Hi">
<input type="button" class="button" value="Bye">
<input type="button" class="button" value="Maybe">
</div>
The container buttons need to be of a fluid width width:100% so it dosent overflow the containers width.
Code:
div.controls input
{
width: 100%;
}
Here is the fixed Example.
I am trying to put a spinner to the left of the boostrap3's modal dialog box's footer, but it hovers on top of one of the buttons, What am I doing wrong here?
<div class="modal-footer">
<!-- Spinner -->
<span style="text-align: left" id="wait-spinner"></span>
<!-- Cancel and Save changes button -->
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button class="btn btn-primary" onclick="SaveEditChanges()">Save changes</button>
</div>
and here is the wait-spinner css:
#wait-spinner {
display: none;
position: absolute;
width: 35px;
height: 35px;
text-indent: -9999em;
}
from your code its clear #wait-spinner is following position absolute in the div which have button
use <span style="text-align: left" id="wait-spinner"></span>
just inside the box or pop up where you want it with
#wait-spinner {
display: none;
position: absolute;
width: 35px;
height: 35px;
top;50%;
left:50%:
text-indent: -9999em;
}