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.
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 want to add the option to create a 'div' in the html editor field.
How do I add an option to the format dropdown list that will create a div with a specific class?
I have added a style successfully to the styles dropdown with this code in editor.css
.responsive-table {
overflow-x: scroll;
}
I am using silverstripe 3 and want to be able to add my own options to the format dropdown to create various elements.
In SilverStripe 3 we can edit style dropdown items in our HTMLEditorField by adding the following to our mysite/_config.php:
HtmlEditorConfig::get('cms')->setOption('style_formats', [
[
'title' => 'Responsive table',
'attributes' => ['class' => 'responsive-table'],
'selector' => 'div',
],
]);
The above code will make the HTMLEditorField style dropdown have one item in it, a Responsive table option that can be applied to div elements. If we prefer this to be applied to table elements we can change this in the selector option.
Here is a handy module that shows examples of how we can make changes to the HTMLEditorField in SilverStripe 3:
https://github.com/jonom/silverstripe-tinytidy/blob/master/_config.php
I need double logo in site identity of WordPress customizer. One on mobile view and other on desktop view. Both are different images. Please provide code for adding two logos.
I have code for adding one custom logo. and I need it on site identity itself
function lotus_flies_custom_logo_setup()
{
$defaults = array(
'height' => 139,
'width' => 176,
// 'flex-height' => true,
// 'flex-width' => true,
'header-text' => array( 'site-title', 'site-description' ),
);
add_theme_support('custom-logo', $defaults);
}
add_action('after_setup_theme', 'lotus_flies_custom_logo_setup');
The best way to have different logo according to screen size is to use #media queries in CSS.
So you could just find out a css selector for your current icon, and add some css to resize it according to screen size, in your inherited custom template.
Instead of resizing, you could also just completely change the source of the image in CSS.
( As an inspiration: Swap out 3 differently-sized logos with media queries? . Documentation: Using_media_queries )
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).
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.