I'm building a Rails app with Bootstrap 4. I have a number of large tables to display and since the app users are not very tech-savvy I would like to display a hint when a full table doesn't fit their screen and becomes scrollable. Any tips on how to achieve this?
You can add a alert with class="something".
<div class="alert alert-primary something" role="alert">
The table is scrollable!!!
</div>
Then, In the CSS file you can do:
.something{
display: none;
}
Then also write a media query to update the something class to display block.
#media (min-width: 576px) {
.something{
display: block;
}
}
Result: It'll not display the alert until the window size reduced to 576px.
Related
I'm trying to print a page from my custom DNN module, without the persona bar, while logged in as an admin. I tried creating a custom skin but still can't prevent the persona bar menu titles from displaying on my print. I've posted this issue on the DNN community forum but never got any response.
This is working for me...
#personaBar-iframe{ display: none; }
iframe#personaBar-iframe{ display: none; }
.pb-scroll-wrapper{ display: none; }
.pb-scroll-wrapper iframe#personaBar-iframe.ipad{ display: none; }
I found this in DesktopModules\Admin\Dnn.PersonaBar\css\personaBarContainer.css.
Thanks VDWWD for steering me in the right direction.
The problem probably is that the Persona Bar is created within a Iframe with javascript. So if you hide the entire iframe during print it might work.
#media print {
#personaBar-iframe {
display: none !important;
}
}
The Persona Bar Iframe looks like this:
<iframe id="personaBar-iframe" allowtransparency="true" scrolling="false" src="/DesktopModules/admin/Dnn.PersonaBar/index.html?cdv=59" style="width: 80px;" frameborder="0"></iframe>
The files are located in folder \DesktopModules\Admin\Dnn.PersonaBar
Is it possible to have a regular text menu on one page (for example: the homepage) and a mobile ("hamburger") menu on all other pages regardless of screen size?
How might that logic work in Bootstrap and/or AngularJS?
Yes it is possible, but your have to code for both menu.
For bootstrap normal menu bar just add the classes hidden-xs hidden-sm so that it will hide on mobile view port
And then for hamburger menu just add the class hidden-md hidden-lg hidden-xl This will hide the hamburger for desktop and other screen viewports
1) you need to have 2 menu:
(a) class="mobile-menu"
(b)class ="desktop-menu"
You can add for home page to body, or html or any upper wrapper you have(class="home" or etc. something similar), and than hide mobile menu for index, and for other pages hide desktop menu
so you should have in css something like that
.home .mobile-menu{
display: none;
}
^this will hide mobile only for page marked as home
.desktop-menu{
display: none;
}
.home .desktop-menu{
display: block;
}
I´m trying to do the following on a website. I guess it´s quite simple for thoose who have programmed alot but for me it´s new. Can someone show me how to code this? Thanks!
Layout on computer screen and mobile screen
You need to use media queries to make your HTML and CSS code produce different results in user's browser on different devices.
Media queries usually based on max-width of the browser viewport.
So, if browser viewport will be less than 800px wide, additional styles will be applied.
.box
{
display: inline-block;
margin: 0 10px;
width: 180px;
height: 180px;
border: 1px solid #CCC;
background: #DDD;
}
#media screen and (max-width: 800px)
{
display: block;
}
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
For iPads & iPhones
If you need to have different layouts on iPads and iPhones, you need to take proper media queries from this article: http://stephen.io/mediaqueries/.
You have to write specific CSS rules for each device you'd like to support in particular.
Layout examples:
Desktop layout
Tablet layout
Phone layout
(Pictures are from w3schools.com)
About media queries:
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
http://www.w3schools.com/css/css_rwd_mediaqueries.asp
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Is there some way to provide different image sizes for the carousel for different screen sizes ? I understand the CSS media query can get this information to provide different CSS settings for different devices/screens, but I don't see anyway to pass this information into the carousel. For a full-screen carousel this seems to mean it only works properly on devices matching the image size.
You could make the images take up a certain percentage of the screen by scaling them.
ons-carousel-item {
text-align: center;
}
ons-carousel-item img {
width: 95%;
}
And the carousel:
<ons-carousel overscrollable auto-scroll fullscreen var="carousel">
<ons-carousel-item>
<img src="http://placehold.it/350x150">
</ons-carousel-item>
<ons-carousel-item>
<img src="http://placehold.it/700x100">
</ons-carousel-item>
</ons-carousel>
I'm using Ionic Framework to develop a mobile application for Android.
My issue is that I need to have a list of containers at random positions and are able to be clicked.
The list of containers are displayed correctly at the random positions but the click areas only work when i click at the top of the view, not at the position itself.
The clicking works fine in the mobile browsers at the correct position but when I run the app as a native application in Android, the clicks messed up.
It seems like clicking areas are lined up at the top of the view, does anyone know what is causing this?
The codes are here:
HTML file
<div class="col" ng-model="qtablelayout">
<div qtable ng-model='qtable' ng-repeat='qtable in qtablelayout.qtables' class="tablediv" ng-class="qtable.tstatus" ng-style="{'left': {{qtable.x}}+'px', 'top':{{qtable.y}}+'px'}" ng-click="tblActions(qtable)">
<h2>{{qtable.tableNo}}</h2>
<ul>
<li class="tablesize">{{qtable.currentHP.qsize}}/{{qtable.maxSize}}</li>
<li class="tabletime">{{qtable.tabletime.hours}}h {{qtable.tabletime.mins}}m {{qtable.tabletime.secs}}s</li>
</ul>
</div>
</div>
CSS file
div.tablediv
{
position: absolute;
background: url("../img/table/tablestatus.png") no-repeat;
color: #fff !important;
width: 178px;
height: 178px;
padding: 0;
margin: 0;
text-align: center;
display: block;
overflow: hidden;
}
The Controller side
$scope.tblActions = function(m)
{
alert("x:" + m.x + ",y:" + m.y);
}
I found out the cause of the problem is that I had an Ion-Refresher before the list of containers and it seemed to have shifted up the clicking areas together with the space for the Ion-Refresher.
It worked when I put the Ion-Refresher at the bottom of the HTML.