I have given a Thumbnail view to my page which is an extended widget of bootstrap want to make it onclick enlarge or onclick thumbnail image change. How may I set those two options in my widgets. I searched, but couldn't get the right one.
$this->widget(
'bootstrap.widgets.TbThumbnails',
array(
'dataProvider' => $dataProvider,
'template' => "{items}\n{pager}",
'itemView' => '_thumb',
) );
where the _thumb is my view file(php file).
With this widget you can't. It is for creating a list of thumbnails. If you want to enlarge them in eg a lightbox you have to install a lightbox extension and make it work with this thumbnails. It's the same for changing the images onclick.
Related
I am relatively new to Xamarin, and I am beginning to understand the concept of xaml forms and Model Views.
Is it possible to have one form to have a ViewModel which has several fields/properties and also a 'search' button that goes to a search 'Form' and then from the search 'Form' to a ListView 'Form', select from that ListView 'Form' and 'Go Back' to the first form and populate a field with what was selected from the ListView 'Form'?.
Can this be done with binding, if so how?
Thanks!
In Kartik Gridview is there a way I can move the Column Headers and Column Search Fields so they are next to each other than stacked like this when when on an Iphone etc.
I want it to show FAQ Type - Question - Answer all on one line when I am see this on a Iphone 6 screen
Try this:
'responsive'=>true,
Your gridview:
use kartik\grid\GridView;
// Generate a bootstrap responsive striped table with row highlighted on hover
echo GridView::widget([
'dataProvider'=> $dataProvider,
'filterModel' => $searchModel,
'columns' => $gridColumns,
'responsive'=>true,
'hover'=>true
]);
Refrence
Please see here
When the browser is resized, the Google Map and the grid are correctly resized. I want the Google map to always take up 100% of the page height.
I want the grid to take 70% and the chart to take up the rest.
However, the chart is not being resized vertically. Its as if there is a hard coded height somewhere
This is not the same kind of problem that other people have had where the chart does not resize at all, because if you make the browser wider and narrower the chart does resize horizontally
I call the code below when the window is loaded and when the window is resized
$(window).resize(function() {
resizeGrid();
var chart = $("#kendoChart").data("kendoChart");
//to check the chart exist or not if exist then redraw it..
if (chart) {
chart.redraw();
}
});
Also when the window is loaded
$(document).ready(function() {
var chart = $("#kendoChart").data("kendoChart");
//to check the chart exist or not if exist then redraw it..
if (chart) {
chart.redraw();
}
}
I have tried changing the height of the associated CSS class to varying percentages and nothing changes the height of the chart
As you can see from the markup below, I have no hard coded height here
<div id="chartContainer" class="chartContainer" >
#(Html.Kendo().Chart<IMeterProfileData>()
.Name("kendoChart")
.PlotArea(plotArea =>
plotArea.Margin(0)
)
.Legend(legend => legend
.Visible(false)
)
.AutoBind(false)
.Series(series => { series.Column(model => model.Consumption, categoryExpression: model => model.PeriodDateTime).Name("Consumption"); })
.CategoryAxis(axis => axis
.Date()
.BaseUnit(ChartAxisBaseUnit.Minutes).BaseUnitStep(30)
.Labels(label => label.Step(48).Rotation(-90).Format("dd/MM/yyyy"))
.Axis.MajorGridLines.Visible = false
)
.ValueAxis(axis => axis.Numeric()
.Labels(labels => labels.Format("{0:N0}"))
.Line(line => line.Visible(false))
.Title("Consumption kWh")
)
.Tooltip(tooltip => tooltip
.Visible(true)
.Format("{0:N0}")
).ChartArea(area => area.Border(1, "#cdcdcd", ChartDashType.Solid)
) )
</div>
Has anyone ever come across this?
Paul
To quote the developers,
"The size of the Chart can be set initially either in the configuration or by specifying the size on the parent element. For example:
$("#chart").kendoChart({
chartArea: {
width: 200,
height: 200
},
....
If you wish to change the size dynamically, you should also repaint the Chart by using the refresh or redraw methods after the change."
I'm unsure whether this supports percentage heights, only trying will tell. You'll probably have to calculate the height in JS whenever the page size changes if you want a dynamic page that fits the window.
In the data gridview, I am able to put tooltip (http://yiibooster.clevertech.biz/javascript.html#tooltips) by using headerHtmlOptions and get the data from the database.
My problem is that I can't find a way to put a link in the tooltip. For example, "This is tooltip. See more.." If 'See more..' is clicked it should go to another page. Thanks.
Try this with changes of your script!
array(
'header'=>'Video Url',
'name' => 'video_url',
//'value' => 'CHtml::link($data->title,$data->video_url, array("target"=>"_blank"))',
'value' => 'CHtml::link("View Video", $data->video_url, array("target"=>"_blank"))',
'type' => 'raw',
),
Perhaps you are missing target_blank
I have found this extension (http://www.yiiframework.com/extension/tooltipster/) and it works the way i want. It made possible for me to have a tooltip with link. :))
I'm trying to generate a PDF following the instructions given in http://railscasts.com/episodes/153-pdfs-with-prawn-revised
I'm able to put a background image on a specific page by doing this:
image "#{Rails.root.to_s}/public/document_assets/1_cover.png", :at => [bounds.left - 30, bounds.top + 50], :fit => [#width, #height]
I also got an image to render on the background of multiple pages at once using:
repeat(2..3) { canvas { image("#{Rails.root.to_s}/public/document_assets/1_bg.png", :at => bounds.top_left, :fit => [#width, #height]) } }
but that renders the image on top of everything else on the page, so no text or other content is visible.
I can't seem to figure out how to set the background image property as described in the Prawn documentation. Does anyone know how to do this?
Thanks!
I figured out the problem. You can set the background option in the PDF class where the margins get set in the railscast example. My issue was that the image I was using was not the right size. When I sized it to 8.5x11" and 72px per inch, it worked.