I'm using bootstrap3 modal and trying to create a table inside a modal.
I want the tbody to have vertical scroll. I've tried adding the height and overflow-y: auto to tbody, but it won't work.
I was able to have the entire modal scrollable, but I just want only the table body to be scrollable
Can anyone please help me?
I've finally found an answer for this.
I adapted the code from here: http://jsfiddle.net/T9Bhm/7/
The CSS Solution:
table {
width: 100%;
}
thead, tbody, tr, td, th { display: block; }
tr:after {
content: ' ';
display: block;
visibility: hidden;
clear: both;
}
thead th {
height: 30px;
/*text-align: left;*/
}
tbody {
height: 120px;
overflow-y: auto;
}
thead {
/* fallback */
}
tbody td, thead th {
width: 19.2%;
float: left;
}
Related
I'm working on a website that has a lot of z-index values and I'm trying to make a Drag & Drop menu that you can move around but stays in the screen space at all times. But because the drag & drop menu would have a fixed position it breaks the z-index positioning (it reveals borders that it wouldn't if it was positioned absolute).
I understand that you can't position a fixed element with z-index but do you guys maybe know a workaround for it?
Here is the JS fiddle of what I have so far (I left the header in):
https://jsfiddle.net/wdeyvb7q/
HTML:
<div id="menu-container">
<div id="draggable3" class="draggable ui-widget-content">
<p>I'm a very confused box, position fixed on my container breaks the style.</p>
</div>
</div>
CSS (with #menu-container absolute):
#menu-container {
width: calc(90vw - 94px);
height: calc(100vh + 8px);
top: -4px;
position: absolute;
left: calc(5vw + 47px);
}
.draggable {
background: white;
width: 100%;
height: 90px;
float: left;
position: absolute;
z-index: 200;
border-top: 4px solid black;
border-bottom: solid black;
}
#draggable, #draggable2 {
margin-bottom:0px;
}
#draggable {
cursor: n-resize;
}
JS:
$( function() {
$( "#draggable3" ).draggable({ containment: "#menu-container", scroll: false });
} );
And here are 2 screenshots of an absolute & fixed position
I solved it! I removed both inner borders of the sidebars and added 2 divs floating left and right. By positioning those divs under the menu code in the HTML file it will stay under the menu, so I added a border on each side and that didn't break the design =)!
JSFiddle: https://jsfiddle.net/adf2gte7/
HTML:
<!-- Left And Right Inner Borders -->
<div class='left-border-menu'></div>
<div class='right-border-menu'></div>
CSS:
/* Inner Borders */
.left-border-menu {
width: calc(5vw + 47px);
height: 2000px;
background: orange;
float: left;
border-right: 4px solid black;
}
.right-border-menu {
width: calc(5vw + 47px);
height: 2000px;
background: orange;
float: right;
border-left: 4px solid black;
}
How to make Vue2-leaflet map have 100% height of its parent container?
When I set its style to style="height: 100%" it is overwriting whole page on first interaction with the map and tile layer isn't showed at all.
Use calc(100% - 100px) for #map-wrapper because #some-div has a height of 100px in your example.
Then the scrollbar disappears.
#some-div {
height: 100px;
}
#map-wrapper {
background-color: red;
height: calc(100% - 100px);
margin: 0;
}
Fiddle: https://jsfiddle.net/yLe9n1uk/
Or use a flexbox for the parent div (#app):
#app {
display: flex;
flex-direction: column;
}
#some-div {
height: 100px;
}
#map-wrapper {
background-color: red;
height: 100%;
margin: 0;
}
Fiddle: https://jsfiddle.net/xo5z8r7q/
I am using bootstrap vue and am trying to animate/transition the drop downs. This is proving to be fairly difficult as they do not use v-if or v-show so the transition will not work. Alternatively because the way the components work if you use v-if the drop down trigger will be hidden. I can't find anything online to bootstrap vue specifically on this but I feel this shouldn't be as tough as it has turned out to be. thanks for any help you can give
<div id="app">
<b-navbar type="dark" fixed>
<b-navbar-nav class="ml-auto">
<b-nav-item-dropdown text="Tools">
<b-dropdown-item to="/navItem1">Item 1</b-dropdown-item>
<b-dropdown-item to="/export"> Item 2</b-dropdown-item>
</b-nav-item-dropdown>
// This won't work as it hides the main dropdown trigger right form the start
<b-nav-item-dropdown text="Tools" v-if="toggleDropdown">
<b-dropdown-item to="/navItem1">Item 1</b-dropdown-item>
<b-dropdown-item to="/export"> Item 2</b-dropdown-item>
</b-nav-item-dropdown>
</b-navbar-nav>
</b-navbar>
</div>
<script>
export default {
name: 'nav',
data () {
return { toggleDropdown: false }
},
mounted: function () {
// I can listen for events here but I still can't trigger the transition
this.$root.$on('bv::dropdown::show', bvEvent => {
this.toggleDropdown = true
})
this.$root.$on('bv::dropdown::hide', bvEvent => {
this.toggleDropdown = false
})
}
}
</script>
<style lang="scss">
.navbar {
.dropdown-menu {
transform-origin: top;
transition: transform 10s ease-in-out;;
}
}
.dd-slide-enter,
.dd-slide-leave-to { transform: scaleY(0); }
</style>
It's pretty hard to achieve a clean slide-up/down animation because BootstrapVue uses display:none/block to hide/show the dropdown menu. What you can do it's manipulate the max-height of the element as explained here.
I added an 'animated' class to the parent element, for example your b-navbar to select which dropdown has to be animated. Then i removed display: none from the default status of the dropdown and hidden it setting its max-height and padding to 0 and its border to none. When you click the button the dropdown gets the class 'show'so you can give it a max-height different than 0, as explained in the answer i've linked to you, you have to set it higher than the actual height of the dropdown menu otherwise it gets cropped out.
.animated {
.dropdown-menu {
overflow: hidden;
display: block!important;
max-height: 0!important;
&:not(.show) {
padding: 0;
border: none;
}
&.show {
transition: max-height 300ms ease-in-out;
max-height: 500px!important; //this must have to be higher than the max height of the dropdown list
}
}
}
Just came across this same issue.
Ended up following with previous example, but this one works for both up/down transitions and doesn't mess with overflows in case you want to add triangles.
.dropdown-menu {
border: 1px solid #ebeef5;
box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.25);
// Slide down transtion
display: block !important;
&:not(.show) {
padding: 0px;
border-width: 0px;
border-color: transparent;
box-shadow: none;
transition: padding 1.3s ease, border-width 1.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
> li {
max-height: 0px;
overflow: hidden;
transition: max-height 0.3s ease;
}
&.show {
> li {
max-height: 100px;
}
}
// Add chevron to top
&[x-placement^="bottom"] {
&::before {
content:"";
position: absolute;
right: 11px;
top: -5px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 5px 5px 5px;
border-color: transparent transparent #fff transparent;
z-index: 99999999;
}
}
// Add chevron to bottom
&[x-placement^="top"] {
&::after {
content:"";
position: absolute;
right: 11px;
bottom: -5px;
width: 0;
height: 0;
border-style: solid;
border-width: 5px 5px 0 5px;
border-color: #fff transparent transparent transparent;
z-index: 99999999;
}
}
}
is there anyway I can change the little navigate buttons into text buttons on flexslider? I can't find it anywhere on internet.
To use an image as the navigation button:
.flex-direction-nav a:before {
content: " ";
display: block;
background: url('../path-to-image/flexslider-left.png') no-repeat;
width: 40px;
height: 40px;
}
.flex-direction-nav a.flex-next:before {
content: " ";
display: block;
background: url('../path-to-image/flexslider-right.png') no-repeat;
width: 40px;
height: 40px;
}
You can use the prevText and nextText properties, like this (I'm using arrows but you can change to whatever text you want):
$('.flexslider').flexslider({
prevText: "←",
nextText: "→"
});
And then in flexslider.css remove the background-image and text-indent properties from .flex-direction-nav a.
Hope it helps.
I am trying to override the CSS of a back button in a Sencha Touch 2 Navigation View. Using this CSS
#ext-container-1 .x-button {
background: url(../images/button_zurueck.png) no-repeat;
width: 55px;
height: 55px;
margin-top: 120px;
margin-right: 26px;
border: none;
}
I was able to show the image but the width attribute is overidden by the style attribute set on the button so only a small part of the button is shown. This ist the content of the style attribute left after the button animation:
element.style {
left: 0px !important;
-webkit-transform: translateX(0px) translateY(0px) translateZ(0px) rotate(0deg) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skewX(0deg) skewY(0deg) scaleX(1) scaleY(1) scaleZ(1) !important;
opacity: 1 !important;
width: 16px !important;
}
How can I override the width of the button?
This is a bug in 2.0.0 and has already been fixed by Sencha for the next release.
More information: http://www.sencha.com/forum/showthread.php?188982
I was able to show the full button by adding right padding. Its dirty but its work. Looking forward for the next release of Sencha Touch.
At the end I got rid of that button totally and inserted my own button which simulates the "back" functionality.
On the card:
config: {
defaultBackButtonText: '',
navigationBar: {
backButton: {
iconCls: 'back',
ui: 'plain'
}
}
}
On the CSS:
//Back
.x-button-icon.back {
background-image: url(../../resources/images/bt_seta.png);
background-repeat: no-repeat;
}