I am building a prototype for a chat application using bootstrap. When the screen size is small, there is some overlapping between the rows. I am stuck and have no clue about the reason behind this weird behavior
Code:
<body>
<section class='menu col-lg-3 col-md-3 col-sm-3 col-xs-3 border'>
<div class='row user'>
<div class='col-lg-5 col-md-5 col-sm-12 col-xs-12 border'>
<img class='user-picture' src='img/profile.jpg'></img>
</div>
<div class='user-name col-lg-7 col-md-7 col-sm-12 col-xs-12'>Error</div>
</div>
<div class='row dialog-box'>dialogs</div>
</section>
<section class='detail col-lg-9 col-md-9 col-sm-9 col-xs-9 border'>
chat details
</section>
</body>
In big screen, it works fine like this:
But when the screen is smaller, it overlaps like this
Related
There is a requirement here is when we click on Tab Button then on a browser it should highlight all the hyperlink ToolTip and button,
for for me in some case while clicking om tab key it is skipping some part of DOM and skipping some part of button.
How to achieve this
`<div class="tech-section" id="specs-1-0-0">
<div class="row heading-row">
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-9 col-xl-9">
<h3>Essentials</h3>
</div>
<div class="hidden-xs col-sm-4 col-md-4 col-lg-3 col-xl-3 export-container">
<a class="export-link" role="button" data-user-exit="SingleExport">Export Specifications
<span class="fa-arrow-right"></span></a>
</div>
</div>
<div class="row tech-section-row">
<div class="col-xs-6 col-lg-6 tech-label">
Collection
</div>
<div class="col-xs-6 col-lg-6 tech-data">
9 Series
</div>
</div>
<div class="row tech-section-row">
<div class="col-xs-6 col-lg-6 tech-label">
Code Name
</div>
<div class="col-xs-6 col-lg-6 tech-data">
Mansion Beach
</div>
</div>
<div class="row tech-section-row">
<div class="col-xs-6 col-lg-6 tech-label">
Capacity
</div>
<div class="col-xs-6 col-lg-6 tech-data">
1.5 TB
</div>
</div>
<div class="row tech-section-row">
<div class="col-xs-6 col-lg-6 tech-label">
Status
</div>
<div class="col-xs-6 col-lg-6 tech-data">
Launched
</div>
</div>
<div class="row tech-section-row">
<div class="col-xs-6 col-lg-6 tech-label">
Launch Date
<button class="btn-tooltip-trigger view-modal info-modal" data-toggle="modal" data-target=".upe-modal" data-title="Launch Date" data-description="The date the product was first introduced." data-search-title="Find products with Launch Date" data-search-href="" data-search-icon="true">
<span class="fa-tooltip"></span>
</button>
</div>
<div class="col-xs-6 col-lg-6 tech-data">
Q3'18
</div>
</div>
<div class="row tech-section-row">
<div class="col-xs-6 col-lg-6 tech-label">
Lithography Type
</div>
<div class="col-xs-6 col-lg-6 tech-data">
3D
</div>
</div>
</div>`
like that we have some page: Now when I click on Tab on a page then starting from header it is highlighting all the parts now when it comes to the above loop while clicking Tab key it highlight the line Mansion Beach but when again click on tab it moves out of this and goes to footer
instead it should also highlight Launch Date i.e. we can see in the bottom there is a button that is
<button class="btn-tooltip-trigger view-modal info-modal" data-toggle="modal" data-target=".upe-modal" data-title="Launch Date" data-description="The date the product was first introduced." data-search-title="Find products with Launch Date" data-search-href="" data-search-icon="true"> <span class="fa-tooltip"></span> </button>
But it is not highlighting.
Can anyone help me with the concept like how this "tab key press" works and also how to resolve the above problem
You can check that does text-decoration: none is implemented on the :focus or :focus-visible of that element where Tab highlighting not working?
NOTE: Internet Explorer and Safari don't support:focus-visible.
I have a widget like this:
<div class="col-md-12 col-xs-12">
<div class="col-md-4 col-xs-12">
1
</div>
<div class="col-md-4 col-xs-12">
2
</div>
<div class="col-md-4 col-xs-12">
3
</div>
<div class="col-md-4 col-xs-12">
4
</div>
</div>
I am embedding the above widget like this
<div class="container">
<div class="col-md-12">
<div class="col-md-3 embedWidget">
<!-- embeeded-widget-comes-here -->
</div>
<div class="col-md-9">
<!-- some other imp content here -->
</div>
</div>
</div>
When I do this my widget is showing as 4 column grid, But I want it to be stacked format (mobile view col-xs), for all responsive widths
how can I achieve it
I tried with width 100% to embedWidget (content is fixing in that area as 4 col grid)
Why don't you put 100% width on embedWidget for media query for smaller devices.
How to combine JQuery.show() whit mine working animation so I can display text.
I would like to achieve the same effect like here on this working example .But I don't want to use "data" prefix for displaying text, I want to use jquery.show(). I am having trouble understanding where and how to put mine text for each button and showing it on the middleBubble.
Only difference between mine example and this one, is that mine middleBubble is toggling.
How can I make this work's and implement jquery show() library in working animation?
HTML for mine example:
<section class='circle-animation'>
<div class="container-fluid">
<div class="row">
<div class="hidden-xs hidden-sm">
<div class="col-sm-6 col-sm-offset-3 col-sm-pull-1">
<div id="middlepapir" class="jumbotron">
<div class="row">
<img class="papir img-responsive" src="img/circle/11.png" alt="">
<div class="row">
<div class="move1 col-sm-4 col-xs-4 col-md-push-4">
<img class="position1 round" src="img/circle/off/home-all-icon-off.png">
</div>
</div>
<div class="row">
<div class="move2 col-sm-4 col-xs-4 col-md-push-1">
<img class="position2 round" src="img/circle/off/home-cover-icon-off.png">
</div>
</div>
<div class="row">
<div class="move3 col-sm-4 col-xs-4 col-md-push-7">
<img class="position3 round" src="img/circle/off/home-design-icon-off.png">
</div>
</div>
<div class="row">
<div class="move4 col-sm-4 col-xs-4">
<img class="position4 round" src="img/circle/off/home-diy-icon-off.png">
</div>
</div>
<div class="row">
<div class="move5 col-sm-4 col-xs-4 col-md-push-8">
<img class="position5 round" src="img/circle/off/home-marketing-icon-off.png">
</div>
</div>
<div class="row">
<div class="move6 col-sm-4 col-xs-4 col-md-push-1">
<img class="position6 round" src="img/circle/off/home-other-icon-off.png">
</div>
</div>
<div class="row">
<div class="move7 col-sm-4 col-xs-4 col-md-push-4">
<img class="position7 round" src="img/circle/off/home-special-icon-off.png">
</div>
</div>
<div class="row">
<div class="move8 col-sm-4 col-xs-4 col-md-push-7">
<img class="position8 round" src="img/circle/off/home-vip-icon-off.png">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Jquery for HTML section:
// jQuery script for are Circle div whit Scroll Reveal Script
$(document).ready(function(){
/*==========================================
SCROLL REVEL SCRIPTS
=====================================================*/
window.scrollReveal = new scrollReveal();
/*==========================================
WRITE YOUR SCRIPTS BELOW
=====================================================*/
$('.round').click(function(){
$('.papir').animate({
width: ['toggle', 'swing'],
height: ['toggle', 'swing'],
});
});
});
This is more difficult to examine without your CSS, however, it seems that you missed the layout that your example used. They have a separate area for the main text called id="middleBubble". This is the area that the text is being replaced in.
They are performing the replacement here:
$("#middleBubble").html("<p><b>" + $(this).data("bubble1") + "</b><br />" + $(this).data("bubble2") + "</p>");
where "this" is the element (in this case the image) that has been hovered over. The data is stored in the data-bubble1 and data-bubble2 attributes. You could store it there (the replacement text for each section) or you could store it as a keyed JSON object and use the id of the image to key which values to use. I would recommend the later, but to each their own.
Based on the code below & using bootstrap, I have a grid layout with multiple .block components, each containing an image and a title. The images are larger than the column size so that they can resize to full width for responsive screen sizes (done with the CSS listed below). each image may be different heights & widths.
This works just fine as long as you don't define the image height in the attributes. As soon as you add the height it distorts the image proportions.
Now however, I need to set the image heights for some javascript so that it loads properly. Without setting the heights, the js is loading too quickly and the element heights are incorrect basically.
Right now I'm getting around this by using a setTimeout() to delay the js script by 1.5 seconds. This obviously isn't ideal as for someone with a slow connection it won't be long enough.
My Question: Is there a way to either (A) delay the js until all images have loaded on the page or (B) set the height for each image in a way that it will resize with the image width and keep my proportions correct for the image with css?
HTML:
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="block">
<img src="/img/image.jpg" alt="image">
<h2>Image Title</h2>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="block">
<img src="/img/image1.jpg" alt="image">
<h2>Image Title</h2>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="block">
<img src="/img/image2.jpg" alt="image">
<h2>Image Title</h2>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="block">
<img src="/img/image3.jpg" alt="image">
<h2>Image Title</h2>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="block">
<img src="/img/image4.jpg" alt="image">
<h2>Image Title</h2>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="block">
<img src="/img/image5.jpg" alt="image">
<h2>Image Title</h2>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="block">
<img src="/img/image6.jpg" alt="image">
<h2>Image Title</h2>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="block">
<img src="/img/image7.jpg" alt="image">
<h2>Image Title</h2>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="block">
<img src="/img/image8.jpg" alt="image">
<h2>Image Title</h2>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="block">
<img src="/img/image9.jpg" alt="image">
<h2>Image Title</h2>
</div>
</div>
</div>
</div>
CSS:
.block img{
max-width: 100%;
}
To delay the Js to run until all images are loaded you should use jquery's
$(window).load(function(){
//your code here
});
or you can resize images when each one is loaded
$('img').each($(this).load(function(){
//resizing code here with $(this).height or $(this).width() maybe
});
to check the bootstrap you can use
$(window).resize()
to do the same and that way resizing on the browser will rerun the js in load. This is how I test responsiveness with images.
I am experimenting with Bootstrap and I was wondering how can I adjust number of columns depending of screen size. I saw this from Bootstrap CSS tutorial:
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
I have 6 columns on big screen size and I would like to switch it to two rows of 3 columns on medium screens and to three rows of 2 columns on small screens. It looks to me that I can only change width of columns and not number of columns. Can I do it with Bootstrap and if not what would be a good way to do it? Javascript?
Yes, you can change number of columns with Bootstrap. That's what flexible grid is for.
Here's an example that follows your instructions:
<div class="row">
<div class="col-xs-6 col-md-4 col-lg-2">first</div>
<div class="col-xs-6 col-md-4 col-lg-2">second</div>
<div class="col-xs-6 col-md-4 col-lg-2">third</div>
<div class="col-xs-6 col-md-4 col-lg-2">fourth</div>
<div class="col-xs-6 col-md-4 col-lg-2">fifth</div>
<div class="col-xs-6 col-md-4 col-lg-2">sixth</div>
</div>
See Bootply Demo.
<div class="row">
<div class="col-lg-2 col-md-4 col-xs-6"></div>
<div class="col-lg-2 col-md-4 col-xs-6"></div>
<div class="col-lg-2 col-md-4 hidden-sm hidden-xs"></div>
<div class="col-lg-2 hidden-md hidden-sm hidden-xs"></div>
<div class="col-lg-2 hidden-md hidden-sm hidden-xs"></div>
<div class="col-lg-2 hidden-md hidden-sm hidden-xs"></div>
</div>
<div class="row">
<div class="hidden-lg col-md-4 col-xs-4"></div>
<div class="hidden-lg col-md-4 col-xs-4"></div>
<div class="hidden-lg col-md-4 hidden-sm hidden-xs"></div>
</div>
<div class="row">
<div class="hidden-lg hidden-md col-xs-4"></div>
<div class="hidden-lg hidden-md col-xs-4"></div>
</div>
<div class="row">
<div class="col-lg-6 visible-lg">Column 6 Large</div>
<div class="col-md-3 visible-md">Column 1 Medium</div>
<div class="col-md-3 visible-md">Column 2 Medium</div>
<div class="col-xs-2 visible-xs">Column 1 Small</div>
<div class="col-xs-2 visible-xs">Column 2 Small</div>
<div class="col-xs-2 visible-xs">Column 3 Small</div>
</row>
It should be noted that having duplicate content in separate columns like this isn't great for SEO. You might want to instead approach this by using nested columns for more granular control over your content without having to duplicate it.