I'm using ASP MVC and a current release of Kendo. If I add too much information to a Kendo window, it scrolls vertically. This hides the cancel/update buttons that get generated at the bottom. I need these shown. The user should not need to scroll to hit cancel. How can I make the "form-horizontal" scroll and the "k-window" not scroll?
Full Window:
Window with scrolling:
Code:
#(Html.Kendo().Grid(Model.CompanyList)
.Name("grid")
.Columns(columns => {
columns.Bound(o => o.Company.Name);
columns.Bound(o => o.Company.DealerId);
columns.Bound(o => o.Company.CityState).Title("City, " + stateTitle);
columns.Bound(o => o.Company.CountryCode);
columns.Bound(o => o.Company.Phone);
columns.Bound(o => o.CompanyStatus).Title("Status");
columns.Command(com => { com.Edit(); });
})
.Pageable()
.Sortable()
.DataSource(
dataSource => dataSource
.Server()
.Sort(sort => sort.Add("Name").Ascending())
.Model(model => model.Id(m => m.Company.Id))
.Update(up => up.Action("UpdateCompany", "Home"))
)
.Editable(ed => ed
.Mode(GridEditMode.PopUp)
.TemplateName("Company")
.Window(w => w
.Title("Edit company")
.Draggable()
.Resizable()
.Width(436)
.Modal(true)
.Animation(false)
)
)
)
In order to achieve such layout, you need to handle the scrolling in your own element rather than leave it to the window. This involves some customization that may break the grid functionality, so consider this unsupported, as it may break without notice in the future. Suggesting this on UserVoice might get implemented officially, so it would be better in the long term.
So, in order to do that, attach a window open event handler:
var buttonWrapper = $(".k-edit-buttons");
var formContainer = $(".k-edit-form-container");
formContainer.css({
overflow: "auto", // make the container scroll
maxHeight: 300 // maximum height of the window content, sans the chrome
});
buttonWrapper.insertAfter(formContainer);
You will also need to add the styles to the button wrapper:
.k-edit-form-container .k-edit-buttons {
clear: both;
text-align: right;
border-width: 1px 0 0;
border-style: solid;
position: relative;
bottom: -1em;
padding: .6em;
}
Try removing the Resizable() property from the window. I typically don't specify the Height() or Resizable() attributes for my Kendo Windows.
Related
I would like to change react-select option box width.
example here=>
If my content is larger than the option, its show horizontal scroll but I don't want horizontal scroll. How can I change the size of option box width?
Another thing is How can I show the selected value as CscID one even option box is showing CscID + CscDesc? Now when I select the option, its CscID + CscDesc is showing in the selected box.
Here is my Select =>
const formatOptionLabel = ({ CscID, CscDesc }) => (
<div style={{ display: "flex"}}>
<div>{CscID}</div>
<div>{CscDesc}</div>
</div>
);
const customStyles = {
control: styles => ({ ...styles, }),
option: (styles) => {
return {
...styles,
width: '10000px', //For testing
};
},
};
<Select
styles={customStyles}
formatOptionLabel={formatOptionLabel}
getOptionValue={option =>
`${option.CscID}`
}
options={datasource}
/>
Yes, I can edit the width of option box.
const customStyles = {
control: styles => ({ ...styles,
}),
option: styles => ({ ...styles,
}),
menu: styles => ({ ...styles,
width: '500px'
})
};
According to the documentation, Its called menu. If you want to update the other style, check here=> Style Keys
And this option is super helpful for inspecting the menu box => menuIsOpen={true}
You normally don't change width of the wrapping element in your use case. As the text limit can be any so you wont set the width of select according to the text but the text according to your select's width. Meaning the select will have a fixed width and the text exceeding the the fixed width must be converted to ellipsis through css like
.options-select {
overflow: ellipsis
}
Ellipsis on hover must show the fullname in a tooltip for better UX.
For re-size problem, you may refer to this existing answer: React Select auto size width
For second problem, I don't think it is possible by using react-Select.
If you go to github and look further into the source code of react-Select, you may find that the ValueType of value property is expected to be same as OptionsType of options.
To be precise, the code is "export type ValueType = OptionType | OptionsType | null | void;", which could be found in react-select/packages/react-select/src/types.js
For your convenience, this is the link towards its source code, which can help you figure out more hidden behaviors: https://github.com/JedWatson/react-select/tree/master/packages/react-select/src
I have googled around without finding a good solution for this. What i want to do is to create a masonry-like grid in a post where all images in the post should be in the masonry grid. How could i achieve this?
Note: With this idea you can get all attached image to the post either in gallery or inside the content
First let's add Masonry to your theme,
wp_enqueue_script( 'masonry' );
wp_enqueue_script( 'masonry', '//cdnjs.cloudflare.com/ajax/libs/masonry/4.1.1/masonry.pkgd.min.js' );
then add this javascript code to your theme somewhere in footer or in your custom.js file
jQuery(window).load(function() {
var container = jQuery('#mas-maincontainer');
var msnry = new Masonry(container, {
itemSelector: '.mas-item',
columnWidth: '.mas-item',
});
});
Now let's get all images attached to the post as you want
$attachments = get_children(array('post_parent' => $post->ID,
'post_status' => 'inherit',
'post_type' => 'attachment',
'post_mime_type' => 'image'));
foreach($attachments as $att_id => $attachment) {
$full_img_url = wp_get_attachment_url($attachment->ID);
//Here is your HTML to grid your images...
// Remember your images should be between <div id="mas-maincontainer"></div>
}
now you should add your custom CSS as below
.mas-item {
width: 50%; // if you want two column
}
.mas-item {
width: 33%; // if you want three column
}
This is the whole idea and hope it works for you
You can use wordpress's native gallery. This solution will give you good control on where you want to put the images in the content and it is easy to manage the gallery and it's images.
Disable the default style with this filter:
add_filter( 'use_default_gallery_style', '__return_false' );
And then use the desandro's masonry plugin to create the gird. This plugin is well documented and is the most common for creating masonry grids, so you should be fine with this plugin.
Remember to style the gallery so it will work with the masonry plugin. Here are the 2 selectors you will be using, .gallery (is the container for every gallery), and .gallery-item (is the conatiner for each image in the gallery).
It is related to the style. When there are more columns in the gridview, the layout of the actioncolumn will become vertical (see attached pic). How can I change it to be horizontal? I cannot find out why it became vertical in the Bootstrap css.
Thanks!
vertical layout of actioncolumn
Try to force style width:
[
'class' => ActionColumn::className(),
'contentOptions' => function ($model, $key, $index, $column) {
return ['style' => 'min-width:150px'];
}
]
Change the width as you need.
I'm trying to override the disposal of the DetailView widget by applying new css class but with no luck. I want all the records shown in the several instances of a DetailView widget to appear side by side. I create a class in app\web\css called detail1-view and apply it to the detaiview.php in vendor folder. The class has float:left, or display:inline-block in it, but none of the attributes work.
My Detailview is:
<?= DetailView::widget([
'model' => $model,
'attributes' => [
//'titulo',
'noticia',
// cria um array com a fotografia, em que
// carrega a path no campo fieldName da bd
[
'attribute'=>'fotodir',
'value'=>$model->fotodir,
'format' => ['image', ['width'=>'230','height'=>'200']],
],
],
]) ?>
and my detailview.php in folder vendor/yiisoft/yii2/widgets/... has in it the detail1-view class in the right place:
public $options = ['class' => 'detail1-view'];
My CSS:
.detail1-view {
display: inline-block;
width: 30%;
border:1px solid #000;
}
The DetailView continues to display one in top of another and not side by side.
Anybody has a solution for this issue ?
I solved it by myself.
The trick was to create another class with position:relative; and put the detailview widget inside it.
Here's the code for the view:
<div class="detail-disposal">
<?= DetailView::widget([
'model' => $model,
'options' => ['class' => 'detail1-view'],
'attributes' => [
//'titulo',
'noticia',
// cria um array com a fotografia, em que carrega a path no campo fieldName da bd
[
'attribute'=>'fotodir',
'value'=>$model->fotodir,
'format' => ['image',['width'=>'230','height'=>'200']],
],
],
]) ?>
and the css style used in app/web/css:
.detail-disposal{
position:relative;
width:100%;
}
DetailView CSS:
.detail1-view {
margin-left:20px;
margin-bottom:20px;
float:left;
width: 300px;
border:1px solid #000;
}
Now the detailview widget appears side by side every time a model is called.
I recently added a image to the edit button in YII.I do the following,
'class'=>'CButtonColumn',
'header' => 'Edit',
'template' => '{Edit}',
'buttons' => array(
'Edit' =>array(
'label' => 'Edit',
'imageUrl'=>Yii::app()->request->baseUrl.'/images/Actions-document-edit.ico',
));
and css for the button goes like this,
td.button-column a img {
max-height:25px;
max-width:25px;
}
And the actual size of the image Actions-document-edit.ico is 25*25.
I have a situation here that, i have an 25*25 image in Google Chrome and 2*2 image in mozilla firefox. Help me to achieve the proper formatting of the image in both the browsers.
And suggest also the pagenation problem.
Instead of .ico try to use .JPEG or .png or .gif image
Pagenation problem was solved
.pager ul.yiiPager li.page:after{display: inline-block !important}
But still am getting image problem... Help please...