Image resize in detail view in YII# - yii2

I am using the below code in detail view page to render image. The image is rendered correctly, but it is not getting resized. what I am doing wrong?
[
'label'=>'photo',
'value'=>'uploads/' . $model->photo,
'format' => 'image',['width'=>'100','height'=>'100'],
],
Thanks.

Use yii\helpers\Html;
[
'label'=>'Image',<br>
'value'=>Html::img(Yii::$app->request->baseUrl.'/media/category/'.$model->image,'width'=>200, 'alt'=>'no image']),<br>
'format'=>'raw'
],

Related

How to get label above checkbox

I am creating a form in Yii2, but have some issues with the default design. Namely, <?= $form->field($model, 'x')->textInput(['maxlength' => true]) ?> will place the 'x' label above the textfield, but <?= $form->field($model, 'y')->checkbox(['label' => 'y']) ?> places the label to the right of the box. Since this isn't some html element that I can just adjust with css (afaik?), I have no idea how to fix it and get the label above the checkbox.
You need to pass false as second argument to checkbox():
<?= $form->field($model, 'y')->label('y')->checkbox([], false) ?>
You still may need to adjust CSS (that depends on your layout styles), but checkbox and its label will be rendered using standard field layout, sot is should be fairly easy.

How do we display a view in ExtJS using browser's console

Is there any way to display our view without creating any button clicks events in controller
Console view
give your view xtype and id to the Viewport items and then paste the code into the console
Ext.Viewport.add({
xtype : 'panel',
itemId : 'testingOverlay',
showAnimation : {
type : 'popIn',
duration : 250,
easing : 'ease-out'
},
hideAnimation : {
type : 'popOut',
duration : 250,
easing : 'ease-out'
},
height : '630px',
width : '335px',
left : '210px',
top : '205px',
items : [{
xtype : 'viewXtype',
id : 'viewId'
}],
});
You can also use renderTo property, if you specify renderTo:Ext.getBody() it will render the content or replace Ext.getBody() with html element.
But in real applications you will need a viewport this is better than renderTo
Fiddle Sample Code
Ext.create('Ext.panel.Panel',{
title:'Test Panel',
width:400,
height:500,
renderTo:Ext.getBody()
});

Using ActiveForm without bootstrap template in Yii2

<?php $form = ActiveForm::begin(); ?>
<?= $form->field($model, 'title')->textInput(['maxlength' => true]) ?>
<?php ActiveForm::end(); ?>
How can I get the input text box without bootstrap 3 wrapper codes ?
I am using a custom HTML wrapper and how can I implement my own template for the text box ?
thanks
Depends whether you want to change div's class or input itself.
<?= $form->field($model, 'title', ['options' => ['class' => 'custom_class_div']])->textInput(['class' => 'custom_class_input']) ?>
I have given two options with overwriting classes from bootstrap.
custom_class_div will replace boostrap for div (input's parent). custom_class_input will replace boostrap for input. Basically, it removes form_group in both cases but in first option it will remove that part where input field takes entire "line" in parent div and in second option this will modify input itself (will still be just 1 input on the "line" but no border shadows, smaller input field, etc.).
If you don't have any classes but just want to use style in div/input element, you can replace class with style, for example:
<?= $form->field($model, 'title')->textInput(['style' => 'width: 150px']) ?>

Bootstrap - custom flash/alert boxes

I have a Rails app in which I use Boosttrap and HAML, when I present the flash messages I would like to change their appearance slightly. I want them to be full screen with cold-md-1 margins on each side, and a col-md-10 contains the flash message.
What I've tried is:
- if flash[:notice]
/ Full width is a css class with 100% width, so the width works...
.alert.alert-info.alert-dismissable.full-width
.col-md-1
%button{:type => "button", :class => "close", 'data-dismiss' => "alert", 'aria- hidden' => "true"} ×
= flash[:notice]
.col-md-1
This doesn't work quite as I want (not the correct margins). I have also tried to contain the flash message like this:
.col-md-1
.col-md-10
[message]
.col-md-1
Then it looks ok, but the close button doesn't work as I want (it doesn't close the whole message). To illustrate what I what to achieve, see the image below:
Here I want the close button (note: only the close button, and not the background) to align with the account drop down and the gray box.
Any ideas on what I should do?
You are making simple thing look complex. You want to have col-md-1 margin on each side so your alerts width will be col-md-10 and bootstrap3 has col-md-offset-* classes for offsetting it.
- if flash[:notice]
.alert.alert-info.alert-dismissable.col-md-10.col-md-offset-1
.col-md-1
// give proper width and margin to this div to align button with dropdown
%button{:type => "button", :class => "close", 'data-dismiss' => "alert", 'aria- hidden' => "true"} ×
= flash[:notice]
Solved it by using some javascript (or coffee-script). View:
.alert.alert-info.alert-dismissable.no-border-radius
.container
.col-md-1
.col-md-10
= flash[:notice]
%button{:type => "button", :class => "close", 'data-dismiss' => "alert", 'aria-hidden' => "true"} ×
.col-md-1
JavaScript (or CoffeeScript):
$('.close').click ->
$(".alert").hide();

Link is not clickable in chrome and opera but in Firefox and IE?

I've a link tag around an image and it's working in IE and Firefox but it doesn't work in Chrome and Opera?
<div class="gallery">
<img width="172" height="235" src="mi35.jpg">
<div class="title">Mini</div>
</div>
I tried urlencode to no avail: index.php%3Fid%3D1331%26no_cache%3D1%26uid%3D1%26mode%3Ds
I've removed no_cache=1 and urlencode in my php source code like this to no avail:
urlencode ( str_replace ( "no_cache=1", "", $this->pi_getPageLink ( $GLOBALS [ 'TSFE' ]->id, '', array ( "uid" => $row [ "UID" ], "mode" => "s" ) )) );
In fact it was a problem in the CSS file and a negative z-index on the surroundig div of the image makes it impossible to click on the link.