Fullcalendar in Bootstrap 3 Thumbnail class not resizing with other - twitter-bootstrap-3

I am attempting to put a weekly agenda in a row of thumbnails using Fullcalendar, but the resizing doesn't seem consistent.
1) On my work monitor, the agenda table renders correctly at full screen width, then changes to being taller than the neighboring thumbnails when the screen is narrowed, and then returns to correct rendering at full width. It also renders correctly when in mobile emulation and the row switches from horizontal to vertical configuration. The screen resolution is 1920x1080.
2) At home, the agenda renders initially as taller than the neighboring thumbnails at full width, then remains taller as the horizontal dimension decreases, renders correctly in mobile emulation, then renders correctly when the screen is restored to full-width. Screen resolution is 1366x768.
The base dimensions of the neighboring images are 465x300.
Relevant code bits. The jQuery calling the calendar (in the $(document).ready() section).
$('#calendar-index').fullCalendar({
defaultView: 'basicWeek',
height: $("#imgSource").height(),
width: $("#imgSource").width(),
windowResize: function(view) {
this.height() = $("#imgSource").height();
this.width() = $('#imgSource').width();
}
});
The HTML section:
<div class="row">
<div class="col-md-4">
<div class="thumbnail text-center"><div id="calendar-index"></div>Button Text</div>
</div>
<div class="col-md-4">
<div class="thumbnail text-center"><img id="imgSource" src="image1.png">Button Text</div>
</div>
<div class="col-md-4">
<div class="thumbnail text-center"><img src="image2.png">Button Text</div>
</div>
I've got a feeling that connecting it to a $("#imgSource").load() rather than $(document).ready() call would work, but I'm avoiding using deprecated functions if possible.
http://jsfiddle.net/sidhenimh/63e0h54o/

I found a fix for this, in case anyone else runs into a similar issue; it doesn't work perfectly, but it does at least make the horizontal scaling a lot more stable. There's a free jQuery plugin called "Datatables" that enables automatic horizontal scaling. Vertical scaling doesn't work still, but the table at least displays correctly initially regardless of monitor resolution/size.
Datatables Plugin

Related

How to use absolute and relative position attributes in Tailwindcss to make positions consistent across all screen sizes

I am attempting to use tailwindcss in Vue to arrange a series of PNG images against background image to be positioned consistently across multiple screen sizes. Currently I am using the following code to arrange a wall frame and rug against a large room background image:
<div class="container relative w-full h-full bg-[url('https://c8.alamy.com/comp/2H35RR4/modern-interior-design-of-empty-living-room-apartment-with-white-wall-and-wooden-panelling-window-plant-home-background-with-beige-floor-wall-wit-2H35RR4.jpg')]">
<img class="scale-50 absolute bottom-48 z-10 left-1/2 transform -translate-x-1/2 -translate-y-4" src="https://flyclipart.com/thumb2/black-frame-png-466618.png">
<img class="scale-50 absolute bottom-2 z-10" src="https://pngimg.com/uploads/carpet/carpet_PNG57716.png">
</div>
Currently the tailwindcss classes I've added to the images and div work properly for 1920x1080. However, if I render the same arrangement in a smaller screen size, such as 1707x960, then the rug and frame position shift away from where they were originally in the first screen size. I attempted to resolve this issue by adding additional wrappers to the images, like so:
<div class="container relative w-full h-full bg-[url('https://c8.alamy.com/comp/2H35RR4/modern-interior-design-of-empty-living-room-apartment-with-white-wall-and-wooden-panelling-window-plant-home-background-with-beige-floor-wall-wit-2H35RR4.jpg')]">
<div class="absolute">
<img class="scale-50 absolute bottom-48 z-10 left-1/2 transform -translate-x-1/2 -translate-y-4" src="https://flyclipart.com/thumb2/black-frame-png-466618.png">
</div>
<div class="absolute">
<img class="scale-50 absolute bottom-2 z-10" src="https://pngimg.com/uploads/carpet/carpet_PNG57716.png">
</div>
</div>
However, this also did not work. How can I go about configuring this code (in terms of using absolute and relative) to enable the rug and frame to render in the same positions across multiple screen sizes?

How to adjust Vuetify components dimensions?

I have a project that includes text fields, buttons and a certain form design. I'm using Vuetify to achieve this but there's one problem that I'm not sure how to handle: Vuetify components dimensions seemed not changable.
For example :
I want v-text-field, v-select and v-btn to have the same height and <v-select> to be a bit wide relative to the button.
Is there a way to achieve this in Vuetify ? Or is it handled by CSS superimposition ?
Here is one way, using flexbox to keep items in a row, with one child taking up all the remaining space. Flexbox has a nice ability to override the child width and give you predictable results.
<div style='display:flex'>
<div style='flex:0 0 auto'>Item 1</div>
<div style='flex:1; background-color: yellow'>Item 2</div>
<div style='flex:0 0 auto'>Item 3</div>
</div>
in terms of the height, there is a height property for inputs and button
checkout here : https://vuetifyjs.com/en/api/v-input/#props-height

Setting of one image in carousel without any movement

I need to add only one image to the carousel through materialize css, but that image should stay in its position without moving when clicked on the space around the image.
<div class="carousel" >
<a class="carousel-item" href="#one!"><img src="https://lorempixel.com/250/250/nature/1"></a>
</div>
$(document).ready(function() {
$('.carousel').carousel();
});
I am able to display one image in the carousel but the image is hiding when clicked on the space around the image.

How can we fix bootstrap affix issue which sticks navbar fine at the top, but moves/floats to left (upon scrolling)

I am trying to have a menu bar to get stick to top when user scrolls up. It sticks fine at the top. But, it floats to left.
code: http://www.bootply.com/y801SV4HAu
How to fix menu so that if sticks to top and center (margin-left is currently set to auto to make it center)?
<div class="container" style="padding:0">
<div id="menu-header" class="affix">
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<span style="color:white">Menu bar here<i class="glyphicon glyphicon-menu-right"></i></span>
</div>
</div>
</div>
</div>
The above does what you want it to do. Cassie was correct in suggesting a container div, but with the added style padding:0 for the way you want it to look. so that it aligns with page title.
When position: fixed is applied to the header upon scrolling down, the margin: auto no longer affects it, so it moves back over to the side. You'll have to find another way to center that div. There are probably a ton of ways to do this; the simplest offhand might be to put it inside a .container div.

Fix a div to the bottom while scrolling with skrollr

I'm trying to use Skrollr to fix an element to the bottom of the viewport, if the bottom of the element hits the viewport bottom. This part is fine.
The problem is, after - lets say 1000px - of scrolling, i want to continue the scrolling, while i change the above mentioned fixed element to static again.
<div class="header">Header</div>
<div class="height-placeholder" data-anchor-target="#fixed-element" data-0-bottom="display:none;" data--0-bottom="display:block;"></div>
<div id="fixed-element" data-0="#class:;" data-bottom="#class:stuck;" data-1000="#class:;">Fixed at the bottom for a while</div>
<div class="content">
Regular content...<br>
</div>
http://jsfiddle.net/bkccg8x5/2/
So my idea was to create a placeholder above the fixed element and when the fixed element is stuck to the bottom, i simply add this element, so when i unstuck the fixed element, it would continue to scroll normal without any jump.
The problem with this solution is that i defined a fixed height for the placeholder, and this way it will only work correctly at a certain viewport height. Makes things more complicated, that every element on the site has a fluid height, so i need a solution that will work in every resolution.
Any ideas?
I solved this by creating a 1000px tall container and when the bottom of the container is hitting the bottom of the viewport, i change the fixed element to absolute.
<div class="header">Header</div>
<div id="height-placeholder" data-0="#class:;" data-bottom="#class:unstuck;">
<div id="fixed-element" data-0="#class:;" data-bottom="#class:stuck;">Fixed at the bottom for a while</div>
</div>
<div class="content">
Regular content...<br>
</div>
Here is the demo, works fine with any height:
http://jsfiddle.net/bkccg8x5/3/