I try to have a second responsive ui-grid inside a block of the first one, but I'm not able to get something like this to work.
This would behave like a 25% 25% 50% fluid responsive layout.
Here is a short sample of what I mean:
<fieldset class="ui-grid-a ui-responsive">
<div class="ui-block-a">
<fieldset class="ui-grid-a ui-responsive">
<div class="ui-grid-solo">
<div class="ui-block-a">
</div>
</div>
<div class="ui-block-a">
</div>
<div class="ui-block-b">
</div>
</fieldset>
</div>
<div class="ui-block-b">
<img src="images/jquery-logo.png" width="100%" />
</div>
</fieldset>
Here is a sample of what i get now:
http://jsfiddle.net/j5zbB/
The idea shall be that: at bigger screen sizes, two form elements are positioned on the same line, and at smaller sizes, they are positioned below each other.
UPDATE
Please, let me better explain with pictures the idea beyond this question.
This would be the nested layout at bigger screen sizes, like in a tablet, landscape:
This would be the nested layout in a tablet, portrait:
This would be the nested layout at very small screen sizes, like in a phone:
Maybe there is another way to achieve something like that without ui-grids, or someone can help? Thanks to all in advance.
Related
I am trying to create the following layout in Bootstrap 5 for three different breakpoints.
Playing with offsets and orders didn't bring a solution, for example:
<div class="col-xs-12 col-md-6">Text A</div>
<div class="col-xs-12 col-md-6"><img src="Img.jpg" class="img-fluid"></div>
<div class="col-xs-12">Text B</div>
works for XS and MD, but not for LG. Img is 1200x800, but I could resize it.
I have a webpage that shows an image up to size 400x400px, if they click on the image then I want it to display in a modal that sizes to accommodate the actual size of the image
The modal comes up but it defaults to 500px whatever the size of the image (from https://getbootstrap.com/docs/5.2/components/modal/#fullscreen-modal). If the image is larger than that I want the modal to be larger, and if smaller I want the modal to be smaller, I cannot see how to do this. I notice you can also have a fullscreen image by using modal-fullscreen but that doesn't help me.
Surely possible for the modal to size to accommodate the data
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div>
<a data-bs-toggle="modal" data-bs-target="#full_size_image_dialog">
<img src="https://via.placeholder.com/400" class="figure-img img-fluid border border-dark">
</a>
<div id="full_size_image_dialog" class="modal">
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5>
Full Size artwork
</h5>
</div>
<div class="modal-body">
<img src="https://via.placeholder.com/500" class="figure-img img-fluid border border-dark">
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
Edit
So I went though the answers at How to resize Twitter Bootstrap modal dynamically based on the content
The only answer that sort of worked was adding style="max-width : 1200px;"to the div with bootstrap class of modal-dialog
<div id="full_size_image_dialog" class="modal">
<div class="modal-dialog modal-dialog-scrollable" style="max-width : 1200px;">
<div class="modal-content">
<div class="modal-header">
<h5>
Full Size artwork
</h5>
</div>
<div class="modal-body">
<img src="http://172.17.22.1:9790/minimserver/*/Music/PopRock/Lily*20Allen/Alright,*20Still/01*20-*20Smile.wav/$!picture-34755692-444226.jpg" class="figure-img img-fluid border border-dark">
<figcaption>
1200 x 1200
</figcaption>
</div>
</div>
</div>
</div>
The trouble is that if the actual height of the image is larger than the height of the browser window then the image has to be scrolled vertically
What I actually want is the full image to be displayed full size but only if enough room in browser, otherwise display the max size it can be displayed without vertical scrolling. I can set a lower value for max-width so it works on my window, but then that is not going to be great for users with bigger resolution windows.
It does handle preventing sideways scrolling okay, so if the width of window is too small to show whole image it will shrink image accordingly, and we can reasonably assume images will usually be square.
So my attempted solution was to use Bootstraps container system to set different max-width size for different screen widths using col-md, col-xl ectera. But the trouble is it seems from the help that modal windows need to use their own container within the modal-body div but this isn't going to help because the max-width style has to be applied at the modal div so is outside of modal-body scope.
I tried just utilising the main page container, but it just uses the first dialog code each time, i.e it never uses more than 700px max width
<div class="row g-0">
<div class="col p-2">
<div id="full_size_image_dialog" class="modal">
<div class="modal-dialog modal-dialog-scrollable" style="max-width : 700px;">
<div class="modal-content">
<div class="modal-header">
<h5>
Full Size artwork
</h5>
</div>
<div class="modal-body">
<img src="http://172.17.22.1:9790/minimserver/*/Music/PopRock/Lily*20Allen/Alright,*20Still/01*20-*20Smile.wav/$!picture-34755692-444226.jpg" class="figure-img img-fluid border border-dark">
<figcaption>
1200 x 1200
</figcaption>
</div>
</div>
</div>
</div>
</div>
<div class="col-md p-2">
<div id="full_size_image_dialog" class="modal">
<div class="modal-dialog modal-dialog-scrollable" style="max-width : 1200px;">
<div class="modal-content">
<div class="modal-header">
<h5>
Full Size artwork
</h5>
</div>
<div class="modal-body">
<img src="http://172.17.22.1:9790/minimserver/*/Music/PopRock/Lily*20Allen/Alright,*20Still/01*20-*20Smile.wav/$!picture-34755692-444226.jpg" class="figure-img img-fluid border border-dark">
<figcaption>
1200 x 1200
</figcaption>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row g-0">
<div class="col-7 col-md-6 col-lg-4 col-xl-3 p-2">
<a data-bs-toggle="modal" data-bs-target="#full_size_image_dialog">
<img src="http://172.17.22.1:9790/minimserver/*/Music/PopRock/Lily*20Allen/Alright,*20Still/01*20-*20Smile.wav/$!picture-34755692-444226.jpg" class="img-fluid border border-dark">
</a>
</div>
At the moment, this is the best solution I could come up with using only CSS:
.modal-dialog {
max-width: max-content !important;
}
.modal-body {
display: flex;
}
.modal-body img {
object-fit: contain;
}
Only problem is that white bars appear to the left and right of the image when screen height is less then image height.
This is because of the object-fit: contain; style which I added to the image to maintain the original aspect ratio. If you remove this style then then white bars will disappear but the image will not keep it's initial aspect ratio when it's height is shrinking.
JS Fiddle: https://jsfiddle.net/hvaosw5j/
So I'm trying to use tooltip component from BS5. But somehow it doesn't work. Let me show you the html code first.
<div class="row">
<div class="col-12 col-md-4">
<a class="card">
<div class="card-body">
<div class="card-title">this is title. <span class="badge badge-theme" data-bs-toggle="tooltip" data-bs-placement="top" title="this is tooltip">Origiinal content</span></div>
</div>
</a>
</div>
</div>
What's weird is that when I place the tooltip outside the card component, the tooltip works perfectly. What is the problem? Thanks in advance. :)
here is a working example of a tooltip on a whole card:
Working demo
Placing id="example" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top" in my demo on any element will result in the tooltip appearing on that element. In this case, I placed it on on the div with the class .card.
Feel free to change the id name from example to your desired id (in both script.js and index.html).
The cards rendered in each are not aligned correctly, because instead of aligning horizontally they are aligned vertically (which I don't want).
It is very strange that this happens because I have made many similar rowr classes that contain exactly the same cards (But with different content) and these "align" perfectly well. In fact, this had never happened to me with the rows I have made before until I made this one, and as much as I check the code over and over again it is exactly the same as the ones I have made previously except for the content which is the only thing different.
<row>
{{#each schdData.logs}}
<div class="col-md-3">
<div class="card">
<div class="card-body">
<p class="card-text">{{{objst this}}}</p>
</div>
</div>
</div>
{{/each}}
</row>
And to clarify, this row class is not inside another row class, it is only inside a container p-4" class as I use to put all the rows-columns of cards I make in row classes and they do work.
Here. You have used row element instead of row as class. You need to use <div class="row">...</div> instead of <row>...</row>. Please read bootstrap Grid system for more understand.
Your code should be as below:
<div class="row">
{{#each schdData.logs}}
<div class="col-md-3">
<div class="card">
<div class="card-body">
<p class="card-text">{{{objst this}}}</p>
</div>
</div>
</div>
{{/each}}
</div>
I'm developing a web site, and I'm using SemanticUI.
I prepared this example to explain the problem:
<header>
<div class="ui vertical large menu red item page fluid grid">
<div class="mobile only row">
<div class="ui icon dropdown fluid center align massive button">
<i class="content icon"></i>
Menú
<div class="ui vertical menu">
<a class="item" href="#"> Home </a> <!-- ¡¡Repeted link!! -->
</div>
</div>
</div>
</div>
<div class="ui six menu red item fluid grid">
<div class="tablet only row">
<img src="http://goo.gl/ToQcwM" width="20px"/>
<a class="item" href="#"> Home </a> <!-- ¡¡Repeted link!! -->
</div>
<div class="computer only row">
<img src="http://goo.gl/ljDWQ7" width="20px"/>
<a class="item" href="#"> Home </a> <!-- ¡¡Repeted link!! -->
</div>
</div>
</header>
The trouble (SEO problem) is that I have to duplicate the three links above and of course, I don't want to do it. Actually, the site is build with PHP and I don't really doubled code (it's an include in PHP).
I prepared also a fiddle. To test it, you have to redimension the window in order to see the effects.
Of course, this is not the real situation. You can see the real web if you want.
So, anyone with a solution? best practices about this?
PD: Sorry for my english! :)
Finally, I just maintain one div with all links not repeated and then with CSS style that menu for mobiles.