Andy Parker
Posts: 0
Joined: Wed Mar 27, 2013 10:21 am

@media queries no longer reflect in App Builder

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....

Serhii Kulibaba
Posts: 150
Joined: Tue Aug 27, 2013 1:47 pm

@media queries no longer reflect in App Builder

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?

Andy Parker
Posts: 0
Joined: Wed Mar 27, 2013 10:21 am

@media queries no longer reflect in App Builder

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 :-)

Serhii Kulibaba
Posts: 150
Joined: Tue Aug 27, 2013 1:47 pm

@media queries no longer reflect in App Builder

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

Andy Parker
Posts: 0
Joined: Wed Mar 27, 2013 10:21 am

@media queries no longer reflect in App Builder

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

Serhii Kulibaba
Posts: 150
Joined: Tue Aug 27, 2013 1:47 pm

@media queries no longer reflect in App Builder

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

Andy Parker
Posts: 0
Joined: Wed Mar 27, 2013 10:21 am

@media queries no longer reflect in App Builder

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;
}
}

Serhii Kulibaba
Posts: 150
Joined: Tue Aug 27, 2013 1:47 pm

@media queries no longer reflect in App Builder

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.

Return to “Issues”