i am using Yii2 with a scroll pager extension: http://kop.github.io/yii2-scroll-pager/
However, when you set the scroll for a div, instead of the whole screen, ajax is not loading any additional items when you scroll down.
Here's my code:
echo ListView::widget([
'dataProvider' => $newsDataProvider,
'itemOptions' => ['class' => 'item'],
'itemView' => '_news_item_view',
'pager' => [
'class' => \kop\y2sp\ScrollPager::className(),
'negativeMargin' => '200',
'triggerText' => 'Load More news',
'triggerOffset' => 3,
'noneLeftText' => '',
],
'summary' => '',
]);
But this is not working. You can see it live mode here: http://188.226.170.133/ on the div with id = w0
here's css i've added to make the scroll happen only on this div:
#w0 {
height: 600px;
overflow-y: scroll;
}
Any suggestions?
Related
Hint: Pastebin links have been inserted as shown up in my last comment
Hint: Solution of Muhammad still doesn't work(see a picture of the new tooltip)!
My layout file is coded like this:
<?php
use yii\helpers\Html;
use common\wsl_components\AdminLteAsset;
$js = <<<SCRIPT
$(function () {
$('body').tooltip({
selector: '[data-toggle="tooltip"]',
html:true
});
});
SCRIPT;
// Register tooltip/popover initialization javascript
$this->registerJs($js);
AdminLteAsset::register($this);
$this->beginPage()
?>
<!DOCTYPE html>
<html lang="<?= Yii::$app->language ?>">
<head>
<meta charset="<?= Yii::$app->charset ?>"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<?= Html::csrfMetaTags() ?>
<title><?= Html::encode($this->title) ?></title>
<?php $this->head(); ?>
</head>
<body class="hold-transition skin-blue sidebar-mini sidebar-collapse">
<?php $this->beginBody(); ?>
<div class="wrapper">
<?=
$this->render(
'header.php'
);
?>
<?=
$this->render(
'left.php'
);
?>
<?=
$this->render(
'content.php', ['content' => $content]
);
?>
</div>
<?php $this->endBody(); ?>
</body>
</html>
<?php $this->endPage(); ?>
My GridView is coded like this:
[
'attribute' => $dummy ,
'label' => Yii::t ( 'app' , 'Charakterisierung' ) ,
'format' => 'html' ,
'value' => function($model) {
if ( !empty ( $model->person->personentypDominant->typ_name )) {
$tag = Html::tag ( 'span' , 'Tooltip-Touch Me!' , [
// html-tags won't be rendered in title
'title' => $model->person->personentypDominant->typ_empfehlung ,
'data-placement' => 'left' ,
'data-toggle'=>'tooltip',
'style' => 'white-space:pre;border:1px solid red;'
] );
return $tag . "<br>" . $model->person->personentypDominant->typ_verhaltensmerkmal_im_team_1 . "," . $model->person->personentypDominant->typ_verhaltensmerkmal_bei_stress_3 . "," . $model->person->personentypDominant->typ_verhaltensmerkmal_am_arbeitsplatz_4;
}
}
],
Nevertheless, HTML-Tags in Tooltip won't be rendered. They appear, as they are in database, for instance like this:
Verhaltensempfehlung:<br><ul><li>
Kompetenz und Selbstbewusstsein zeigen,</ul></li>
I don't know why, but upper tags won't be interpreted. They are in Tooltip hardcoded. Any ideas, what I do wrong?
Edit: My question having been answered by Muhammad is exactly same, but answer didn't solve my problem!
In order to show my problem, look at attachement,please!
You have 2 mistakes apparently
In this view you provided on the line 149 you are missing the attribute data-toggle="tooltip" on the spans.
change them to
$tag_rot = Html::tag(
'span', 'Typ Rot', [
'title' => $tooltip_rot,
'data-toggle' => 'tooltip',
'data-placement' => 'left',
'style' => 'white-space:pre;border:2px solid red;'
]
);
$tooltip_green = \common\modules\lookup\models\LPersonentyp::findOne(2)->typ_empfehlung;
$tag_green = Html::tag(
'span', 'Typ Grün', [
'title' => $tooltip_green,
'data-toggle' => 'tooltip',
'data-placement' => 'left',
'style' => 'white-space:pre;border:2px solid green;'
]
);
$tooltip_blue = \common\modules\lookup\models\LPersonentyp::findOne(3)->typ_empfehlung;
$tag_blue = Html::tag(
'span', 'Typ Blau', [
'title' => $tooltip_blue,
'data-toggle' => 'tooltip',
'data-placement' => 'left',
'style' => 'white-space:pre;border:2px solid blue;'
]
);
In your Gridview column you are using "format"=>"html" whereas you should be using "format"=>"raw"
change the column definition to the following
[
'attribute' => $dummy ,
'label' => Yii::t ( 'app' , 'Charakterisierung' ) ,
'format' => 'raw' ,
'value' => function($model) {
if ( !empty ( $model->person->personentypDominant->typ_name ) ) {
$tag = Html::tag ( 'span' , 'Tooltip-Touch Me!' , [
'title' => $model->person->personentypDominant->typ_empfehlung ,
'data-placement' => 'left' ,
'data-toggle' => 'tooltip' ,
'style' => 'white-space:pre;border:1px solid red;'
] );
return $tag . "<br>" . $model->person->personentypDominant->typ_verhaltensmerkmal_im_team_1 . "," . $model->person->personentypDominant->typ_verhaltensmerkmal_bei_stress_3 . "," . $model->person->personentypDominant->typ_verhaltensmerkmal_am_arbeitsplatz_4;
}
}
] ,
The ANSWER i gave previously was more focused towards the tooltip usage with the html::tag() and i used your code for gridview column to copy paste, and forgot to mention it there in case of using inside the gridview, i have updated that answer too.
In case if you still could not achieve a view of HTML inside the tooltip after #Muhammad Omer Aslam's answer.
Try to add 'data-html' => 'true' or with js way $(selector).tooltip({html: true}) NOTE: based on bootstrap official documentation Use text if you're worried about XSS attacks.
Check if you do not include a jquery-ui tooltip widget. Which will overwrite bootstrap's tooltip.
To Fix it add a script like :
$(selector).tooltip({
content: function () {
return this.getAttribute("title");
},
});
In this link you can find other ways fix jQeuer-UI tooltip
Be warned that Bootstrap 4.3.1 and 3.4.1 now comes with an HTML sanitizer and a most of tags are now suppressed by default.
Here the bootstrap blog annuncement and the docs for 3.4.1.
So now you need to whitelist any other tag inside your tooltip (or popover) HTML
var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.whiteList
// To allow table elements
myDefaultWhiteList.table = []
// To allow td elements and data-option attributes on td elements
myDefaultWhiteList.td = ['data-option']
// You can push your custom regex to validate your attributes.
// Be careful about your regular expressions being too lax
var myCustomRegex = /^data-my-app-[\w-]+/
myDefaultWhiteList['*'].push(myCustomRegex)
// initialize your tooltip
$(function () {
$('[data-toggle="tooltip"]').tooltip({
// set your custom whitelist
whiteList: myDefaultWhiteList
});
});
Html5 video is not streaming in safari(mac) browser.
here's the code
<%= video_tag(['filepath/banner-video.mp4'], :width => '100%', :autoplay => true, :loop => true, :type => 'video/mp4') %>
It works fine in chrome/FF. any help would be appreciated.
I am using MVC wrappers to create kendo grids and everytime i want to group a row the Title of the column gets ignored. It doesnt matter if the title is set in the grid .Title("") or in the viewmodel [Display(Name="")]. The result is the same. Any opinions on this?
I have added an example how it looks like when i group a column http://prntscr.com/3nm8rk
#(Html.Kendo().Grid(Model)
.Name("GridEkstenzija" + guid)
.Columns(columns =>
{
columns.Template(#<text></text>).ClientTemplate("<img style=' display: block; margin-left: auto; margin-right: auto;'" + "width='24' height='24' src='" + Url.Action("UcitajSlikuEkstenzije") + '/' + "#:data.IdEkstenzija#' />").Title(EkstenzijeDatotekaLanguage.Icon);
columns.Bound(p => p.Ekstenzija);
columns.Bound(p => p.Opis);
columns.Bound(p => p.MimeType);
columns.ForeignKey(f => f.StatusId, (IEnumerable)ViewBag.StatusEkstenzija, "IdStatus", "Naziv").Title("Status");
})
.Selectable(sel => sel.Mode(GridSelectionMode.Single))
.Sortable().Pageable(pg =>
{
pg.PageSizes(new[] { 20, 50, 100, 300 });
pg.Refresh(true).Numeric(true
).Messages(ms => ms.First(Resources.KendoPageableFirst).Last(Resources.KendoPageableLast).Next(Resources.KendoPageableNext).Previous(Resources.KendoPageablePrevious).Empty(Resources.KendoPageableEmpty)
.ItemsPerPage(Resources.KendoItemsPerPage).Display(Resources.KendoPageableDisplay));
})
.DataSource(dataSource => dataSource.Ajax().PageSize(10)
.ServerOperation(false).Model(model => model.Id(p => p.IdEkstenzija))
.Read(read => read.Action("Read", "EkstenzijaDatoteke").Type(HttpVerbs.Post))))
I have a yii application and I use themes to manage different styles and layouts. In the default generated contact.php I use the following code to generate a captcha verification for the form:
//webroot/themes/botany/views/site/contact.php
<?php //echo $form->labelEx($model,'verifyCode'); ?>
<div>
<?php $this->widget('CCaptcha', array('showRefreshButton' => true,
'buttonLabel' => 'Refresh',
'buttonOptions' => '',
'buttonType' => 'button',
'clickableImage' => true));
?>
<?php echo $form->textField($model,'verifyCode', array('class' => 'form-control', 'placeholder' => 'Captcha*')); ?>
</div>
<p>Please enter the letters as they are shown in the image above.
<br/>Letters are not case-sensitive.</p>
<?php echo $form->error($model,'verifyCode'); ?>
<?php endif; ?>
Although, I have set showRefreshButton => true I could not able to see the refresh button. The following screen shot demonstrates the absence of refresh button:
After some inspection, I found, what I think, a bug in Yii, in which, different widgets generate HTML elements with the same id.
In my case zii.widgets.CMenu widgets in webroot/themes/botany/views/layouts/main.php generates the same id for the ul of the navigation menu and the Captcha widget image regarded id by the generated jquery by the captcha widget.
I could able to solve this issue by supplying the id option of CMenu
<?php $this->widget('zii.widgets.CMenu',array(
'id' => 'gds',
'htmlOptions' => array('class' => 'nav'),
'items'=>array(
array('label'=>'Home', 'url'=>array('/site/index')),
array('label'=>'About', 'url'=>array('/site/page', 'view'=>'about')),
array('label'=>'Contact', 'url'=>array('/site/contact')),
array('label'=>'Login', 'url'=>array('/site/login'), 'visible'=>Yii::app()->user->isGuest),
array('label'=>'Logout ('.Yii::app()->user->name.')', 'url'=>array('/site/logout'), 'visible'=>!Yii::app()->user->isGuest)
),
)); ?>
and setting yw0 id for the captcha image.
<?php $this->widget('CCaptcha', array('imageOptions' => array('id' => 'yw0'),'showRefreshButton' => true,'buttonLabel' => 'Refresh', 'buttonOptions' => '', 'buttonType' => 'button')); ?>
What type of render function did you use? If you are using renderPartial, it won't show the refresh button. The easy way is create a new blank layout and use render()
http://www.dukaweb.net/2013/12/why-does-yii-captcha-not-display-get.html
How can I change the height and width of modal window in yiistrap extension bootstrap.widgets.TbModal. One way is changing height and width parameters in bootstrap.css .modal-container but that will change the height and width of all modal windows. I want to change the height and width of only one modal windows while for other modals it should default one. How can I achieve this?
Simply specify the width of the modal with CSS of your own (don't forget to also set margin-left to negative half the width so that the modal appears centered on screen).
For example, you could apply an additional class to the modal:
$this->widget('TbModal', [
'htmlOptions' => ['class' => 'modal-wide']
]);
and use this CSS:
.modal.modal-wide { width: 800px; margin-left: -400px }
Or you could even use inline styles:
$this->widget('TbModal', [
'htmlOptions' => ['style' => 'width: 800px; margin-left: -400px']
]);