the site : http://academie-igs.com/?lang=fr. Look at the menu (french first menu) it's called : "environment de travail". when hover on, the word wrap and go to another line...
I use firebug to check the style sheet, take screen capture that i check in Photoshop. I cannot see the problem... why it append?
I don't know what do that behavior. Can you point me where to look ?... it's a mystery for me right now !
The issue was with spacing.
Line 104 on superfish.css, replace with the following:
.sf-menu li li a:hover {padding:8px 5px 8px 17px; background:#353535; background:-moz-linear-gradient(center top , #4C4C4C, #313131) repeat scroll 0 0 transparent; color:#fff !important; outline:0; background: -webkit-gradient(linear, left top, left bottom, from(#4C4C4C), to(#313131));}
You had too much spacing on the right of it on hover on the padding property that was causing the text to wrap downward.
Related
Is there a way I can change this select drop down to a custom select drop down with a down arrow instead of the default quill arrows?
You can select ql-picker-label, and makes its default icon (the double pointing arrow) which is enclosed within an svg hidden, by setting display: none. Then, since the text itself is enclosed within the ::before pseudo-element, you can set the background-image on the ql-picker-label itself. The code below should be self-explanatory. However, because the text is within ::before element, I could not find an easy way to make space between the icon and the text. Perhaps, you can edit the icon image, and manually insert space before it.
This sample code below will select all ql-picker-label elements, you can avoid this behavior by entering more specific selectors.
.ql-picker-label svg {
display: none;
}
.ql-picker-label{
display: inline-block;
background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
background-repeat: no-repeat;
background-position: center right;
}
I have problem with fullpage js, situation is:
in full page content there is element with styling for example:
.element{
left: auto;
right: 5vw;
width: 50%;
bottom: 15vh;
transform: none;
}
When page is load (with this section anchor or no ) div looks like for about 100px more to bottom as it should be. When this first section is scrolled down and then back to top position of this element looks as it should be.
I know that element is in same position as in code, but don't know why looks more to bottom before first scroll.
I was also try with min-height and padding:15vh 0 but usucessfuly:/
Thanks for help
solution was to adding height 100vh to parent element of this absolute element. In my case slick slider.
I cannot find a good solution to this without using a vuetify fork, which isn't stable and appears to be the older version anyway. I will link to it in the comments.
The only way I can think to do this is to line up two data tables side by side, which creates problems in itself. I know there are other plugins/libraries that allow this, but I would really prefer to stick with vuetify. Has anyone had success with doing this?
My project is to create a grid that allows the user to set up a rotation. Each column (after the first one) is a dynamically created week (Friday's date is column header) that shows if there is an opening in a given organization. The struggle is to get enough weeks to show up on the screen at once. The first column is the organization. So, I want to know what organization my row is in for a given week as I scroll to the right. That's why I need to freeze the first column.
I'm open to other solutions - like a different way to show the header, perhaps, that would allow me to fit in 52 weeks worth of dates.
I am also searching for a solution to this. The nearest I have found is this complex bit of CSS Source
<style>
table > tbody > tr > td:nth-child(1),
table > thead > tr > th:nth-child(1) {
position: sticky !important;
position: -webkit-sticky !important;
left: 0;
z-index: 9998;
background: white;
}
table > thead > tr > th:nth-child(1) {
z-index: 9999;
}
</style>
However, it doesn't quite work for my case.
I have something like this
Account Jan Feb Mar
123456 50 51 52
123458 38 39 32
123600 20 21 22
So what I am looking for is the Excel equivalent of putting a freeze panes on the Jan,123456 intersection, so that the months stay in place when scrolling down, and the Account column stays in place when scrolling to the right.
I set the fixed-header and :height property on the v-data-table so that the header does not scroll vertically and so that it has a vertical scroll bar. The horizontal scroll bar seems to happen automatically and is specific to the table rather than the page.
Without the CSS the vertical scrolling works, though obviously not the horizontal scrolling as the Account column scrolls off screen to the left.
With the CSS the account numbers stay in position, but the headings still scroll to the left, so eg Jan replaces Account. Also when scrolling down, the Account Numbers scroll up to overwrite Account. It is closer to a solution than the basics provided by Vuetify.
I also saw the example from someone who had cloned vuetify and modified it to include fixed columns and grouping. However, I was not sure whether that was vuetify 1.5 or 2 and I have already had issues with seeing examples on 1.5 and then finding that they don't work on vue 2 which I am using as there were so many breaking changes. Like you I am also wary of adopting something that may not be supported.
I am surprised that Vuetify did not include this. It must be a pretty common requirement. I have seen an enhancement request for Vuetify 3, but it is too early to adopt that and presumably it would also mean adopting Vue 3.
Regards
Paul Simon
I finally found an approach to this that works. Another approach
However, I cannot really claim it as an answer to the original question as it only works by abandoning the use of a v-data-table altogether. I ended up just putting a standard table in between v-spacer in my vuetify card. Any attempt to use even a v-simple-table added a second unnecessary horizontal scroll bar which ruined the effect.
The bit of CSS linked above does at least give fixed header(s) and fixed column(s) with none of the issues around scrolling up over the top left corner cell of other approaches I have seen.
It is also very easy to mark which headers you want fixed (usually all) and, in particular, which columns you want fixed. Note that the fixed columns should use 'th' rather than 'td'. This is ideal for my purpose since my data source is multi-dimensional and returns row headers and then cells with numbers eg
Actual Actual Budget Budget
Country Product Jan Feb Jan Feb
UK Widget1 50 60 70 20
UK Widget2 60 80 90 100
USA Widget1 90 80 10 90
In the example above all the following are 'th'
Actual, Budget, Jan, Feb
Country, Product
Only the number cells are 'td'
As you can see, all you need to do is to mark the 'th' in the html with class="fixed" so unlike other approaches it works for an arbitrary number of columns rather than just the left most column.
I am an expert in multi-dimensional modelling, and certainly not an expert in CSS, but I modified the CSS in the linked example a little. My CSS is as follows:
<style scoped>
.table {
background-color: white;
margin: auto;
width:90%;
max-width:100%;
border-collapse: separate;
display: block;
overflow-x: scroll;
}
thead,
tbody {
display: inline-block;
}
thead {
position: sticky;
top: 1px;
z-index: 2;
}
tbody {
height: 200px;
}
th {
background-color: lightgrey;
border-left: 1px;
border-right: 1px;
border-color: black;
}
td,
th {
min-width: 100px;
max-width: 100px;
word-wrap: break-word;
}
.fixed {
position: sticky;
width: 5em;
left: 0;
top: auto;
z-index: 1;
}
td:not(.fixed) {
z-index: 0;
}
</style>
Instead of giving a fixed width for the table, I used %. I know that not all browsers support this but this is going to be an internal application. It is not a shopping site.
I also took the z-indexes down from 9999,999,0 to 2,1,0 as without this it tended to wind up on top of the Vuetify footer when scrolling down.
Regards
Paul Simon
I was hoping someone could help me with CSS to make the child options that appear when hovering on my custom dropdown menu more transparent in Blogger.
My site is: www.thenorthernmagnolia.com
Thank you so much!
Generally, making something transparent is very easy in CSS if you're already familiar with changing the background color. Use the RGBA function, like this:
background-color: rgba(0, 0, 0, .5)
Parameters go, in order: Red Value, Green Value, Blue value, Alpha value. Google has a color picker you can play with for these values.
Alpha value is the opacity, a value of 1 will be non-opaque, and 0 will be invisible.
You can try adding the following CSS to make the dropdown menu more transparent -
#cssnav > li > ul > li a, #cssnav > li > ul > li, #cssnav > li > ul, #cssnav > li > ul > li a:hover {
background: rgba(255, 255, 255, 0.5) !important;
}
Can anyone please help? My category page is seriously messing with me. I set the image width to 300px which it accepts. However it doesn't accept me changing the size of the grid. So basically, It shows as much of the 300px that it can fit into the grid and slices my images in vertically.
http://www.ellamatthew.com/dresses
.products-grid li.item {width: 300px;}
.products-grid .product-image { display:block; text-decoration:none !important; margin:0 auto 10px; position:relative; width:300px; }
Is there anything else here I should be changing? Any help here would be very useful.
Thanks
first of all your div
.col2-right-layout .products-grid li.item, .col2-left-layout .products-grid li.item
is not content width:300px; it is 160px
second major problem is with your images width it contents white space from both left and right side so it is display like this disturb alignment.
i would suggest you to remove white space or make 300px box for product so you can adjust it in your layout.
let me know if i can help you more.