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>
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 a simple pop up modal in my page, I want this modal to stay when scrolling the page.
Here is my modal
<div class="modale" id="ouibounce-modal" style="display:none">
<button type="button" id="pop_up_close" class="close" data-dismiss="modal">×</button>
<img id="pop_up" src="images/caly_popup.png">
</div>
Here is my solution
.modale {
height: calc(100vh - 126px);
overflow-y:scroll;
}
this is not working, what do I need to do to get this working?
Try this
.modale {
height:100vh;
overflow-y:scroll;
position: fixed;
background: red;
width: 100%;
left: 0;
right: 0;
top: 0;
margin:auto;
}
<div class="modale" id="ouibounce-modal">
<button type="button" id="pop_up_close" class="close" data-dismiss="modal">×</button>
<img id="pop_up" src="images/caly_popup.png">
</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
So if i have only one element, in my case a button, i just add the .center-block class to that element and it is centered.
<div class="form-group">
<div class="col-sm-4 col-sm-offset-4">
<button type="submit" class="btn btn-primary center-block">Element 1</button>
</div>
</div>
But what if i have two elements? I tried to wrap them in a div and added a .center-div class like so:
HTML:
<div class="form-group">
<div class="col-sm-4 col-sm-offset-4">
<div class="center-div">
<button type="submit" class="btn btn-primary">Element 1</button>
<button type="submit" class="btn btn-primary">Element 2</button>
</div>
</div>
</div>
CSS:
.center-div {
display: inline-block;
margin-right: auto;
margin-left: auto;
}
.center-div is almost the same as .center-block except that i used display: inline-block; instead of display: block; so that it fits the contents size.
Sadly it doesn't work. Unless i change it to display: block; and assing it a fixed width like 200px.
What am i missing here?
Margin right and left set to auto only works if the width of the element is fixed.
As your center-div is now an inline-block, you need a text-align: center property on its container.
<div style="text-align: center">
<div class="center-div">
<!-- inner elements -->
</div>
</div>
I used a style attribute for convenience in this example
see if this helps:
.center-div {
width: 50%;
border: 1px solid black;
display: inline-block;
margin:0 auto;
text-align: center;
}
body{
text-align: center;
}
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;
}