I'm developing a mobile app using phonegap/cordova. I want my main menu to be a set of icons with a short text below, all aligned in a grid layout (2 lines x 3 columns for example).
I'm also using jquerymobile. For my "page" I have a fixed "header" and "footer" regions and the "content" is currently:
<div class="ui-grid-b ui-responsive" >
<div class="ui-block-a"><div class="ui-bar ui-bar-a">
<p><img src="./img/menu1.png"></p><h2>OPT1</h2>
</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-a">
<p><img src="./img/menu2.png"></p><h2>OPT2</h2>
</div></div>
<div class="ui-block-c"><div class="ui-bar ui-bar-a">
<p><img src="./img/menu3.png"></p><h2>OPT3</h2>
</div></div>
<div class="ui-block-a"><div class="ui-bar ui-bar-a">
<p><img src="./img/menu4.png"></p><h2>OPT4</h2>
</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-a">
<p><img src="./img/menu5.png"></p><h2>OPT5</h2>
</div></div>
<div class="ui-block-c"><div class="ui-bar ui-bar-a">
<p><img src="./img/menu6.png"></p><h2>OPT6</h2>
</div></div>
</div>
I want the grid's height to be equal to the "content"s height either by adjusting the grid overall height or by adjust the rows height. I don't want to define a fixed height because the menu should adjust to different screen sizes. (well maybe the height could be a number if some JS could change it accordingly)
There are some approaches to this on the web but I could not find any that automatically adjusts height.
Example here: http://www.vjkhan.com/jquery-mobile-jqm-grid-with-images-and-captions/
The solution can by of any type... CSS, JS, etc...
Many thanks for any suggestion!
Cheers!
Related
Using Bootstrap 5 it seems that use of gutter classes does not put any vertical space between row elements, it only puts space if a single row element has more than 12 columns and wraps round on display.
I tend to use a row when the content is going to be a single row on the main platform I am developing for (iPad), so I'm using mb-2 to put a margin between each row. But sometimes the content is too large for smaller devices such as phones and so it wraps and then I get no space between first half of the row and the second half of the row that is now rendered between it, so I have added gy-2 as well
So am I right in thinking that in most cases you need to add and mb (margin bottom) class and a gy (gutter vertical) class to most rows, or have I misunderstood this?
<div class="row gy-2 mb-2">
<div class="col">
<span class="ps-2">
<label>
All tracks composed by
</label>
<span>
<a href="/composer.start?cid=0$=Composer$2682&title=Composers+%2F+Johann+Sebastian+Bach" class="small figure-caption">
Johann Sebastian Bach
</a>
<label class="small figure-caption">
</label>
</span>
</span>
</div>
</div>
<div class="row gy-2 mb-2">
<div class="col-12 col-sm-auto">
<span>
<button id="show_movements_button" type="btn" class="btn btn-outline-primary" data-bs-toggle="collapse" data-bs-target="#movements_id">
Show Movements
</button>
</span>
<span>
<button id="show_credits_button" type="btn" class="btn btn-outline-secondary" data-bs-toggle="collapse" data-bs-target="#credits_id">
Show All Credits
</button>
</span>
</div>
<div class="col-12 col-sm-auto ms-sm-auto">
<span>
<span class="input-group">
<span for="filter" id="filterlabel" class="input-group-text">
Filter
</span>
<input type="text" id="filter" name="filter" onkeyup="filterOnly()" class="form-control">
</span>
</span>
</div>
</div>
You got it right, you need to use mb to add vertical space between each row and gy to add vertical space between the columns of each row (when the row wraps).
You can also add mb to the columns to achieve the same result:
JSFiddle
I would do something like that. Some top-of-the-head options...
Use bottom margin, as mb-2
Use Y-axis margin, as my-2
Use a custom class on a container element, as row-gutter-2 {margin-bottom: $spacer * .5;}
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/
We're using Bootstrap 3 (v3.3.5) accordion and it works fine until the screen reader is enabled on the iPad (iOS v9.1). Once the screen reader is enabled, the accordions will no longer expand/collapse for accordions with shorter labels (labels that take up less than 50% of the available space). The shorter label issue is consistent as the screen is rotated between landscape and portrait. The issue can be corrected by making the labels longer than 50% of the available space or centering them. Unfortunately, centering or expanding the label is not an option on our team.
This seems to be a problem with Bootstrap 3 and not Bootstrap 2. I pointed to the bootstrap 2 accordion example here (http://getbootstrap.com/2.3.2/javascript.html#collapse) and enabled the screen reader on the iPad and it worked fine. Then, I pointed to the bootstrap 3 accordion example here (http://getbootstrap.com/javascript/#collapse) and enabled the screen reader on the iPad and it failed to expand/collapse the accordion.
Has anyone found a fix or another workaround? Perhaps, we are missing an attribute to fix the problem or something else.
Here is the code that we're using in our accordion:
<div class="row" id="A">
<div class="col-md-12 col-sm-12 col-xs-12 content">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingA">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#contentA" aria-expanded="false" aria-controls="contentA">This label is to short for any screen
<span class="sr-only sr-only-focusable" id="toggleA">show content</span>
</a>
</h4>
</div>
<div id="contentA" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingA">
<div class="panel-body">
<p>This label is to short to expand/collapse this content on any iPad screen with the screen reader enabled.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingB">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#contentB" aria-expanded="false" aria-controls="contentB">This label works on portrait/landscape screen and will expand/collapse accordion
<span class="sr-only sr-only-focusable" id="toggleB">show content</span>
</a>
</h4>
</div>
<div id="contentB" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingB">
<div class="panel-body">
<p>This label is long enough to expand/collapse this content on the iPad portrait and landscape screens with the screen reader enabled.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingC">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#contentC" aria-expanded="false" aria-controls="contentC">This label works on portrait screen not landscape
<span class="sr-only sr-only-focusable" id="toggleC">show content</span>
</a>
</h4>
</div>
<div id="contentC" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingC">
<div class="panel-body">
<p>This label is long enough to expand/collapse this content on the iPad portrait screen but not the landscape with the screen reader enabled.</p>
</div>
</div>
</div>
</div> <!-- End panel group -->
</div>
</div>
Thank you
This might be related to the following bug:
Use of anchors nested in headings causes issues in VoiceOver, promotes anti-pattern usage
anchors within headings(H4) confuse VoiceOver(VO), which:
causes VO to place the VO cursor on the H4 vs. the anchor,
doesn't read any of the aria attributes on the anchor,
breaks the standard VO-Spacebar interaction
I am using material design flexbox layout and in a box, I have two boxes. I create on jsfiddle, to clarify what I mean:
Angular Material app
I want to set between these boxes a space
<div flex layout="row" layout-align="space-between center">
<md-toolbar flex="15">
<h2 class="md-toolbar-tools">
<span>Home</span>
</h2>
</md-toolbar>
<!--How to set space between -->
<md-toolbar>
<h2 class="md-toolbar-tools" layout-align="end center">
<span>Sign Up</span>
<span>Sign In</span>
</h2>
</md-toolbar>
</div>
For those interested in a solution using Angular Flex Layout, you can achieve this with fxLayoutGap directive.
Without fxLayoutGap
<div fxLayout="row">
<div>1. One</div> <div>2. Two</div> <div>3. Three</div> <div>4. Four</div>
</div>
With fxLayoutGap
<div fxLayout="row" fxLayoutGap="20px">
<div>1. One</div> <div>2. Two</div> <div>3. Three</div> <div>4. Four</div>
</div>
I think what you need is 'layout-margin'
https://material.angularjs.org/latest/layout/options
<div layout="row" layout-margin>
<div flex>Parent layout and this element have margins.</div>
</div>
I think you can do it much simpler:
<md-toolbar>
<div class="md-toolbar-tools">
<span>Home</span>
<span flex></span>
<div>
<span>Sign Up</span>
<span>Sign In</span>
</div>
</div>
</md-toolbar>
You can insert flexible element between HOME and SIGNUP elements and it will fill the space between them.
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.