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;
}
Related
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
I have the following code where I have a (variable) number of buttons in a container, the buttons' position is adjusting correctly to the width of the container when resizing the screen, but what I want to achieve is at some breakpoint, the buttons should stop repositioning themselves and instead give the container an overflow-y scroll, and keep the buttons in their positions.
.container {
max-width: 800px;
background-color: beige;
}
.btn {
width: 80px;
}
.btn span{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
}
<div class="container">
<button class="btn"><span>test</span></button>
<button class="btn"><span>test123</span></button>
<button class="btn"><span>test450354053</span></button>
<button class="btn"><span>test23R02020202</span></button>
<button class="btn"><span>test33030494</span></button>
<button class="btn"><span>test403930390</span></button>
<button class="btn"><span>test</span></button>
<button class="btn"><span>test23423049</span></button>
<button class="btn"><span>testé</span></button>
<button class="btn"><span>test2340</span></button>
<button class="btn"><span>test234234</span></button>
<button class="btn"><span>test2342</span></button>
<button class="btn"><span>test2342020</span></button>
<button class="btn"><span>test2202349</span></button>
<button class="btn"><span>testé</span></button>
<button class="btn"><span>test234029</span></button>
<button class="btn"><span>test20203030</span></button>
<button class="btn"><span>test340</span></button>
<button class="btn"><span>test234240</span></button>
<button class="btn"><span>test2342340</span></button>
<button class="btn"><span>test23420420</span></button>
</div>
In this specific example a min-width with the given breakpoint (e.g. 400px) and overflow: auto set on the .container will work fine
.container {
max-width: 800px;
min-width: 400px;
overflow: auto;
background-color: beige;
}
.btn {
width: 80px;
}
.btn span{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
}
<div class="container">
<button class="btn"><span>test</span></button>
<button class="btn"><span>test123</span></button>
<button class="btn"><span>test450354053</span></button>
<button class="btn"><span>test23R02020202</span></button>
<button class="btn"><span>test33030494</span></button>
<button class="btn"><span>test403930390</span></button>
<button class="btn"><span>test</span></button>
<button class="btn"><span>test23423049</span></button>
<button class="btn"><span>testé</span></button>
<button class="btn"><span>test2340</span></button>
<button class="btn"><span>test234234</span></button>
<button class="btn"><span>test2342</span></button>
<button class="btn"><span>test2342020</span></button>
<button class="btn"><span>test2202349</span></button>
<button class="btn"><span>testé</span></button>
<button class="btn"><span>test234029</span></button>
<button class="btn"><span>test20203030</span></button>
<button class="btn"><span>test340</span></button>
<button class="btn"><span>test234240</span></button>
<button class="btn"><span>test2342340</span></button>
<button class="btn"><span>test23420420</span></button>
</div>
I've got an issue here where I have a vertically scrolling div fill of buttons and on iOS/Safari, the focus is very unpredictable. Sometimes when you touch/scroll in the div area, the page itself scrolls. Other times it behaves as it should and scrolls the contents of the div.
I cant have the page scrolling. Any ideas? I have tried everything I can think of and no luck yet.
Any help would be greatly appreciated. I am stumped!
Here is a link that demonstrates the problem so you can try it yourself on an iOS device: https://alcatraz.fawkesengineering.com/tavis/ics-fabriceditor/touch-scroll-ios-issue.html
Heres the code:
<!DOCTYPE html>
<style>
body, html {
margin: 0;
color: white;
height:1000%;
}
.bodyText {
position: relative;
left: 10px;
top: 10px;
font-family: "Arial", Verdana;
word-wrap: break-word;
overflow-wrap: normal;
}
.rightnav {
background-color: #333;
overflow: auto;
white-space: nowrap;
position: fixed;
top: 0;
right: 0;
width: 150px;
height: 100%;
vertical-align: middle;
padding-left: 50px;
-webkit-overflow-scrolling: touch;
}
.rightnav button {
display: block;
padding: 20px;
margin: 5px;
margin-bottom: 100px;
}
.container {
width:100%;
height:100%;
border:1px solid;
}
.left {
width:auto;
height:100%;
background:#444;
padding: 10px;
padding-right: 100px;;
}
.right {
overflow: auto;
height:100%;
width:250px;
background:#444;
float:right;
}
</style>
</head>
<body id='body' ontouchstart="">
<div id="mainmenu" class="rightnav" >
<button >
scroll me
</button>
<button >
scroll me
</button>
<button >
scroll me
</button>
<button >
scroll me
</button>
<button >
scroll me
</button>
<button >
scroll me
</button>
<button >
scroll me
</button>
<button >
scroll me
</button>
<button >
scroll me
</button>
<button >
scroll me
</button>
<button >
scroll me
</button>
<button >
scroll me
</button>
<button >
scroll me
</button>
<button >
scroll me
</button>
<button >
scroll me
</button>
<button >
scroll me
</button>
<button >
scroll me
</button>
<button >
scroll me
</button>
<button >
scroll me
</button>
<button >
scroll me
</button>
<button >
scroll me
</button>
</div>
<div class="container">
<div class="right"> </div>
<div class="left">
<span class = "bodyText" >Tap here and then try to scroll on the right . <br>
The focus is unpredictable. <br> Sometimes the contents in the div will scroll,
other times the page will scroll.</span>
</div>
</div>
</body>
Both are separate div, In DOM div with id mainmenu will come first then div with class container.
if you are clicking on somewhere div with id mainmenu or cursor/focus is there then it will scroll div with id mainmenu then div with class container as well.
if you are clicking on somewhere div with mainmenu or cursor/focus is there then it will scroll div with class container only.
Summary: It behaves as expected in safari 16.2
I have a problem with the buttons on my webpage.
This is what they look like when I enter fullscreen
When I click next, and go back to this same page it then turns into this
I tried no matter what I try they always end up not aligned when I click next and go back to this same page.
The style of the buttons
.button1{
bottom: -70px;
right:0px;
position: absolute;
}
.button2{
bottom: 28px;
left:8px;
position: absolute;
}
The buttons
</div>
<div class="button1">
<button type="submit" name="Next">Next</button>
</div>
</form>
<form action="Time.html">
<div class="button2">
<button type="submit" name="Next">Back</button>
</div>
</form>
Also you can see that they don't belong in the same form.
The form where Next button belongs
.form1 {
border: 8px solid #7B93F4;
left:0;
position: absolute;
top: 43%;
width: 98.9%;
text-align:center;
}
Any idea on how can I fix this and prevent this from happening?
You could change the layout a bit, floating the buttons:
.cont {
overflow: hidden;
}
.button1{
float: left;
}
.button2{
float: right;
}
<div class="cont">
<button class="button1">button1</button>
<button class="button2">button2</button>
</div>
Floating is more flexible then position absolute.
There is an error with your HTML code. Edit it so that it'll be clear.
The two buttons are contained in different form elements which are stacked on top of themselves because they are block elements. Put them in the same form element and use the style below.
You should avoid positioning absolutely when you can. I'll suggest you float the buttons instead.
Your HTML might look something like this
<form>
<div class="button1">
<button type="submit" name="Next">Next</button>
</div>
<div class="button2">
<button type="submit" name="Next">Back</button>
</div>
</form>
and your CSS like this
.form1 {
/* your other codes */
overflow: auto;
}
.button1{
float: left;
}
.button2{
float: right;
}
Hope it works.
I am tring to make a collapse button for my quote container but when I click it, on the first click, nothing happens but when I click again, the whole div disappears? I think I am following correctly the sample here? getbootstrap
Also in my fiddle my collapse button the minus(-) is not functioning. But in my google chrome browser it is ok? Is it also possible that when I collapse, when it's collapse I can change to another fontawesome icon? the minus becomes plus when collapse/hidden?
this is my code and js fiddle:
JSFIDDLE
HTML
<div class="quote-box" id="collapse-quote">
<div class="text">
asdasd
</div>
<div class="buttons">
<button class="button" id="twitter-button"><a title="Tweet this quote!" target="_blank"> tweet
<i class="fa fa-twitter"></i>
</a></button>
<button class="button" id="facebook-button"><a title="Share this quote!" target="_blank">share
<i class="fa fa-facebook"></i>
</a></button>
<button class="button" id="close-open" type="button" data-toggle="collapse" data-target="#collapse-quote" aria-expanded="false" aria-controls="collapse-quote">
<i class="fa fa-minus"></i>
</button>
</div>
</div>
scss
.quote-box {
text-align: center;
position: relative;
border-radius: 4.5px;
border: solid black 1px;
display: table;
width: 50%;
height: 500px;
padding: 10%;
margin: 10% auto auto auto;
/* center the box */
}
.quote-box .buttons {
top: 0;
/* align to top */
left: 0;
width: 100%;
position: absolute;
/* out of the document flow and you can move*/
height: 100%;
text-align: left;
padding: 1%;
box-sizing: border-box;
}
/* sample: uncomment if you want to align on right
#twitter-button{
float: right;
}
*/
#close-open {
/* float the collapse button to the right */
float: right;
}
.fa-minus {
color: #11A5D6;
/* color for the button */
}
What am I doing wrong? I been fixing for a button for hours.
It works for me. All I did was remove your jquery-2.2.3.min.js reference and changed your bootstrap.min.js to use https.
You have other issues too, check out this Fiddle.
css
.quote-box {
text-align: center;
position: relative;
border-radius: 4.5px;
border: solid black 1px;
width: 50%;
padding: 10%;
margin: 10% auto auto auto; /* center the box */
}
html, you were missing the collapse class on the div, and also if you collapse all the buttons how are you supposed to get back to them?
<div class="quote-box">
<div class="text collapse" id="collapse-quote">
asdasd
</div>
<div class="buttons">
<button class="button" id="twitter-button"><a title="Tweet this quote!" target="_blank"> tweet
<i class="fa fa-twitter"></i>
</a></button>
<button class="button" id="facebook-button"><a title="Share this quote!" target="_blank">share
<i class="fa fa-facebook"></i>
</a></button>
<button class="button" id="close-open" type="button" data-toggle="collapse" data-target="#collapse-quote" aria-expanded="false" aria-controls="collapse-quote">
<i class="fa fa-minus"></i>
</button>
</div>
</div>