Trying to make a grid,
.wrapper {
display: grid;
grid-template-columns: 48% 52%;
}
The issue is that when I type this, display works, but grid-template-elements doesn't go bold, it's as if it doesn't exist? I can't work out what I'm doing wrong.
here is an image: Doesn't work
Go to 'Settings' > 'Style Configurator'
Choose 'Language > CSS', 'IDENTIFIER' then add all your grid properties in user-defined keywords box, separating them with a space.
Related
This is a wordpress website - https://smecollaborative.org/
Down the page there is a section pulling from the Events Calendar. Each Event has a featured image. You can use CSS to hide the featured image of each image, but the challenge is using the Fusion Builder element, the featured image is replaced with a 'placeholder' image off a calendar, and I can't get that thing hidden.
Here are the two snippets I've tried:
.single-tribe_events .page-header-image-single {
display: none;
}
.tribe-events-event-image img {
display:none!important;
}
.fusion-events-shortcode .tribe-events-event-image {
height: auto !important;
}
The 2 snippets you tried are wrong because:
snippet 1. is targeting the header image on the tribe event single page.
snippet 2. is targeting an img tag which does not exist in this case.
You should target the parent item to also hide the clickable link to it:
.fusion-events-post div.fusion-events-thumbnail {
display: none;
}
I added the extra div to the thumbnail selector to override the standard display: block; without having to use !important
Or, in case you only want to hide it if the image is missing you can do:
.fusion-events-post .fusion-events-thumbnail span {
display: none;
}
This one will only target the placeholder in case it is present
How do I configure Angular UI-grid to center the columns so both lines are centered?
I define the headerCellClass: text-c and width: 98, in grid.columnDefs like this:
{
name: 'TotalOutstanding',
displayName: 'Total Outstanding',
width: 98,
type: 'number',
cellClass: 'text-c',
headerCellClass: 'text-c'
}
and text-c in css file like this:
.text-c {
text-align: center;
}
But I get the result in image attached.
I really need both words to be centered. How do I do that?
Seems that the class .ui-grid-cell-contents has set white-space: nowrap;
If you change that to normal it will work, so your css should look like this:
.text-c .ui-grid-cell-contents {
text-align: center;
white-space: normal;
}
According to your setup (cellClass: 'text-c', headerCellClass: 'text-c'), this css will affect the header as well as the cells..
--- EDIT ---
According to comments by the OP, that the original answer did not work for him, I added a comment that did help him. I'm adding that comment to the answer here below:
I think that the sorting icon position is affecting you.
I took the Plunker from UI-Grid's tutorials (Tutorial: 115 HeaderCellClass), and edited it to fit your scenario.
I used the header cell class ui-grid-header-cell-label to change the display to inline-block so it will "push" the sort icon to the next line: plunker here
The same view, the same DetailView, the same code, different model, different end result:
What sets column width in this case? Why it is shifting with each record? Is this a Bootstrap or Yii2 issue? I tried to analyse generated code with Chrome Dev Tools, but got no conclusions. As you can see, there is a lot of empty spaces in both columns, so column width shifting should not occur.
Most important -- how to prevent that? How to make sure, that every view will look exactly the same, no matter what data will be printed inside DetailView?
Also you can use the public propetry template to achieve this. For example:
<?= DetailView::widget([
'model' => ...,
'attributes' => [[...], [...]],
'template' => "<tr><th style='width: 15%;'>{label}</th><td>{value}.</td></tr>"
]) ?>
In this case I have two columns where I am forcing the widht of first to 15% of total.
You can also use this approach to apply more style of your generated table.
The answer to question in title (What sets column width / distribution in Yii2's DetailView?) is "I don't know" or "Nothing sets this". However, adding these lines:
table.detail-view th {
width: 25%;
}
table.detail-view td {
width: 75%;
}
to site.css is one of many approaches to "fix" this problem.
.fix-width > tbody > tr > th {
width: 20%;
}
echo DetailView::widget([
'options' => ['class' => 'table table-striped table-bordered detail-view fix-width'],
'model' => $model,
'attributes' =>[],
]);
The correct answer is the width of the contents. If you look carefully to the content you see for different witdh of content. Alias different width of label column and value column. In this case the width is automatically manager by the widget. You can set them by css
I have a very simple webgrid with 3 columns:
View
columns: grid.Columns(
grid.Column("Applicant Name",
format: (item) => #Html.ActionLink((string)item.Name, "EditApplicant", "Applicant", new { id = item.ApplicantId },
null), style: "AppName")
, grid.Column("Role", "Role", style: "Role")
, grid.Column("ApplicantSkills", "Skills", style: "AppSkills")
I want to set my columns to a fixed width. I have tried using percentage widths here and exact widths like 500px, 100px etc, and they all work initially, but are lost after postback.
css:
.AppSkills {
width: 70%;
}
.AppName {
width: 20%;
}
.Role {
width: 10%;
}
My grid is a results grid, which is populated from a number of filters, so every time the user selects different filters and clicks search the results are changed and the grid re-populated. What im finding is the grid column width style is being lost. Here is what my screen looks like. Initially it looks fine, but after selecting different filters and hitting search, the grid column widths are lost.
I have tried posting my form as a GET and a POST to see if it was the Get that was losing the formatting. But both yield the same results.
#using (Html.BeginForm("Search", "Home", FormMethod.Post))
{
Is there anything obvious I'm doing wrong here? Or is there any way I can ensure a fixed width on my grid columns so they don't move about?
You're missing spaces after the commas, so it's probably treating one of the entries as a big unbreakable word. If you can't change the underlying data, assuming it isn't the code doing the concatenation, you might be able to use the css word-break property to sort it.
Make sure that after postback that the grids still have the classes applied to them.
Also, please post the HTML for us to view so we can diagnose the problem since we are not to sure if they are styled divs or a table.
If it is a table, try running the following CSS. Basically, it will target the columns individually without class names, just in case the classes are lost during postback.
td:nth-child(3) {
width: 70%; /* targeting the skills column */
}
td:nth-child(1) {
width: 20%; /* targeting the name column */
}
td:nth-child(2) {
width: 10%; /* targeting the role column */
}
Is there an easy way to change the order of the sort and move buttons from the PrimeFaces picklist?
For better usability i need the buttons to be in this order:
Sort:
all up
up
down
all down
and for moving:
all to the right
right
left
all to the left
I am just the one who implements a dummy page and someone else has to implement as a PrimeFaces Component what i am designing here. So i don't want it to be a impossible task for the programmer.
There is no built-in buttonTemplate feature, you can change the order with css though.
Code:
.ui-picklist-button-add {
position:relative;
top:25px;
}
.ui-picklist-button-add-all {
position:relative;
top:-40px;
}
-> This is what 'Optimus Prime' says. His answer in the Prime Faces Forum on my question
you can try doing it with jQuery like that : JavaScript moving element in the DOM
Use firebug to find out all the classes of the buttons and its containers
for example try jQuery(".ui-picklist-target-controls .ui-picklist-button-move-top").insertAfter(".ui-picklist-target-controls .ui-picklist-button-move-top");
If want to patch the primefaces jar look at the PickListRenderer.java file look where they use the encodeButton method , and just re order the buttons...
although you will have to re patch it each time you'll want to upgrade
I am the same problem but still got pixel issues with different screens.
Using flexbox should be better than px change:
.ui-picklist-buttons-cell{
display: flex;
flex-direction: column;
}
.ui-picklist-button-add {
order:2;
}
.ui-picklist-button-add-all {
order:1;
}
.ui-picklist-button-remove {
order:3;
}
.ui-picklist-button-remove-all {
order:4;
}
Example: https://codepen.io/Frank_Worker/pen/abzYmYr