Demo is found at link remvoed and using jqgrid version 4.9.2
In there you'll find I made a link reference to seperate CSS file at https://dealerapp-dev.bookitout.com/Member/Css/jqgrid-v4.9.2/ui.jqgrid-bio-extended.css
In that file, I override the default left/right padding found at ui.jqgrid.css, changed it from 2px to 15px in ui.jqgrid-bio-extended.css
The left padding works great but right padding is hidden (or chopped off).
.ui-jqgrid tr.jqgrow > td { padding: 0 15px 0 15px; }
How to have it not be chopped off instead?
First of all one can see that the width of the column is not optimal after auto-resizing. The problem exist because getAutoResizableWidth method used during calculation of the optimal size suppose that the padding of all rows is the same. There are exist the first row of the width 0px which have class jqgfirstrow instead of the class jqgrow used in other rows with data. To fix the problem you should adjust .ui-jqgrid tr.jqgfirstrow > td too
.ui-jqgrid tr.jqgfirstrow > td { padding: 0 15px 0 15px; }
I would recommend you to use the following more common CSS rule:
.ui-jqgrid tr.jqgfirstrow > td,
.ui-jqgrid tr.jqgrow > td,
.ui-jqgrid tr.jqgroup > td,
.ui-jqgrid tr.jqfoot > td,
.ui-jqgrid tr.jqfoot > td,
.ui-jqgrid tr.footrow > td {
padding: 0 15px 0 15px;
}
and to consider to increase the padding of column headers additionally:
.ui-jqgrid .ui-jqgrid-htable th {
padding: 0 15px 0 15px;
}
.ui-jqgrid .ui-jqgrid-resize-ltr {
margin: -2px -15px -2px 0;
}
About chopping off the text in the cells there are exist a misunderstanding of padding in my opinion. The text not have to be cut off. I don't know CSS good enough, but I can suggest you to place the content of every cell inside of <div> which have CSS property overflow: hidden. It will follow the cutting of the content in the case. The corresponding code
$("#" + _jqgridSpreadsheetId).bind("jqGridAfterLoadComplete jqGridAfterAddRow", function () {
$(this).find("tr.jqgrow>td").wrapInner("<div style='overflow: hidden;'></div>");
});
will reduce the performance of the grid, but it will make chopping off the texts like you want. It's recommended to add the code before the grid will be created. Only in the case you will be sure that the code will work on the first loading of the grid.
The last remark. You should add jquery-2.0.3.min.map and in the same folder where you have jquery-v2.0.3.min.js, because comment //# sourceMappingURL=jquery-2.0.3.min.map exist in the jquery-v2.0.3.min.js. In the same way jquery-2.0.3.min.map contains typically "sources":["jquery-2.0.3.js"] and so you should include non-compressed file jquery-2.0.3.js too. Currently loading of you demo in debugger produces the following error message in the console:
HTTP404: NICHT GEFUNDEN: Der Server hat keine Übereinstimmungen für
den angeforderten URI (Uniform Resource Identifier) gefunden. (XHR):
GET -
https://dealerapp-dev.bookitout.com/Member/Scripts/jquery-v2.0.3/jquery-2.0.3.min.map
Related
Hi I have a tabulator table which the headers are all icons
I want to add in a fitler box for one field but when I do so using the headerFilter:true the filter is below the icons
is there any clever way to have the filter on the same level as the icons, space is a premuim on my page so ideally Id like them all aligned
I've solved this by modifying the tabulator css I had to give the header-filter a negative top position and it now works fine
`.tabulator .tabulator-header .tabulator-col .tabulator-header-filter
{
position: relative;
box-sizing: border-box;
margin-top: -23px;
width: 100%;
text-align: center;
height: 33px ;
} `
I created a button using Zurb Foundation styles and Sass mixins. I used #include dropdown-button($base-style:false); to get rid of the default arrow style. Now I want to insert my own arrow in its place (right side)
Here is the default button:
Here is my button now:
I want mine to look something like this:
Here is my html:
<a class="login width-limit" href="#" data-dropdown="drop">Client_Test_1 </a><br>
<ul id="drop" data-dropdown-content class="f-dropdown">
<li>Logout</li>
<li>Account Settings</li>
<li>Change SMTP Settings</li>
</ul>
Here is my scss:
.login {
#include grid-column(2);
#include button();
#include dropdown-button($base-style:false);
font-family: $font-stack;
font-size: .9em;
color: #fff;
background-color: $secondary-color;
height: 27px;
border-radius: 7px;
margin: 6px 0 5px 0;
padding: 5px 4px 5px 4px;
}
.width-limit {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-right: 2em; //shrink text
}
.login:hover {
background-color: $primary-color;
}
Here is a fiddle: http://jsfiddle.net/Yq5uU/
How can I add my own custom arrow to make it look like the third example?
Thanks in advance.
You can't make it infinitely long and not break page layout. So simple solution will be deciding how long it can get and setting button container to fill maximum amount of columns before it starts to look wired. Then you can align your button inside the container as you wish and if it gets too long you can replace part of the name with "..." css:overflow:hidden; text-overflow:ellipsis; or show the short form with js.
example: http://jsfiddle.net/z8aWL/2/
The grid column 2 mixin gives you this:
width: grid-calc($columns, $total-columns);
If you're using the default 12 grid, your inputs look like this:
width: grid-calc(2, 12);
The calc function returns the percentage of 2 divided by 12
width: 16.67%;
You are then overwriting that width value with 150px. If you're using default grid values for large rows, that should be closer to 167px wide.
You should avoid setting hard px values if you want to keep this responsive.
Now as for long names, you have two basic options. Either truncate names, by hiding overflow (as JAre suggested) or let crazy long names break your grid, but be contained in the button. Then you would need to not set a width. All the grid col mixin does is give you a width percentage. The row sets the value of the width (of which the col is a percentage). Your button is still contained in a row, so you should be good to go.
I think your best option, if you have access to your username database is to find the "worst case scenario" and design for that. Or better yet, have a shortened name value returned to your design in the first place.
I have a header strip with a shadow effect and contains navigation links; when you hover over them, a sub-menu appears.
See test page here
How can I make the sub-menu appear on a layer BEHIND the header strip? I need the header's box shadow to cast on top of the sub-menu.
Currently the sub-menu ( .main-navigation li ul ) has a z-index lower than the header strip ( .site-header ) but this is having no effect. I've tried giving it a negative z-index but this puts it behind the content (therefore hidden) and the links no longer work - I've read this is a common problem so I'd like to avoid using a negative z-index.
Hope you can help.
Z-index might not be the solution in this case, due to the stacking context of elements. Without re-ordering your html, you might try this trick using box-shadow on a pseudo-element attached to your sub-menu. For example:
.main-navigation li ul { display: none; position: absolute; top: 100%; margin: 0; overflow: hidden; }
.main-navigation li ul:before { content: ""; display: block; width: 160%; height: 10px; margin-left: -30%; box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.2); }
Check this DEMO. Note that this is only one possible solution, as there are likely other ways to achieve the same effect.
The text content should already naturally appear behind the shadow of the header since it is an adjacent sibling element, ordered after the header in the html. (I added a background image to the content div in the demo to show this.)
I have created a custom drop-down element, which is listed on this page:
http://jsfiddle.net/spryno724/2snUH/3/
Click on the drop-down menu in the "Result" secion, and you will see the problem. By rolling over the choices in the expanded drop-down list, you notice the roll-over indicators don't stretch to the available width.
While still maintaining the width of the menu when it was collapsed, how can I stretch the background color of each menu item? I'd also like each of the menu items to remain on their own line. A couple of adjustments that I made the CSS caused some of the list items to wrap their own text.
Thank you for your time.
Use negative margins with width: auto instead of width: 100% for items:
UL.dropdown.open LI {
margin: 0 -23px 0 -10px;
padding-right: 23px;
padding-left: 10px;
position: relative;
width: auto;
}
See http://jsfiddle.net/2snUH/4/ .
Or get rid of horizontal padding for UL (and specify horizontal padding for LI instead), and then you will not need negative margins for LI items.
To fix the width of the li elements use:
ul.dropdown.open {
padding: 5px 0;
}
ul.dropdown.open li {
display: block;
padding: 5px;
text-wrap: none;
width: 100%;
box-sizing: border-box;
}
Quick question. Please see the example at http://www.urbanelementz.ca/ ...
The Image & Border I'm referring to is located on the top left of the main content area and has white text wrapping beside and below it.
Here's the URL to the image I'm talking about:
http://www.urbanelementz.ca/css/images/uelementz-index-colorefx1.png
I made the dotted border thicker and white so you can see what I'm talking about. I have a top margin and right margin set on the image so the text isn't right up against the image. How can I make the border go right up against (sit flush) with the image instead of around the image + the set margins. Without using padding as well if possible. I want to keep my margins set. Is there a way to fix this?
Thanks very much!
Add/edit CSS with:
img#colorfx1 {
padding: 0px;
margin-right: 10px;
}
img#colorfx1 {
border-collapse: collapse;
border-color: #FFFFFF;
border-style: dotted;
border-width: 3px;
float: left;
padding: 2px 5px 0 1px;
vertical-align: top;
}
Change padding to margin, and it looks good.
I think you intended to write margin in the first place.
I see this style applied:
img#colorfx1 {
border-collapse: collapse;
border-color: #FFFFFF;
border-style: dotted;
border-width: 3px;
float: left;
padding: 2px 5px 0 1px;
vertical-align: top;
}
Removing the padding fixed it for me...
Get rid of the padding on the image. Set padding to 0:
img#colorfx1 { padding: 0; }
From what I see you don't have margin set to that image. You do have padding set to it though.
Once you remove padding and use margin instead it should be fine.
I think if you set your css like this
img#colorfx1 {
padding: 0px;
margin: 0px 5px 0px 5px;
border: #FFFFFF dotted 3px;
float: left;
}
you can use pandding such as :
<img src="test.png" width="80" height="74" border="2" style="border-style:dotted; padding-left:5px">
this will appear same as what u want, here is some stuff also :
link
regards...
I have a meta-answer: yes, padding was your problem. You might be able to avoid asking this sort of question in the future if you start using a) Chrome's "Inspect Element" context menu command, or b) Firebug for Firefox, which is more or less the same thing. Look at the element's calculated style and you can see exactly what property makes your element behave the way it does.