I am using foundation 6 reveal modal window and when you click to open part of the scroll bar leaves where my fixed nav is and shifts content to the right about 5 to 10 px
<a class="button" data-open="exampleModal1">View users</a>
<!-- This is the first modal -->
<div class="reveal" id="exampleModal1" data-reveal>
<h1>Awesome!</h1>
<p class="lead">Users List!</p>
<button class="close-button" data-close aria-label="Close reveal" type="button">
<span aria-hidden="true">x</span>
</button>
</div>
This is a know issue, see discussion here.
I use the following Foundation CSS overwrite solution:
body.is-reveal-open {overflow: auto !important; height: auto; position: relative;}
.reveal-overlay {overflow: initial !important; position: absolute;}
Related
I have a modal
<div class="modal fade editModal in" data-backdrop="static" style="display: block; padding-left: 15px;">
<div class="model-content" style="margin-top: 200px;">
<div class="col-sm-offset-4 col-sm-2 col-md-offset-5 col-md-2 text-center">
<img width="80" src="/assets/be/img/baby/solidfood.png"><br><br><br>
<input type="time" value="14:25" name="updatedAt" width="100%" height="80">
<br><br>
<div style="display:flex; justify-content: space-between;">
<button onclick="updateLog('7873', '🍭' )" class="btn btn-option btn-solidfood">🍭</button>
<button onclick="updateLog('7873', '🍲' )" class="btn btn-option btn-solidfood">🍲</button>
<br><br>
</div>
<br>
<button onclick="updateLog('7873')" class="btn btn-option btn-success btn-block">Done</button>
<br>
<button onclick="deleteLog('7873', 'solidfood')" class="btn btn-option btn-danger btn-block">Delete</button>
</div>
</div>
</div>
CSS
.btn-option {
width: 100%;
height: 80px;
}
I have no idea why the buttons is not extended to the end!
It stopped at 95%.
How do I debug this and make it take a full width ?
The cause
The problem was caused by the margin-right: 10px;.
.btn, .btn:hover {
color: white;
margin-right: 10px;
}
A solution
So, what should you do? Setting margin-right: 0px; would produce the result you can see below. This is not what you want because there's no space in-between these two elements.
You need to set margin-right: 0px; only to the right (i.e., last) element. You can do this by adding this:
.btn:last-child, .btn:last-child:hover {
margin-right: 0px;
}
This will produce the result you can see below.
Try removing those two <br> tags inside the <div>
<div style="display:flex; justify-content: space-between;">
<button onclick="updateLog('7873', '🍭' )" class="btn btn-option btn-solidfood">🍭</button>
<button onclick="updateLog('7873', '🍲' )" class="btn btn-option btn-solidfood">🍲</button>
<!-- Try removing these -->
<br><br>
</div>
I don't think you'll need them inside a flexbox anyways.
Or maybe it's the padding-left:14px on the parent div that's causing this.Try changing that too and this should fix it.
I opened your code provided and unchecked "margin-right:10px;" and it removed the margin on the right side of the button so that the buttons take up the full width of the row (parent element) and both buttons are taking half of the row. See image: CSS code highlighted in yellow and Fixed App
There are multiple ways to skin this cat.
The bootstrap way:
This solution uses the built-in bootstrap grid system to accomplish the result you're looking for.
Remove the inline styling from your container div and replace it with bootstrap's row class. Then wrap each contained button inside divs with the class col-lg-6.
<div class="row">
<div class="col-lg-6">
<button onclick="updateLog('8014', '🍭' )" class="btn btn-option btn-solidfood">🍭</button>
</div>
<div class="col-lg-6">
<button onclick="updateLog('8014', '🍲' )" class="btn btn-option btn-solidfood">🍲</button>
</div>
</div>
Result:
It looks clean require no additional css or overrides. However you are stuck with the bootstrap default column gap between buttons which may not be desirable.
Incidentally, if at all possible, I highly recommend upgrading to bootstrap 4 instead of 3, as it's much more flexible to tweaking this kind of thing without having to resort to writing more css.
Custom CSS way:
If you want more control over the gap between the buttons, bootstrap may not be your best bet.
This is similar to the solution above from Cervus Camelopardalis and uses the :first-child and :last-child pseudo-classes.
Remove the inline style from the container element and instead give it a descriptive class name. I chose "double-btn" but use whatever makes the most sense to you.
HTML:
<div class="double-btn">
<button onclick="updateLog('7997', '🍭' )" class="btn btn-option btn-solidfood">🍭</button>
<button onclick="updateLog('7997', '🍲' )" class="btn btn-option btn-solidfood">🍲</button>
</div>
In your CSS, add a rule for this class to set display: flex.
Then add another rule targeting any .btn's that are children of this class, removing the default bootstrap margin.
Then add one last set of rules targeting the :first-child and :last-child pseudo-classes of those .btns, setting the margin-right and margin-left to half of your desired gap, respectively. I chose a ten pixel gap here, but with this approach you can change it whatever looks best to you.
CSS:
.double-btn {
display: flex;
}
.double-btn .btn {
margin: 0;
}
.double-btn .btn:first-child {
margin-right: 5px;
}
.double-btn .btn:last-child {
margin-left: 5px;
}
Result:
From here, you can adjust the above margin-right and margin-left values to change the size of the gap between buttons.
It looks like you have margin-right on those two buttons, because your buttons have width of 100% and there is space between them and at the end of that div.
Try adding margin: 0; on .btn-option.
If this doesn't do the trick try setting white-space: normal; on parent div.
I'm having trouble creating a drop-up menu with w3.css. What I'm trying to do is have a drop-up menu as the second element from the right on a footer fixed to the bottom of the viewport.
Here's what I have so far:
<footer class="w3-bar" style="position: fixed; bottom: 0;">
<span class="w3-bar-item">Button 1</span>
<span class="w3-bar-item">Button 2</span>
<span class="w3-bar-item w3-right">(Date Here)</span>
<div class="w3-dropdown-hover w3-right" style="position: relative; bottom: 0;">
<button class="w3-bar-item w3-button w3-hover-theme">Change Theme</button>
<div class="w3-dropdown-content w3-bar-block w3-card-4 w3-theme-d4" style="min-width: 100%; right: 0; bottom: 100%;">
Theme 1
Theme 2
Theme 3
Theme 4
</div>
</div>
</footer>
It works exactly as I want (it puts the drop-up menu right on top of the button, which is placed where I want it), except the options aren't visible (because they overflow above the footer bar).
Here's a link to a fiddle-like thing, I changed the "bottom" property of my w3-dropdown-content to 50% so you can see the bottom of the menu. https://www.w3schools.com/code/tryit.asp?filename=GCKK95EG0T44
Thanks by advance to anyone who'd try to help :)
Edit : I've still haven't found a way to have it show as I want. By changing the position of my w3-dropdown-hover element to absolute, the drop-up menu displays correctly, but the item is added to the left of the bar, instead of the right.
Well, you answered your own question: the propertie "overflow" in w3-bar is defined as "hidden". You could add "overflow:visible" after "bottom:0".
I've made custom pop over/speech box using boostrap pop over class in plain HTML.
Issue: Pop over dosen't seem to stick with the action text Save Records when I change output box alignment.
I tried by changing the position but didn't work.
<div class="popover fade bottom in" role="tooltip" style="top: 17.5938px; left: 0; display: inline-table;width: 36%;padding: 0px;text-align: center;border-radius: 0px;padding-bottom: 5px">
<div class="arrow" style="left: 50%;"></div>
<h3 class="popover-title" style="display: none;"></h3>
<div class="popover-content">
<p>Are you sure you wish to save the records?</p>
<div style="display:inline-flex">
<button class="btn btn-sm btn-primary btn-save btn-square" style="background-color:#0076C9;border: none;padding: 5px 25px 5px 25px;margin-left: 0px">Yes</button>
<button class="btn btn-sm btn-default btn-save btn-square" style="color:#0076C9;padding: 5px 15px 5px 15px;margin-left: 8px">Cancel</button>
</div>
</div>
</div>
FYI: JsFiddle
I don't see how the modal related to the text. The simplest way (as far as I know) would be to create a wrapper, where text & modal would be siblings. Then set position: relative to wrapper & position: absolute to modal. Also you should change top to bottom for modal. Here I did a super simple example: https://jsbin.com/yegufisumi/1/edit?html,css,output
I'm trying to align a close icon for a BootstrapVue tab with Bootstrap 4.2 in the top right corner.
<b-tab v-for="order in tabs" :key="order.id">
<template slot="title">
<span class="float-left">{{ order.name }}</span>
<b-button type="button" class="close float-right" aria-label="Close" #click="closeTab(order.id)">
<span aria-hidden="true">×</span>
</b-button>
</template>
...content....
</b-tab>
However, not only does it not align right as expected, the tab appears cut off when focussed:
What I want is for that X to appear in the top right corner of the tab.
How do I do that and make the tab look normal when active?
If you are using BS4 then you can add this styling to make close button on top right
<button type="button" class="p-4 position-absolute top-0 right-0">
<span>×</span>
</button>
In this case css position property is your friend
template {
position: relative;
}
template button {
position: absolute;
right:0px;
}
I have a JSFiddle set up here showing what is currently happening: http://jsfiddle.net/YX7T6/1/
This is the code:
<nav class="navbar navbar-default">
<div class="container">
<ul class="nav navbar-nav">
<li>
CText
</li>
</ul>
<div class="pull-right">
<button class="btn btn-default btn-lg"> button1 </button>
<button class="btn btn-default btn-lg"> button2 </button>
</div>
</div>
</nav>
<div class="container">
<a href="#">
<img src="http://placekitten.com/g/150/150" class="img-thumbnail" style="margin-top:-130px">
</a>
</div>
I'm trying to get the image to show on top of the navigation not behind it as it is now. I've tried changing the z-index of the image to something higher but nothing has changed. What should I try next?
As the other answers mentioned, z-index only works on elements that have position. Applying z-index to an element that has no position will simply be ignored.
img {
position: relative;
z-index: 1;
}
Will make the browser recognize the z-index attribute, and place the image above the nav menu. In the future whenever you're having issues with z-index not being recognized, the first thing you should do is check whether the elements in question have position.
However, in this specific case, rather than messing with negative margins, it may be simpler to do:
img {
position: absolute;
top: 0;
}
Just add position like position:relative; to your element
if you plan to control it's z-index property
fiddle
Alternatively, use position: absolute on the img and skip the z-index stuff.
http://jsfiddle.net/YX7T6/8/