Im trying to make wider field of "last post" in phpBB. I edited CSS "lastpost" class from 250 to 300 value but looks like left fields are not responsible so extended field goes on next line and forum's list get f*ed up. What I should edit more?
Address of phpBB is: http://schiza.me
Thanks
You need to change multiple selectors.
Here is an example :
dd.lastpost, dd.redirect, dd.moderation, dd.time, dd.info {
width: 300px;
font-size: 1.1em;
}
Other table lines will need to always keep the same total size you will migth want to change an other property like that one for th number of topics and views :
dd.posts, dd.topics, dd.views {
width: 75px;
}
Related
Just created a registration form, and I want to extend a label text to be shown into one line. With CSS inspector found that class is:
.rmagic .rmrow .rmfield label
and when I insert:
width: 600px;
It is working fine, but extends all other fields as well, and I just need the last one. I set a custom class to that field, called posledno but when I insert it into my custom CSS:
rmfield.form_1_1-element-18.posledno label {
widht:600px;
}
It doesn't make any changes. How to extend this field ? Page example at the bottom.
and I just need the last one
Since you need the last-child of an element, you're better off using the :last-child selector.
Here is what would work:
#rm_form_page_form_1_1_1 .rmfieldset .rmrow:last-child .rmfield label {
width: 600px;
background-color: #f00; /** for easier identification */
}
Although I would recommend using % instead. (relative to the parent element unit)
In prime-ng turbo table , when we put filter dropdown in scrollable table dropdown going inside the table
Without scrollbale table dropdown works perfect.
This works perfect
but when scrollable table , dropdown is going inside the table
Not works perfect.
so I want to do dropdown outside the table not inside the table.
This is a link https://primeng-table-bry1sl.stackblitz.io/ to see the code. Please see in 1024 resolution so you can see the scroll in the table and select one of the brand to filter the data.
Can anyone help me.
Try to use appendTo="body" attribute available on dropdown of Primeng, which might be helpful in your case.
Complete example here -
<p-dropdown appendTo='body' [options]="value" [style]="{'width':'100%'}" placeholder="Select"></p-dropdown>
Reference from here
The problem is here:
.ui-table-resizable .ui-table-thead>tr>th, .ui-table-resizable .ui-table-tfoot>tr>td, .ui-table-resizable .ui-table-data>tr>td {
/* overflow: hidden; */
}
Try to comment the overflow attribute or set to visible ... it works!
Solved by overwriting the below overflow to be visible:
//Old code in primeng.min.css
.ui-table-scrollable-header, .ui-table-scrollable-footer {
**overflow: hidden;**
border: 0 none;
}
//add this to your stylesheet instead
.ui-table-scrollable-header, .ui-table-scrollable-footer {
**overflow: visible;!important**
border: 0 none;
}
Also, add this in your stylesheet after the code above:
.ui-table-scrollable-view {
overflow: hidden!important;
}
see here result image
I have multiple instances of Plupload included at one page of my application, which are divided in 3 categories and can be added manually by adding a new table row.
I need to test uploading dynamically with Codeception and it's difficult to attach a file to a specific Plupload file input, because you don't know the generated id and it seems not possible to add a certain css class.
I'm trying to get the id of the current Plupload file input by doing:
init: {
Init: function(up) {
console.log(up.id); // o_1aa1e71ku20lole1v7s1veqetje0
console.log(up.runtime); // html
}
}
The problem is that up.id is not equal to the id of the file input:
<input id="html5_1aa1e71krlg119o9ks61uvl17ledv" type="file" style="font-size: 999px; opacity: 0; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;" accept="image/jpeg,image/png,image/gif,application/pdf">
How could I get the id to add a custom css class based on the section where it resides? Or do you know another way to target one specific dynamically added Plupload input with Codeception?
You can get the value via JS and then use it.
In my case, something like this (my HTML is somehow complicated, but the idea is the same in every case)
$profileId = $I->executeJS('return $("#Album_3_idAlbum").parent(".album-no-cover").find(".moxie-shim.moxie-shim-html5").attr("id")');
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 */
}
I've got CSS on my links depending what type of link it is. In this case it's password protected, and external link.
So I've got CSS like this:
a.external-link:after { padding-left: 2px; content: url(../images/icon-external-link.gif); }
a.restricted-link:after { padding-left: 2px; content: url(../images/icon-lock.png);}
However when I try something like this:
<a class="external-link restricted-link" href="some link">Some Link</a>
It only displays the last icon, in this case the icon-lock.png. Which makes sense, since the content value can only be set once not combined, so the last class declaration is overwriting it. Is there anyway to combine these two so I can mix and match these link classes easily (I've got 4 total). I don't want to make separate classes/images for each combo.
Hate to break it to you, but you're going to have to make separate classes/images for each combo. Especially as there would be no way of knowing which content should go first.
a.external-link.restricted-link:after
{
content: url(ext) url(res);
}
vs
a.external-link.restricted-link:after
{
content: url(res) url(ext);
}