Page 1 of 1

@media queries no longer reflect in App Builder

Posted: Sun May 24, 2020 11:37 am
by Andy Parker

Hi there,

As I use a lot of CSS formatting in building the pages for my app, when using IONIC 1 I added an @media query to stop the builder processing CSS when editing, and allowing it to process CSS when I went to the preview/test page in full screen.

However, this no longer works in an IONIC4 app builder session.

for example, the app builder still processes all CSS after this command??

@media screen and (min-width: 6000000px) {

Is this something you can fix please?
Or is there a work around for this, because at present, to remove the CSS formatting so I can edit off screen elements (or elements that are covered by others), I have to create an error in the SCSS file....


@media queries no longer reflect in App Builder

Posted: Mon May 25, 2020 7:46 pm
by Serhii Kulibaba

Hello Andy,

The media queries work fine in the SCSS. It might the issue with the style you use here.

Could you please provide us with the exact example which you use here? What components/styles do you need to change with this style?


@media queries no longer reflect in App Builder

Posted: Tue May 26, 2020 8:46 am
by Andy Parker

so here's the line I add to the top of the SCSS file:

@media screen and (min-width: 600px) {

and place the closing } at the end of all entries in the file.

Within the SCSS I am positioning DIVs to exact coordinates in the screen.
These are the main things I want to stop when in the builder screen.

This should stop any CSS being actioned when I'm in the builder, as when I test the app I go full screen.
However, it doesn't seem to matter what figure I use for min-width, the CSS is always actioned in the builder....

This worked in the IONIC1 builder :-)


@media queries no longer reflect in App Builder

Posted: Tue May 26, 2020 4:01 pm
by Serhii Kulibaba

Please provide the exact SCSS code you use here with all styles. Also please provide us with a structure of your page to see how it looks like


@media queries no longer reflect in App Builder

Posted: Tue May 26, 2020 9:34 pm
by Andy Parker

Sorry, here's the exact SCSS code, and I've attached a screenshot of the screen layout design.
//
// lets limit screen build based on whether we are developing, debugging or running
//
@media screen and (min-width: 600px) {

.standardGradBG {
background: linear-gradient(#caf0cf, white) !important;
}

.standardBTNBG_css {
background: linear-gradient(#dcf5df, #edfaef, #dcf5df) !important;
border-style: solid !important;
border-width: 1px !important;
border-color: #96e19f !important;
border-radius: 1vh !important;
color: black !important;
width: auto !important;
text-overflow: ellipsis !important;
overflow: hidden !important;
white-space: nowrap !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 1.2vh !important;
font-weight: bold !important;
color: black !important;
z-index: 100 !important;
margin: 3px 2px 3px 3px !important;
}

.standardBTNBGmedium_css {
background: linear-gradient(#dcf5df, #edfaef, #dcf5df) !important;
border-style: solid !important;
border-width: 1px !important;
border-color: #96e19f !important;
border-radius: 1vh !important;
color: black !important;
font-size: 0.75vh !important;
margin: 0 0 0 0 !important;
padding: 0 0 0 0 !important;
height: 2vh !important;
}

.standardBTNBGsmall_css {
background: linear-gradient(#dcf5df, white, #dcf5df) !important;
border-style: solid !important;
border-width: 2px !important;
border-color: #96e19f !important;
border-radius: 1vh !important;
color: black !important;
font-size: 0.85vw !important;
}

.clearMargins {
margin: 0 0 0 0 !important;
padding: 0 0 0 0 !important;
border: 0 0 0 0 !important;
}

.menuGridRow {
height: 6vh !important;
}

.blackBackground_css {
background-color: black !important;
}
.clearBackground_css {
background-color: white !important;
width: auto !important;
text-overflow: ellipsis !important;
overflow: hidden !important;
white-space: nowrap !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 1.2vh !important;
font-weight: bold !important;
color: black !important;
}
.yellowBackground_css {
background-color: yellow !important;
width: auto !important;
text-overflow: ellipsis !important;
overflow: hidden !important;
white-space: nowrap !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 1.2vh !important;
font-weight: bold !important;
color: black !important;
}
.grayOutline {
border-style: solid solid solid solid !important;
border-width: 1px !important;
border-color: grey !important;
margin: 0 0 0 0 !important;
padding: 0 0 0 0 !important;
background: white !important;
}
.bottomGreyLine {
border-style: none none dotted none !important;
border-width: 1px !important;
border-color: grey !important;
margin: 0 0 0 0 !important;
padding: 0 0 0 0 !important;
background: white !important;
}

.cardTitle {
font-family: Arial, Helvetica, sans-serif !important;
font-size: 1.5vh !important;
color: black !important;
background: linear-gradient(#caf0cf, white, #caf0cf);
font-weight: bold !important;
padding: 0 0 0 0 !important;
}

//
// Site List
//
.sitesListDiv_css {
position: fixed;
top: 5vh;
left: 0;
width: 25vw !important;
height: 44vh !important;
overflow-y: scroll;
overflow-x: hidden;
border-radius: 5px !important;
margin: 0 0 0 0 !important;
border: 1px solid green !important;
padding: 0 0 0 0 !important;
background: linear-gradient(#caf0cf, white) !important;
}

.siteListGridRow {
height: auto !important;
background: white !important;
border-style: none none solid none !important;
margin: 0 0 1px 0 !important;
border-width: 1px !important;
border-color: lightgrey !important;
}

.siteListGridCell {
background: white !important;
}

.siteListItem {
font-family: Arial, Helvetica, sans-serif !important;
font-size: 2vh !important;
color: black !important;
//background: white !important;
margin: 0 !important;
height: 2vh !important;
border: 0 !important;
padding-top: 1px !important;
padding-right: 0 !important;
padding-bottom: 0 !important;
margin: 2px 0 0 0 !important;
width: 100% !important;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}

.siteSmallListItem {
font-family: Arial, Helvetica, sans-serif !important;
font-size: 1.5vh !important;
color: grey !important;
//background: white !important;
margin: 0 !important;
line-height: 1.75vh !important;
height: 1.75vh !important;
border: 0 !important;
padding-top: 0 !important;
padding-right: 0 !important;
padding-bottom: 0 !important;
margin: 2px 0 0 0 !important;
width: 100% !important;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}

.siteListItemLabel_css {
margin: 0 !important;
padding: 0 !important;
}

.sitesListBox {
margin: 0 0 0 0 !important;
padding: 0 0 0 0 !important;
border: 0 0 0 0 !important;
}

.showSite {
height: auto !important;
}
.hideSite {
height: 0 !important;
padding: 0 0 0 0 !important;
margin: 0 0 0 0 !important;
border-width: 0 !important;
}
.siteNotSelected {
background-color:white !important;
}
.siteSelected {
background-color:yellow !important;
}
//
// SITE DETAIL
//
.siteDetailDiv {
position: fixed;
top: 49vh;
left: 0;
margin: 1px 0 0 0 !important;
height: 50.9vh !important;
width: 50vw !important;
border: 1px solid green !important;
border-radius: 5px !important;
background: linear-gradient(#caf0cf, white);
overflow-y: hidden;
overflow-x: hidden;
}

.siteDetailCard {
position: fixed;
top: 49.1vh;
left: 0;
height: 50.25vh;
width: 25vw !important;
border: 1px solid green !important;
margin: 2px 0 0 2px !important;
padding: 0 0 3px 1px !important;
border: 1px solid green !important;
border-radius: 5px !important;
background: linear-gradient(#dcf5df, #edfaef, #dcf5df) !important;
overflow-y: auto;
overflow-x: hidden;
}
.sitesDetailBox {
margin: 2px 0 0 2px !important;
padding: 0 0 3px 1px !important;
}
.siteNameTitle {
font-family: Arial, Helvetica, sans-serif !important;
font-size: 2vh !important;
color: black !important;
background: linear-gradient(#caf0cf, white, #caf0cf);
font-weight: bold !important;
padding: 5px 0 5px 0 !important;
width:100%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}

.siteDetailText {
margin: 7px 0 -7px 0 !important;
padding: 1px 1px 1px 1px !important;
line-height: 1.5vh !important;
height: 1.6vh !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 1.4vh !important;
color: black !important;
}

.siteDetailInputText {
margin: 3px 0 -3px 0 !important;
padding: 1px 1px 1px 1px !important;
line-height: 1.5vh !important;
height: 1.6vh !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 1.7vh !important;
color: black !important;
}

.siteDetailGridRow {
border-style: none none dotted none !important;
border-width: 1px !important;
border-color: grey !important;
margin: 0 0 0 0 !important;
padding: 0 0 0 0 !important;
background: white !important;
}

.updateSiteDetailButton {
color: black !important;
}
.cancelUpdateSiteDetailButton {
}

//
// Contacts Card
//
.contactsCard {
position: fixed;
top: 59.5vh;
left: 25.2vw;
width: 24.4vw !important;
height: 39.85vh;
border: 1px solid green !important;
margin: 2px 0 0 2px !important;
padding: 0 0 3px 1px !important;
overflow-y: auto;
overflow-x: hidden;
}

.contactsTitle {
font-family: Arial, Helvetica, sans-serif !important;
font-size: 2vh !important;
color: black !important;
font-weight: bold !important;
padding: 5px 0 5px 0 !important;
}

.contactsDiv {
width: 100% !important;
height: 36.5vh !important;
overflow-y: scroll;
overflow-x: hidden;
border-radius: 5px !important;
margin: 0 0 0 0 !important;
border: 1px solid green !important;
padding: 0 0 0 0 !important;
background: white !important;
}

.contactsGrid {
background: linear-gradient(white, #edfaef);
}

.contactTypeText {
font-family: Arial, Helvetica, sans-serif !important;
font-size: 1.25vh !important;
color: blue !important;
margin: 0 0 0 0 !important;
padding: 0 0 0 0 !important;
}

.contactTitleText {
font-family: Arial, Helvetica, sans-serif !important;
font-size: 1.25vh !important;
color: red !important;
margin: 0 0 0 0 !important;
padding: 0 0 0 0 !important;
}

.contactName {
font-family: Arial, Helvetica, sans-serif !important;
font-size: 1.5vh !important;
font-weight: bold !important;
color: black !important;
margin: 0 0 0 0 !important;
padding: 0 0 0 0 !important;
}

.contactDetails {
font-family: Arial, Helvetica, sans-serif !important;
font-size: 1.25vh !important;
color: grey !important;
margin: 0 0 0 0 !important;
padding: 0 0 0 0 !important;
}

//
// site Details Buttons
//
.siteDetailsButtons {
position: fixed;
top: 49.1vh;
left: 25.2vw;
width: 24.4vw !important;
border: 1px solid green !important;
margin: 2px 0 0 2px !important;
padding: 0 0 3px 1px !important;
}

//
// button Options Div
//
.buttonOptionsDiv {
position: fixed;
top: 5vh;
left: 25vw;
width: 25vw !important;
height: 44vh !important;
overflow-y: hidden;
overflow-x: hidden;
border-radius: 5px !important;
margin: 0 0 0 0 !important;
border: 1px solid green !important;
padding: 0 0 0 0 !important;
background: linear-gradient(#caf0cf, white) !important;
}
.CPSAutomationImage {
width: 20vh !important;
height: auto !important;
z-index: 1 !important;
//opacity:0.4 !important;
}
.versionNumber {
font-family: Arial, Helvetica, sans-serif !important;
font-size: 1.7vh !important;
color: black !important;
}
//
// search
//
.searchInputText {
margin: 3px 0 -3px 0 !important;
padding: 1px 1px 1px 1px !important;
line-height: 1.8vh !important;
height: 1.8vh !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 1.7vh !important;
color: black !important;
background: white !important;
}
//
// Right side of screen
//
.rightHandScreenDiv {
position: fixed;
top: 5vh;
left: 50.1vw;
width: 49.9vw !important;
height: 94.9vh !important;
overflow-y: hidden;
overflow-x: hidden;
border-radius: 5px !important;
margin: 0 0 0 0 !important;
border: 1px solid green !important;
padding: 0 0 0 0 !important;
background: linear-gradient(#caf0cf, white) !important;
}
.mapsHistoryLogsCard {
position: fixed;
top: 10vh;
left: 50.25vw;
height: 60vh;
width: 49.5vw !important;
border: 1px solid green !important;
margin: 2px 0 0 2px !important;
padding: 0 0 3px 1px !important;
border: 1px solid green !important;
border-radius: 5px !important;
background: linear-gradient(#dcf5df, #edfaef, #dcf5df) !important;
}
.googleMap {
height: 52.9vh !important;
width:100% !important;
}

//
// Map Markers
//
.mapMarkersDIV {
position: fixed;
top: 70.5vh;
left: 50.25vw;
width: 49.5vw !important;
height: 28.9vh;
border: 1px solid green !important;
margin: 2px 0 0 2px !important;
padding: 0 0 3px 1px !important;
border: 1px solid green !important;
border-radius: 5px !important;
background: linear-gradient(#dcf5df, #edfaef, #dcf5df) !important;
overflow-y: auto;
overflow-x: hidden;
}

.mapMarkerIcon {
height: auto !important;
width: 1.5vw !important;
margin: 0 auto 0 auto !important;
padding: 0 0 0 0 !important;
}
.markerOptionIcon {
height: 2.5vh !important;
width: 1.5vw !important;
margin: 0 0 0 2px !important;
padding: 0 0 0 0 !important;
}

//
// Logs
//
.logsDiv {
height: 46vh !important;
width:100% !important;
overflow-y: auto;
overflow-x: hidden;
border-radius: 5px !important;
margin: 0 0 0 0 !important;
border: 1px solid green !important;
padding: 0 0 0 0 !important;
background: linear-gradient(#caf0cf, white) !important;
}

.logsList {
font-family: Arial, Helvetica, sans-serif !important;
font-size: 0.75vw !important;
text-overflow: ellipsis !important;
overflow: hidden !important;
white-space: nowrap !important;
color: black !important;
}

//
// Add new site Card
//
.addNewSiteCard {
position: fixed;
top: 23vh;
left: 26vw;
width: 23vw !important;
height: 18vh !important;
overflow-y: hidden;
overflow-x: hidden;
border-radius: 5px !important;
margin: 0 0 0 0 !important;
border: 2px solid green !important;
padding: 0 0 0 0 !important;
background: linear-gradient(#caf0cf, white) !important;
}
//
// Select Team
//
.teamsDiv {
position: fixed;
top: 18vh;
left: 30vw;
width: 15vw !important;
height: 30vh !important;
overflow-y: hidden;
overflow-x: hidden;
border-radius: 5px !important;
margin: 0 0 0 0 !important;
border: 2px solid green !important;
padding: 0 0 0 0 !important;
background: linear-gradient(#caf0cf, white) !important;
z-index:10;
}
.teamListDiv {
width: 13vw !important;
height: 18vh !important;
overflow-y: auto;
overflow-x: hidden;
z-index: 20;
padding: 0 0 0 0 !important;
}
}
Image


@media queries no longer reflect in App Builder

Posted: Thu May 28, 2020 2:44 pm
by Serhii Kulibaba

What exactly doesn't work here?
Please check the current CSS code in the dev tools tab of your browser.

We need to know a code that you use and a description of what is not working. Example:

my code is:pre.mybutton{
background:red;
}
@media screen and (min-width: 600px) {
.mybutton{
background:blue;
}
}
/pre
and the description: the color is red as for the screen width < 600px as 600px


@media queries no longer reflect in App Builder

Posted: Fri May 29, 2020 10:16 am
by Andy Parker

basically, in the IONIC1 builder, I could wrap all of my CSS inside of the @media query to stop any CSS getting processed when in the builder.

With the builder having a small screen size, that stopped any of the CSS from being processed.

as an example, if this was the only entry in the SCSS file, then I would not expect the DIV element referencing myDIV to get processed until I expand the screen size....however, it always gets processed:

@media screen and (min-width: 600px) {
.myDIV{
position: fixed;
top: 20vh;
left: 40vw;
height: 30vh;
width: 20vw;
}
}


@media queries no longer reflect in App Builder

Posted: Mon Jun 01, 2020 12:39 pm
by Serhii Kulibaba

Please create a new page with a simple label with a custom class "mybutton" and use my SCSS above, it works fine.
It seems something wrong with your custom styles, if it will work for you, but not working with your styles.