Is there a way I can force the layout to change from landscape to vertical while it is being viewed on a mobile divice? I have a page with a large table that cuts the table off when viewed on a mobile divice. I want it to automatically lock in a vertical orientation while on a mobile divice so that the table displays properly.
I know I can detect the screen size and also do my own media queries, but how can I force the layout to shift?
From the Official Docs:
http://foundation.zurb.com/docs/media-queries.html
CSS:
/* Apply styles to screens in landscape orientation */
#media only screen and (orientation: landscape) {}
/* Apply styles to screens in portrait orientation */
#media only screen and (orientation: portrait) {}
Sass/SCSS:
/* Apply styles to screens in landscape orientation */
#media #{$landscape} { }
/* Apply styles to screens in portrait orientation */
#media #{$portrait} { }
Related
Hello R Studio Community,
I've been developing an app in Shiny and it's be great. I have one simple question.
As different browsers have different widths, is there a way to set the rule on resizing the Shiny dashboard based on the following:
1) If browser width is more than x, limit to width to x and center the entire dashboard
2) If browser width is less than x, follow default autosizing
3) Not essential. But how do I set the blank space color to the left and right of the dashboard
The motivation is that I need a fixed width so that some pictures are scaled correctly. I hope my request can be done through some div tag on the dashboardPage.
This is the current behavior which I do NOT want.
Shiny dashboard stretches to fit window
Cheers,
Donny
Hi to achive what you are asking for just add the following code to the beginning of your dashboardBody. something like this
dashboardBody(
tags$head(
tags$style(
"body{
min-height: 611px;
height: auto;
max-width: 800px;
margin: auto;
}"
)
),
... #the rest of you ui code
hope this helps
I am attempting to add a fade-in/fade-out effect to a widget (that contains other widgets, including buttons and text fields).
The problem is that while buttons fade perfectly, text fields do not - instead of changing opacity of the text field, only the opacity of its border changes.If the text has been selected before changing opacity, after the opacity is reduced, the selection looks strange.
What can be the cause of this problem and how to make the fade effect on all widgets, not only push buttons?
The problem can be easily reproduced, if you place a QTextField on form, and add the following code to button handlers:
void MainWindow::on_pushButton_3_clicked()
{
QGraphicsOpacityEffect * effect = new QGraphicsOpacityEffect(ui->plainTextEdit);
effect->setOpacity(0.1);
ui->plainTextEdit->setGraphicsEffect(effect);
}
After this code is run, you will see something like this:
Image1
void MainWindow::on_pushButton_4_clicked()
{
QGraphicsOpacityEffect * effect = new QGraphicsOpacityEffect(ui->plainTextEdit);
effect->setOpacity(1.0);
ui->plainTextEdit->setGraphicsEffect(effect);
}
The text field looks like this, after this method is executed:
Image2
Thanks.
By default, the caption of the ZURB Foundation clearing lightbox is located below the image.
Does anybody know how I can position it above the image?
You can move the caption to the top with a simple CSS fix. The bottom property of the clearing-caption class is set to 0 by default. Changing this property to auto will move the caption to the top.
.clearing-caption {
bottom: auto
}
I have images in a table and want to click on each and have them enlarged on the screen. I can find alot of these snippets online but none I have found allow for writing text over the enlarged images. These pix are artwork and need a copywrite statement on top of them when enlarged. Anyone know either how to do this or where to find it online....thx....David
The only way I can find to add text over an image is to create the image as the background. Setting up a division and table allowed me to only have the background apply to a certain area of the screen.
You can try this code :
<div id="lare_img">
<div class="copyright">Your copy right text here </div><div class="img_file"><img src="img_01.jpg"></div></div>
and style CSS :
<style>
#lare_img{
width:100% // change to your image large width ;
height:100% // change to your image large height;
position:absolute;
}
.copyright{
position:absolute;
bottom:20px;
left:20px;
z-index:999;
}
.img_file{
width:100%;
height:100%;
float:left;
}
</style>
I am trying to modify the QTableView to always show all editors. I am ok with the workaround to call openPersistentEditor() on all cells.
However I'd like the content of the cells to not be selected and no text cursor for empty fields.
This is what I get:
And this is what I'd like to have:
I tried using clearSelection() and clearFocus() but that does not do the trick. If I click on each cell I get the desired result and I could do the same thing programmatically, but I'd to know if there's a more direct way.
I had this exact same issue. I ended up just adjusting the selection color and selection background color on the QLineEdits. You can do it on all QLineEdits or just on a custom QLineEdit by giving each editor an object name and referencing that in the stylesheet.
/* applies to all QLineEdits in the application */
QLineEdit {
selection-background-color: white;
selection-color: black
}
/* applies to all QLineEdits with the object name "custom" in the application */
QLineEdit#custom {
selection-background-color: white;
selection-color: black
}