Having difficulty adjusting the height of my ionic button-bar

I am currently developing a mobile application using the ionic framework. I would like to make the button bar slightly smaller in size. Despite trying the code below, it does not appear to be having any effect.https://i.sstatic.net/QwakX.jpg

    <div class="button-bar" style="height:1%;">
        <button class="button button-outline button-full button-energized"><b>Connection</b></button>       
        <button class="button button-outline button-full button-energized"><b>
        My Music</b></button>    
    </div>
htmlcssangularjsionic-framework

Answer №1

Unable to utilize ionic classes within jsfiddle, try the alternative approach:

    <div class="button-bar" style="height:50px;">
        <button class="button button-outline button-full button-energized">  <b>Connection</b></button>       
        <button class="button button-outline button-full button-energized"><b>
        My Music</b></button>    
    </div>

Opt for a pixel value over percentage as it suits better in this scenario where a parent container has a fixed height.

To target individual buttons, consider styling them separately:

       <div class="button-bar"">
            <button class="button button-outline button-full button-energized" style="height:50px;>  <b>Connection</b></button>       
            <button class="button button-outline button-full button-energized" style="height:50px;><b>
            My Music</b></button>    
        </div>

Suggesting to create a separate stylesheet and target either the button-bar or directly the buttons like so:

CSS:

.button {
  height: 50px;
}

or

.button-bar {
  height: 50px;
}

Answer №2

It appears that there is a minimum height being applied to the button in ionic.css. You can override this by using the following CSS rule: .button-bar .button {min-height: specify desired pixel value here}

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

Combining multiple images in a single row using CSS and Div tags

Insert this code for each image <div class="side-by-side"> <a href="http://example.com ....> (insert the entire image code here) </div> Here is the CSS snippet .side-by-side { float: left; margin-right: 5px } It's functional... ...

css

AngularJS: accessing nested objects with dynamically assigned model names

My task involves working with an array of variable names, for example: var names = ['address.street','address.city']; To create input fields using AngularJS based on these variable names is a straightforward process: <div ng-repea ...

javascriptangularjs

Using JavaScript to convert the text within a div into negative HTML code

I am working with this specific div: <div class="signs" id="signs" onclick="toggle()">&#43;</div> It currently displays the positive sign. I have set up a JavaScript function that is triggered when the div is ...

javascripthtmlcssfunctiontemplates

Challenges Arising from Creating an EPL Trivia Game with HTML and Javascript

Having some issues with this game functioning properly. Trying to create a dropdown menu that lists 20 EPL teams, and upon selecting a team, display that team's information in a form. Unfortunately, I'm encountering difficulties with the code. An ...

javascripthtml

Issues with Angularjs $http.get functionality

On the server side of my ASP.net MVC application, I have a method that looks like this: [HttpGet] public JsonResult GetTrenings(string treningId) { var tempId = Guid.Parse(treningId); var trening = TreningService.GetTreningById ...

javascriptasp.net-mvcangularjshttp-get

Verify that the value being returned is in the form of a promise

Provided an angular controller containing the following function: this.checkResponse = function (response) { if (response.success === true) { return $q.resolve(response); } else { return $q.reject(response); } }; I am looking to test with J ...

javascriptangularjsjasmineangular-promise

What order should jquery files be included in?

Today I ran into an issue while trying to add datepicker() to my page. After downloading jqueryui, I added the scripts in the following order: <script type="text/javascript" src="js/jquery.js"></script> <script src="js/superfish.js">< ...

javascriptjqueryhtmlajaxjquery-ui

Trouble displaying REACT.jsx in browser

I'm currently learning React and struggling to get it running smoothly. HTML function Person(){ return ( <div class="person"> <h1>Max</h1> <p>Your Age: 28</p> </div> ); } ...

javascripthtmlreactjs

Align items centrally based on overflow in Bootstrap

Below is a concise code snippet that showcases the 'issue': <div class="container-fluid" style="text-align: center"> <h1>REALLYLONGWORDTHATISNOTENDINGANYTIMEINSTEAD</h1> <button class="btn">ANOTHERSUPERLENGTHYTEXTCANA ...

htmlcsstwitter-bootstrap

Finding every instance of a specific day within a month

I am in need of a function that can provide me with all the occurrences of a specific day within the current month. I have the first and last day of the month, as well as the length of the month. While I have come across functions that offer the next occ ...

javascriptangularjsunderscore.js

What is the best way to define line length in Bootstrap?

I have the following HTML: .line { width: 100%; height: 14px; border-bottom: 1px solid lightgrey; position: absolute; } .circle { height: 24px; width: 24px; background-color: lightgrey; border-radius: 50%; display: inline-block; } < ...

htmlcssbootstrap-4

Creating a dropdown menu utilizing JavaScript/jQuery arrays

Looking to create an HTML select menu using a JavaScript array where the keys are used as values for options. The challenge is when entering numbers as keys, they should be accepted in the code. a([selected="No of rooms", 1="1", 2="2", 3="3", 4="4", 5="5" ...

javascriptjqueryhtmlarraysfor-loop

In CSS, Internet Explorer fails to recognize the margin-bottom property of the last div

I have a container with three divs: header, content, and footer, set up in a standard application format. Here is the structure: <body> <div> <div id="ROOT" > <div id="ROOT_0" > Header ...

cssinternet-explorermargin

Showcasing a graphical representation with the help of Highcharts

I am currently exploring JavaScript and trying to familiarize myself with interactive charts using the HighCharts library. Unfortunately, I have been facing some challenges in getting the graph to print correctly. Despite attempting various examples, none ...

javascripthtmlchartshighcharts

Obtain the Chosen Item from a List Box Using JQuery and Separate by Commas

Seeking further assistance with the following issue. I have set up the code on jsfiddle at... http://jsfiddle.net/justinerswell/feDTU/ I am looking to extract the last item in the substr and then work backwards to fill in the necessary fields. Appreciat ...

jqueryhtmlloops

What is the process for transforming a `json query` into a `sql query`?

I have developed an AngularJS application that generates queries in JSON format, incorporating various tables, fields, and operators such as "join", "inner", "where", "and", "or", "like", and more. The AngularJS app transmits these JSON queries to my Djan ...

sqlangularjsjsondjango-rest-frameworkcode-translation

How can you apply the ngStyle directive to set the CSS property for the Angular Material Data Table header aligning it to

For this demonstration, I am attempting to dynamically set the left CSS property of the CUSTOMER mat-header-cell to 64px using ngStyle. However, it seems that Angular is overriding the value with its own interpretation, changing it to 216px after applying ...

htmlcssangulartypescriptangular-material

AngularJS dropdowns have dependencies on each other

I'm a beginner in AngularJS and I'm attempting to create a dropdown menu that is dependent on another dropdown menu. These are the data sets I have: $scope.objectives = [ {objective: 'LINK_CLICKS'}, {objective: 'MOBILE_A ...

javascriptjqueryangularjs

focusing on a single div amidst a sea of interwoven dynamically generated divs

I am currently working with the liferay framework and I am facing a challenge where I need to apply inline JavaScript to target a very specific div on my webpage. The catch is that this div is nested within multiple dynamically added divs with varying clas ...

javascriptjqueryhtmlcss

Issues with the jQuery slideToggle Method

Can someone assist me in identifying the issue with this code? I am attempting to implement a basic slideToggle functionality! Here is my initial attempt: $("..").slideToggle(..,..,..) This is what my current code looks like: My code: $(document).rea ...

javascriptjqueryhtmlcssslidetoggle