It hurts me to have to ask this question here, but one full day of searching through the internet didn't get us an answer so far.
Like you can see, the content is stuck on the left side.
Adding the CSS .od-ClientFormFields-fieldsContainer {
max-width:100% !important;
} didn't have any effect. It does still limit the max-width to 378px. I just want to strech it to full width. Just this list, just on this page. Coming from PHP, I expected 5 minutes work max. Now a day is lost and I hate MS a little more...
Update:
in my display form (DispForm.aspx), I added my style from above below the given style:
<SharePoint:StyleBlock runat="server">
.ms-bodyareaframe {
padding: 8px;
border: none;
}
In this form, I can see just some lines (108) of code. Am I looking in the wrong place? I tried to create a new DisplayForm, but in the end it was nasty. The list was placed centered and didn't work properly. I couldn't even edit it.
Plus I've had another menu there, which I didn't have in my original DispForm.aspx, just "edit all". At that point, I stopped. I just want the list to be wider.
Related
I've been trying to figure this out all day but have reached my code knowledge limit as I try to change the child theme to achieve this.
Here's an image showing what my site currently displays, next to an image of the desired result.
What I have VS What I want
I've tried using a few snippets of code I've found on the Stack Exchange that remove Woocommerce descriptions but with no luck. I'd like to remove the gap, the description title, but must keep the description box itself because that's what allows the tabs at the bottom of the page.
Here's a link to the page itself, I can find and isolate the gap and fix it using the html, but I've no idea how that relates to the CSS (I'm new to this) Link : https://folduptoys.com/product/space-garden-playset/
Here's how it's currently set up, I'm using the Salient theme, with the 'Product Tab Position' set to 'Fullwidth Under Images'.
Any help would be really appreciated. Thank you x
-Alex
Here's what will work but it's important to note that if other tabs show up, like 'Attributes' or 'Dimensions' that they'll be visible, but the `Description' tab won't be. So you'll have to consider whether you want it to work that way or not.
There's two things going on, first, the margins on the tab menu were big. 70px on top and 50px on the bottom. Seems too large in my opinion but I long ago gave up guessing on why Salient's devs do anything.
The second thing is to hide the 'Description' tab. If other tabs end up being present though, they'll show up in it's place.
div.product .woocommerce-tabs .full-width-content[data-tab-style="fullwidth"] ul.tabs{
margin:0 auto;
}
#tab-title-description{
display:none;
}
If what you want is to entirely remove the tabs navigation, meaning that if other tabs are there, no one will be able to see/access them, so not a good idea unless you're also modifying the tab content layout so that they all display, then use this to hid that whole bar.
div.product .woocommerce-tabs .full-width-content[data-tab-style="fullwidth"] ul.tabs{
display:none;
}
I'm trying to make an application that uses a tab widget as its top-most layout element besides the MainWindow and the central widget (as created by default by Qt Designer). For that purpose, I don't need any margins on my QtTabWidget.
Unfortunately, I can't seem to fully get rid of them. I basically want the QtTabWidget to take all the space available except for the menubar and the status bar.
I came darn close to having it sorted out, but the right margin refuses to subsede even after I've set it to 0 (central widget's layoutRightMargin is set to 0). Here's an image of the issue:
If you zoom in, you'll notice the right margin between the tab and the application frame border. SO squishes the image a bit so you might have to zoom it to see it, but trust me it's really visible (and annoying) at full resolution.
Sounds like you might want documentMode:
In a stylesheet, this seemed to work for me:
#tabWidget::pane { border: none; }
You may or may not also need
#tabWidget { border: none; }
I have read the answers to the other [very] related questions, but I thought I would pose it again since polymer updates might have been made.
I can change all the colors in [dart] paper-scaffold (core-scaffold) - the menu and toolbar, but I cannot change the color of the header across the top. It is always background-color=#526E9C. The only way I can do it is change the core-toolbar style in the generated (using pub build) index.html. And this one line change sets the color across the whole header across the browser window (which is what I want). So I can get by.
When I do style:
core-toolbar{
background-color: #7A418D;
color: #FFF;
}
it only changes the color above the drawer, and not across the whole top. It's very mysterious why it just does that bit!
I have tried shadow-shim, core-scaffold::shadowdom.. etc. I have tried changing the /src/ core-scaffold.html - and more, where this pervasive value #526E9C appears.
In my website (sekpa.org) it shows this blue (#526E9C) half.
Is it just a bug? If it is, I'd be very happy in that knowledge!
Thanks Steve
There are two core-header-panels inside a paper-scaffold.
Each core-header-panel contains one core-toolbar.
The left collapsible core-header-panel as well as its inner core-toolbar are sitting in the normal Light DOM, and that's why you can change its color by specifying the css like that.
However, the right core-header-panel and core-toolbar are inside paper-scaffold's Shadow DOM. In order to change the color of this core-toolbar, you need to do something like -
paper-scaffold::shadow core-toolbar {
background: #7A418D;
color: #fff;
}
For more info, please refer to this link.
We are using the all in one Calendar from Wordpress and have it set to week view (only this view). Everything is working fine, but there is one problem when you have set two events to the same time. There is an overlaps in the two events and you can not see one of the two. We can not change it in css and did not find a way to modify the code.
In the code the css is automaticly made, for instance to:
top 1185px
height 60px
left 8px
Can someone help?
Ok we did find the answer for this question:
Open week.php (in the template file) and look for the code
left: px;
The 8 is the 8px left and because it is just 8px you can not see the event behind it. We changed it to 30 so:
left: px;
Now we can see the other event
The attached screenshot is from OS X/Firefox 3. Note that the center tab (an image) has a dotted line around it, apparently because it was the most-recently selected tab. Is there a way I can eliminate this dotted line in CSS or JavaScript? (Hmmm...the free image hosting service has reduced the size of the image. But if you could see it, you'd notice a dotted-line select area around the block.)
Screen Shot http://www.freeimagehosting.net/uploads/th.fadf78173b.png
You'll want to add the following line to your css:
a:active, a:focus { outline-style: none; -moz-outline-style:none; }
(Assuming your tabs are done using the a element, of course.)
[edit] On request from everyone else, for future viewers of this it should be noted that the outline is essential for keyboard-navigators as it designates where your selection is and, so, gives a hint to where your next 'tab' might go. Thus, it's inadvisable to remove this dotted-line selection. But it is still useful to know how you would do it, if you deem it necessary.
And as mentioned in a comment, if you are only dealing with FF > v1.5, feel free to leave out the -moz-outline-style:none;
In your onclick event, this.blur()
or, specifically set focus somewhere else.
For starters, try this
*,*:hover,*:focus,*:active { outline: 0px none; }
This will however decrease usability.
You'll want to selectively apply alternative effects where relevant to give people such as those whom navigate primarily with the TAB key have an idea of what currently has focus.
div.foo:active,
div.foo:focus,
div.foo:hover
{
/* Alternative Style */
}
You can start by looking at the :focus and :active pseudo classes, although you probably shouldn't be completely removing any formatting from these cases, since they are an invaluable usability aid.
using
*:focus {outline:0px;}
will remove styling for inputs and textareas when selected with the mouse. Make sure you append these styles with a border for these form items if you choose to remove all outlines on :focus.