The Ion-button seems to be malfunctioning

I am interested in using special buttons for my ionic 1 project, specifically the ion-button feature outlined on this page: Ionic Buttons. I attempted to create a Round Button and an Outline + Round Button:

  <h2 class="sub-header" style="color:#4e67c3;">Oggetto {{ selectedproduct.idproduct }} <img src="img/cart.png" height="30" width="38"></h2>   

  <ul class = "licatalog">

    <li>
        <h4 style = "color:#4e67c3;"> {{ selectedproduct.productDesc.description }} </h4>
        <h4 style = "color:#FF2E24;"> {{ selectedproduct.productDesc.producer.name }}  </h4>
        <h4> [sconto per utenti registrati]  </h4>
        <h4> € {{ selectedproduct.productDesc.price }} </h4>
        <img src="../img/product/{{ selectedproduct.productDesc.rootImage }}" height="130" width="100">
    </li>     


  </ul>
    <button ion-button round>Round Button</button>
    <button ion-button round outline>Outline + Round</button>

Unfortunately, the buttons are not displaying correctly, appearing as simple buttons instead of the desired customized ones:https://i.stack.imgur.com/19NN9.png

If anyone has insights on how to properly implement these buttons, I would greatly appreciate it. Thank you!

javascriptcssbuttonionic-framework

Answer №1

If you are currently using ionic v1, I would strongly suggest upgrading to a later version as there are more helpful tutorials and fewer bugs.

For those sticking with v1, it is important to refer to the correct documentation: https://ionicframework.com/docs/v1/components/#buttons

When implementing buttons in your code, use the following syntax:

<button class="button button-positive">
  button-positive
</button>

<button class="button button-outline button-positive">
  Outlined Button
</button>

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

3 Offset Columns in Bootstrap 1.5

I'm currently brainstorming a Bootstrap 3 grid design that features a top row with 4 columns and a bottom row with 3 columns centered against the first row like this... https://i.sstatic.net/e1V62.jpg Although I've considered using offsets, uti ...

htmlcsstwitter-bootstrap-3

What is the Next.js equivalent of routing with rendering capability for nested component paths?

I am new to Next.js and so far have been loving the experience. I'm a bit stuck on how to achieve the equivalent of the following code in Next.js These are all client-side routes that render nested components on the user page. The value of ${currentP ...

javascriptreactjsreact-routernext.js

What causes Safari to display a black border around resized videos?

I've come across a strange issue while using Safari. Whenever I try to play an MP4 video with dimensions of 1920 * 1080, and resize the Safari window to a width of 937px, something strange happens: https://i.stack.imgur.com/oI50i.png A black border ...

cssvideosafari

Issue encountered during installation of the robotjs npm package

Would appreciate any assistance with troubleshooting this issue. I've been grappling with it for 3 days, putting in countless hours of effort. The problem arises when attempting to install the robotjs npm package, as errors keep popping up. I've ...

javascriptnode.jsnpmautomationnpm-install

Is there a way to exclude the Unicode character from the first menu item while still utilizing it in the other items on my menu?

I have been working on customizing my menu by using the unicode character \25C6 to represent a black solid diamond as a spacer between labels. After searching for solutions on Stack Overflow, I attempted to implement the suggested method using the bef ...

csswordpressmenuicons

Tool for obfuscating client-side files using node.js

I'm in search of a tool similar to the one found at but in the form of a node.js module, allowing for obfuscation of client-side js files prior to transmission. The tool mentioned above performs various tasks, with its most crucial function being th ...

javascriptnode.jsobfuscation

Tips for extracting HTML entities from a string without altering the HTML tags

I need assistance with removing HTML tags from a string while preserving html entities like &nbps; & é < etc.. Currently, I am using the following method: stringWithTag = "<i> I want to keep my ->&nbsp;<- element space, bu ...

javascripthtmltagsentityinnerhtml

Interactive Thumbnail Previews

There seems to be an issue with the thumbnail links on my page. The leftmost and rightmost links work fine, but the middle ones are not functioning properly when clicked. The PHP code used to generate these links is the same for all of them, so it's p ...

javascriptphphtmlcss

Navigating data within a JSON file with D3 javascript: a step-by-step guide

Currently, I am attempting to extract and manipulate data from a JSON file using D3 Javascript. Below is the content of the JSON file: { "Resources": [ { "subject": "Node 1", "group" : "1" }, { "predicate": ...

javascriptjqueryjsond3.js

GET method returns an empty array in the express node server

app.get('/:user/:tag', function (req, res) { fs.readdir( 'api'+path.sep+req.params.user, function (err, files) { var tweets=[]; for (var i =1, j=files.length ; i <j; i++) { fs.readFile('api'+path.sep+ ...

javascriptajaxnode.jsexpresscallback

Add elements from one array into designated positions within another array

Is there a way to extract the days and months from the current week and store it in an array within a specific field of an object? I need to be able to later iterate through this array to display the data. I am unsure on how to achieve this. <div v-for ...

javascriptvue.jsnuxt.js

PHP not receiving values when making an AJAX POST request

My AJAX file below is where I pass all the values from my text boxes and post them to edu.php. In edu.php, I intend to update two tables - details and test. However, nothing seems to be updating in my database. When I checked the values with var_dump, the ...

javascriptphpjquerymysqlajax

Updating a component from a different source

As a newcomer to React, I'm curious about the ability to update one component's content based on events from another component. I have two React components set up. The first component loads data when the page initializes, while the second compon ...

javascriptreactjs

Tips for refreshing the appearance of a window in angular when it is resized

I have a chat feature integrated into my application. I am looking to dynamically resize an image within the chat window when the width of the window falls below a certain threshold. Is there a method available to modify the CSS style or class based on the ...

cssangulartypescript

How can I dynamically insert a new HTML element into $event.target using Angular 2?

I have a webpage with a list of items. I want to display a "copy" button next to each item when the mouse hovers over it. I am currently able to create the "copy" button within the element using the following method: mouseOver(event) { if (event.tar ...

javascripthtmlangulartypescript

I am having trouble getting the Express Router delete method to function properly when using mongoose with ES8 syntax

I was working on this code snippet : router.delete('/:id', (req, res) => { Input.findById(req.params.id) .then(Input => Input.remove().then(() => res.json({ success: true }))) .catch(err => res.status(404).json({ success: f ...

javascriptexpressmongooseasync-await

AngularJS: How can components effectively communicate with each other using best practices?

I've been struggling to figure out how to facilitate communication between components. The primary question that has stumped me is: when should I opt for $watch versus $on ($broadcast/$emit) to establish component communication? I've identified ...

javascriptangularjs

React: The issue with async and await not functioning as expected when using fetch

I am working with an API on a Node server that returns JSON data like this: {"result":[{"ProductID":1,"ProductName":"iPhone10","ProductDescription":"Latest smartphone from Apple","ProductQuan ...

javascriptjsonreactjsfetch-api

Using AngularJS to fetch images from RSS feed description

I'm currently learning AngularJS by creating a simple RSS feed. I have successfully made a JSON request and fetched all the data including title, link, description, and images from the RSS feed I parsed. The code snippet for extracting images looks li ...

javascriptangularjsrss

What is the best way to incorporate async and await into my functions within a Node.js environment?

I attempted to implement asynchronous functionality into my code, however, I encountered some difficulties. What steps should I take next? Below are the functions in question: 1. router.post('/urls', (req, response) => { count = 2; webUrl ...

javascriptnode.jsasync-await