How can I shift the button's location within a pop-up in Ionic 1?

enter image description here

I am struggling to make the button green underneath the three other buttons. Can someone please assist me with this?

Here is my code:

 $scope.showIntroductionPage = function(childs){
  if(childs == 0){

    var myPopup = $ionicPopup.show({

    title: 'Welcome to Lens Changer',
    subTitle: 'You can choose an option!',
    cssClass: 'popup-intro',

    buttons: [
      { type: 'button-assertive',
        text: '<b><font size="2">Parent</font></b>',
        cssClass: 'button-popup_red',
        onTap: function(e) {

        }
      },
      { type: 'button-energized' ,
        text: '<b><font size="2">Educator</font></b>',
        onTap: function(e) {

        }
      },
      { type: 'button-calm' ,
        text: '<b><font size="2">Sign in</font></b>',
        onTap: function(e) {

        }
      },
      { type: 'button-balanced',
        text: '<div><b><font size="2">Ready</font></b></div>',
        onTap: function(e) {
          myPopup.close();
        }
      }
      ]
    }

  );
};
  • I cannot figure out how to change the color of this button to green.

Please note that in order to display HTML tags as text, you need to properly escape special characters like '<' using code formatting or HTML entities.

Allowed Attributes

img Attributes

Answer №1

Although I have not personally used this before, it seems like it could be beneficial.

buttons: [
  {
    text: '<div>'
  },
  { type: 'button-assertive',
    text: '<b><font size="2">Parent</font></b>',
    cssClass: 'button-popup_red',
    onTap: function(e) {

    }
  },
  { type: 'button-energized' ,
    text: '<b><font size="2">Educator</font></b>',
    onTap: function(e) {

    }
  },
  { type: 'button-calm' ,
    text: '<b><font size="2">Sign in</font></b>',
    onTap: function(e) {

    }
  },
  {
    text: '</div>'
  },
  { type: 'button-balanced',
    text: '<div><b><font size="2">Ready</font></b></div>',
    onTap: function(e) {
      myPopup.close();
    }
  }
  ]

This is the outcome of my implementation:

see image here for details

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

CSS :target activates on hover instead of click

I have a slider that is currently functioning well. However, I am facing a small issue. I would like to change the slider image when hovering over one of the <li> elements, instead of clicking on them. Is this achievable? I came across this referenc ...

What is the best way to ensure that the width of a div fills its parent container?

I need my divs(.give, .sep, .take) to completely fill the width of its parent container (.trade). This is the HTML code: <div class="trade"> <div class="give"></div> <div class="sep"></div> ...

Model updating with the addition of an item and triggering a secondary ng-repeat for refreshing

As I was working on the phone tutorial, I found myself pondering how to implement a specific use case. The browser renders a list of phones. When the user clicks on add phone for one of these phones, the function addItem is triggered and adds that phone ...

Detect issues using AngularJS and Restangular

I'm struggling with this code snippet: MyService.one($routeParams.wuid).doGET('test').then(function(e){ alert('ok'); }, function errorCallback(response){ alert('error'); }); When calling the API I set up ...

How can I implement a scroll bar in Angular?

I am facing an issue with my dialog box where the expansion panel on the left side of the column is causing Item 3 to go missing or appear underneath the left column when I expand the last header. I am looking for a solution to add a scroll bar so that it ...

Unable to traverse the drop-down menu while utilizing ng-repeat

Recently, I encountered an issue with a drop-down menu that I populate using ng-repeat: <div class="btn-group btn-xs" dropdown keyboard-nav> <input id="simple-btn-keyboard-nav" ng-model="available_fields_query" id="single-button" dropdown-toggl ...

Attempting to implement scroll-based animation on my webpage

Having trouble integrating this animation (from codepen) into my website. It works fine on its own, but when I try to add it to my site, it doesn't show up. I want it to appear in the middle at the bottom of the background image. Check out the codepe ...

Choosing between setting a height of 100vh versus a minimum height of 100vh

In the development of my app, I noticed an interesting issue. When I set the background on the html with a height of 100vh and resize the viewport to cause vertical overflow, the background does not cover the overflowed content: html { height ...

A Guide to Displaying HTTP Error Messages on the Angular Login Page

When encountering a form validation failure on my login page, I utilize ngMessage to display an error message. However, I now want this div to be displayed in the event of an HTTP 500 error. While I can retrieve the corresponding error message when an HTTP ...

PHP Random Background Image Selector

I have a PHP code that is currently displaying a random header image every time the page is refreshed. While this works fine, I now need to add specific background-position css properties to some of the images. For instance, I would like 'headerimage ...

Tips for updating the color of the first td element in a table using a specific class

Below is the CSS code for my table: table.show-my-request-table { border: 1px solid black; margin-left:auto; margin-right:auto; border-collapse: collapse; } tr.show-my-request-table-header{ border: 1px solid black; } tr.show-my-requ ...

Problem with selecting odd and even div elements

I have a div populated with a list of rows, and I want to alternate the row colors. To achieve this, I am using the following code: $('#PlatformErrorsTableData').html(table1Html); $('#PlatformErrorsTableData div:nth-child(even)').css(" ...

How to fix the issue of the mobile Chrome bar occupying part of the screen height in CSS

I am encountering a well-known issue with my collapsible scrollable bar implemented in Bootstrap. The problem occurs when scrolling on mobile devices, as the search bar takes up space from the sidebar's 100% height, causing the scrollbar to not reach ...

Troubleshooting problems with displaying views due to asynchronous $http.get calls in AngularJS

Within my application, I am utilizing two separate API calls. The initial call retrieves a catalog of services along with their unique ID's. Subsequently, once the ID information is acquired, a second call is made to retrieve pricing data for each cor ...

The back button on an Angular JS application should display a confirmation dialog when pressed

I am currently working on an AngularJS mobile app that consists of various modules. One of my requirements is to access the device's back button within the application, and I also need a dialog with "OK" and "Cancel" options. Clicking on "OK" should ...

The URL switches back and forth from "localhost:8100" to "localhost:8100/some-route" while displaying a blank white screen

After working on my ionic app without any issues, I restarted my computer only to find that when I tried to run the project again, I was met with a blank white screen on both the browser and device. Even when I reverted back to an earlier branch, the URL c ...

Troubleshooting issues with jQuery background-position animation and CSS sprites functionality

Trying to add animation to my navigation links background using a Css sprite. Check out the picture here: $(document).ready(function(){ $('nav a') // Move the background on hover .mouseover(function(){ $(this).stop().animate({ba ...

The Model Viewer module is unable to load the three-dimensional model

Attempting to incorporate a 3D model into my website using the modelviewer library, but encountering difficulties in loading the file as shown below: Just to note, I am utilizing github pages with a custom domain from godaddy which may be contributing to ...

The 1st DIV element nudges the content within the 2nd DIV Element, causing it to stretch beyond the screen with 100%

I have gone through several other questions, but I am struggling to integrate the solutions into my problem. My main content DIV is set to 100% height and works perfectly fine until I add another element outside of the DIV towards the top of the browser. ...

Having Trouble with Your Instafeed Script

I've been working on a project that involves integrating an Instagram feed into a website. However, I'm facing difficulties getting it to function properly. Here's the code that I have implemented. <script type="text/javascript"> ...