3

I am spinning my wheels on what I am sure is a simple mistake.

Consider the following jqm (version 1.3) view (in haml)

#main-header{'data-role' => 'header'}

#main-content{'data-role' => 'content'}   #main-buttons
    %input#a{'type' => 'button', 'name' => 'a', 'value' => 'A'}
    %input#b{'type' => 'button', 'name' => 'b', 'value' => 'B'}

The stylesheet:

#main-buttons {
  margin: 30px;
  margin-top: 160px;
}   

#a {
  margin-bottom: 60px !important;
}

Here the style of margin-bottom I apply to button "a" has no impact. My goal is to add some vertical space between the two buttons. What am I missing?

The rendered UI looks as follows:

rendered ui

Gajotres
  • 57,309
  • 16
  • 102
  • 130
serverman
  • 1,314
  • 5
  • 22
  • 39
  • 1
    Try changing style of `.ui-btn`. – Omar Mar 27 '13 at 18:25
  • 1
    That helped.! Can you add this as an answer so I can mark it. I dont understand though how a style applied to a specific id does not override what is specified in the class. – serverman Mar 27 '13 at 18:54
  • 1
    That's because .ui-btn is a parent of your input button. Also, every .ui-btn override will override whole jQM app. – Gajotres Mar 27 '13 at 19:03
  • I understand the second comment (which is why I did not want to use the .ui-btn override.) Dont understand why .ui-btn override would override the style of a specific element identified by a unique id - does not make sense to me. – serverman Mar 27 '13 at 19:15
  • 1
    Then my advice is use buttons created from a simple a tag. They dont have this problem. You can give them an id and use it to modify them. – Gajotres Mar 27 '13 at 19:20
  • @serverman it's good to hear you have your problem solved :) – Omar Mar 27 '13 at 19:29

4 Answers4

7

Here is my humble answer. The above answers explain more about your issue.

To override button style, add your style to .ui-btn.

I'm glad I have been of help :)

Omar
  • 32,302
  • 9
  • 69
  • 112
2

Solution 1

This is a button created from an a tag.

Here's a working example: http://jsfiddle.net/Gajotres/9bPA2/

<div data-role="content">
    <a data-role="button" id="button1">Button 1</a>
    <a data-role="button" id="button2">Button 2</a>
</div>

#button1 {
    margin-bottom: 50px;
}

Solution 2

This is a button you are using. Unfortunately you can use css to fix it, it needs to be done through jQuery like this:

HTML :

<input type="button" value="Button 3" id="button3">
<input type="button" value="Button 4" id="button4">

Javascript :

$('#button3').parent().css('margin-top','50px');
$('#button4').parent().css('margin-top','50px');

Live example is a part of a top jsFiddle example, so take a look.

Gajotres
  • 57,309
  • 16
  • 102
  • 130
  • Not really, the button id is indeed set to "a". – serverman Mar 27 '13 at 18:52
  • Take a look at a solution 2, this will fix your problem. Basically you cant use an id on your input button because it is wrapped with jQuery custom button. So only solution is jQuery. – Gajotres Mar 27 '13 at 18:54
  • Hi Gajotres, Thanks - I do not want to use javascript to set style for such a simple scenario. I should be able to use simple css for this? It looks like Omar's comment above works (change style of .ui-btn) – serverman Mar 27 '13 at 18:56
1

First make sure that the link to your stylesheet is listed after the link to the jQuery mobile stylesheet in the head section of your HTML page. If two styles conflict, the browser will use the stylesheet that comes second (e.g. the css that is listed lower).

Also, you're adding your margin-bottom to the ID #a. While this is perfectly valid, look through the rest of the css to see if there is a margin applied to an INPUT, because a style applied to a tag outranks the styles applied to an ID.

PixelGraph
  • 221
  • 2
  • 7
1

It is also possible set div-elements around the each button element. Then setting bottom and top margins for those div-elements, buttons are spaced vertically because div elements are then parents of jQuery Mobile .ui-btn:s in the DOM structure.

This way margin settings are not set for the whole application but only for these buttons.

HTML/CSS example:

<div class="ButtonDiv">
    <a data-role="button">Button 1</a> 
</div>

<div class="ButtonDiv">
    <a data-role="button">Button 2</a> 
</div>

<div class="ButtonDiv">
    <a data-role="button">Button 3</a> 
</div>


.ButtonDiv {
margin-top: 8px;
margin-bottom: 8px;
}
Petri Pyöriä
  • 171
  • 5