Question

When I add a padding-left to class ui-block-b it has the side effect that my fixed navbar gets this padding as well, which I do not want. I would like only to apply the padding to the ui-block-b in my ui-gid-a. So I tried to add a new class ui-block-b-own but i do not get the padding in ui-block-b:

CSS:

.ui-block-b-own {
   padding-left: 10px !important
}

And this is the code:

function showDetails(index){

var suchresultat = search(); // gets either rezepte or result

$("#rezept h1").html(suchresultat[index].name);


    var inhalt = "";

var p = suchresultat[index].portionen; 
var m = suchresultat[index].menge;
var z = suchresultat[index].zubereitung;


 var textM = "";
 var textZ = "";


 for( var i = 0; i < m.length; i++ )
 {
       textM += "<br />" + m[i];
 }  

for( var i = 0; i < z.length; i++ )
 {
       textZ += "<br />" + z[i];
 }  

var por;
if (p == 1){  
por = "Portion:";
}
else {
por = "Portionen:";
}

inhalt += '<section class="ui-grid-a">';
inhalt += '<!-- Row1 -->';
inhalt += '<div class="ui-block-a"><strong>Zutaten für<br>'+ p + ' '+ por +'</strong></div>';
inhalt += '<div class="ui-block-b"><strong>Zubereitung:</strong></div>';
inhalt += '<!-- Row2 -->';
inhalt += '<div class="ui-block-a">' + textM + '</div>';
inhalt += '<div class="ui-block-b ui-block-b-own"' + textZ + '</div>';
inhalt += '</section>'; 

$("#rezeptInhalt").html(inhalt); // füllt page id rezept content

$.mobile.changePage($("#rezept"));

}

Any ideas what I do wrong?

Answer 1

This looks like it is generating invalid HTML. The element in question is missing its closing > before you insert content via textZ. CSS will therefore not be correctly applied, since the browser is probably guessing as to what the correct text content of the node should be.

inhalt += '<div class="ui-block-b ui-block-b-own">' + textZ + '</div>';
//----------------------------------------------^^^^