There is a website
There must be 2 spaces between the names of the characteristics and their values. I give the code
// такой же код, что и код выше - только для черных пунктов меню типа Моноблоки
let categoryflag='';
$('.submenu__title a').on('click', function (event) {
event.preventDefault();
console.log('Inner check');
categoryflag=event.target.innerHTML;
subcategoryflag=categoryflag;
console.log(categoryflag);
$.ajax ({
method: 'POST',
url: '../php/ajaxsubcategory1.php',
cache: false,
data: {categoryflag: categoryflag, subcategoryflag: subcategoryflag},
dataType: 'json',
complete: function(data) {
console.log(data.header);
console.log(data.countrecords);
},
success: function (data) {
console.log('check');
console.log(data);
$('.rightmenu').html(data.result.msg);
let centeroutput='<div id=\"topcenterarea\">'+'<h1>'+data.result.header+' '+data.result.countrecords+' товара' + data.output[0]['screendiagonal'] + '</h1>'+'</div>';
productcardsoutput='';
// productcard='<div class="ProductCardBlock">';
for (let i=0; i<data.result.countrecords; i++)
{
productcard='<div class="ProductCardBlock">';
productcard+='<div class="dynamic ProductImage">';
productcard+='<div id="ImageWrapper">';
productcard+='<img class="ProductPicture" src='+'"../images/'+data.output[i]['imagepath']+'">';
productcard+='</div>';
productcard+='</div>';
productcard+='<div class="dynamic ProductDescription">';
productcard+='<div class="ProductName">' + data.output[i]['monoblockname'] +', ' + data.output[i]['color']+ '</div>';
productcard+='<div class="ProductScreenParamsWrapper">'+ '<div class="text">' + 'Диагональ/разрешение ' + '</div>' + '<div class="spaces">' + ' ' + '</div>' + '<div class="ProductScreenParams">' + data.output[i]['screendiagonal'] + '/' + data.output[i]['resolution'] + 'пикс.' +'</div>'+'</div>';
productcard+='<div class="ProductCpuTypeWrapper">'+ '<div class="text">' + 'Тип процессора ' + '</div>' + '<div class="spaces">' + ' ' + '</div>' + '<div class="ProductCpuType">'+ data.output[i]['cputype'] +'</div>' +'</div>';
productcard+='<div class="ProductCpuFrequencyWrapper">'+ '<div class="text">'+ 'Частота процессора ' +'</div>'+'<div class="spaces">' + ' ' + '</div>'+ '<div class="ProductCpuFrequency">' + data.output[i]['frequency'] +'</div>'+'</div>';
productcard+='<div class="ProductRAMWrapper">' + '<div class="text">' + 'Оперативная память (RAM) ' + '</div>' + '<div class="spaces">' + ' ' + '</div>' + '<div class="ProductRAM">' + data.output[i]['ramsize'] +'</div>'+'</div>';
productcard+='<div class="ProductVideoCardWrapper">' + '<div class="text">'+'Графический контроллер '+'</div>' + '<div class="spaces">' + ' ' + '</div>' + '<div class="ProductVideoCard">' + data.output[i]['videocard'] +'</div>'+'</div>';
if (data.output[i]['memorytype']=='SSD') {
productcard+='<div class="ProductDisksAndDrivesWrapper">' + '<div class="text">' + 'Объем SSD ' + '</div>' + '<div class="spaces">' + ' ' + '</div>' +'<div class="ProductDisksAndDrives">' + data.output[i]['sizememorydata'] +'</div>'+'</div>';
}
else if (data.output[i]['memorytype']=='HDD') {
productcard+='<div class="ProductDisksAndDrivesWrapper">' + '<div class="text">' + 'Объем HDD ' + '</div>' + '<div class="spaces">' + ' ' + '</div>' + '<div class="ProductDisksAndDrives">' + data.output[i]['sizememorydata'] +'</div>'+'</div>';
};
productcard+='</div>';
productcard+='<div class="dynamic ProductBuyPart">'+ '<button type="submit" class="ProductAddToBasket" value="В корзину"></button>' +'</div>';
// productcard+='<div class="ProductScreenParams">'+ 'Диагональ/разрешение ' + data.output[i]['screendiagonal'] + '/' + data.output[i]['resolution'] + 'пикс.' +'</div>';
// productcard+='</div>';
// productcard+='</div>';
// productcard+='</div>';
// productcard+='</div>';
productcard+='</div>';
productcardsoutput+=productcard;
}
centeroutput+=productcardsoutput;
/*$('.centerarea').html('<div id=\"topcenterarea\">'+'<h1>'+data.header+' '+data.countrecords+' товара'+'</h1>'+'</div>');*/
$('.centerarea').html(centeroutput);
//expandCollapsedFunction();
}
}
);
}
);
.text {
font: 14px Roboto,Helvetica,Arial,sans-serif;
/*margin-bottom: 5px;*/
/*align-items: stretch;*/
}
.ProductCardBlock {
width: 100%;
display: flex;
flex-direction: row;
justify-content: stretch;
height: 168px;
/*position: relative;*/
}
.ProductCardBlock .ProductImage {
/*width: calc(191.5/931.75)*100%;*/
/*width: 20%;*/
height: 100%;
/*position: absolute;*/
width: 220px;
}
.ProductCardBlock .ProductImage #ImageWrapper .ProductPicture {
margin-left: 15px;
margin-top: 20px;
margin-right: 5px;
/*position: absolute;*/
}
.ProductCardBlock .ProductDescription {
/*width: 70%;*/
margin-top: 20px;
font: 14px Roboto, Tachoma, Arial, sans-serif;
/*position: absolute;*/
/*flex: 6;*/
}
.ProductCardBlock .ProductDescription .ProductName {
margin-bottom: 15px;
font: 16px Roboto, Tachoma, Arial,sans-serif;
/*position: absolute;*/
}
.ProductScreenParams,
.ProductCpuType,
.ProductCpuFrequency,
.ProductRAMWrapper,
.ProductVideoCard,
.ProductDisksAndDrives {
font: 14px Roboto, Tachoma, Arial,sans-serif;
}
.ProductCardBlock .ProductDescription .ProductScreenParamsWrapper {
font: 14px Roboto, Tachoma, Arial,sans-serif;
padding-bottom: 0px;
margin-bottom: 5px;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-end;
/*position: absolute;*/
}
.ProductCardBlock .ProductDescription .ProductCpuTypeWrapper {
font: 14px Roboto, Tachoma, Arial,sans-serif;
margin-bottom: 5px;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-end;
/*position: absolute;*/
}
.ProductCardBlock .ProductDescription .ProductCpuFrequencyWrapper {
font: 14px Roboto, Tachoma, Arial,sans-serif;
margin-bottom: 5px;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-end;
/*position: absolute;*/
}
.ProductCardBlock .ProductDescription .ProductRAMWrapper {
font: 14px Roboto, Tachoma, Arial,sans-serif;
margin-bottom: 5px;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-end;
/*position: absolute;*/
}
.ProductCardBlock .ProductDescription .ProductVideoCardWrapper {
font: 14px Roboto, Tachoma, Arial,sans-serif;
margin-bottom: 5px;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-end;
/*position: absolute;*/
}
.ProductCardBlock .ProductDescription .ProductDisksAndDrivesWrapper {
font: 14px Roboto, Tachoma, Arial,sans-serif;
margin-bottom: 5px;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-end;
/*position: absolute;*/
}
/*.ProductCardBlock */.ProductBuyPart {
margin-top: auto;
margin-bottom: auto;
padding-top: auto;
padding-bottom: auto;
margin-right: 40px;
/*margin-left: 40px;*/
/*padding-right: 40px;*/
/*width: 10%;*/
/*position: absolute;*/
/*display: block;*/
/*flex: 4;*/
/*width: auto;*/
}
/*.ProductCardBlock .ProductBuyPart */.ProductAddToBasket {
/*margin: auto;
padding: auto;*/
width: 80px;
height: 40px;
/*position: absolute;*/
}Despite the code, there are no spaces. And this is despite the fact that there are spaces inside element <div class="text">'...</div> and also despite the fact that there is a flex element of spaces <div class="spaces">' + ' ' + </div>. Here is the code for convenience https://jsfiddle.net/vladdvin/4stpny16/. How do I get whitespace displayed?
(ballast content ballast content ballast content ballast content ballast content ballast content ballast content ballast contentballast content ballast content ballast content ballast content ballast content ballast content ballast content ballast content ballast content ballast content ballast content ballast content ballast content ballast content ballast content ballast contentballast content ballast content ballast content ballast content ballast content ballast content ballast content ballast content).

Aucun commentaire:
Enregistrer un commentaire