I am experiencing a strange rendering problem with the select2 plugin when the fixed-header class is applied to the body tag. I have manage to replicate the problem with the demo files distributed with the template. I have checked it with versions 1.8.6.2 and 1.8.7.1
To see the problem please navigate to file:////DEVELOPER/HTML_Full_Version/plugins.html click on the turning gears on the top right side of the screen and check the "Fixed Header" checkbox. Then scroll down to "Plugins & Enhancers" widget and try to open (drop-down) any of the select2 combos (the problem appears in both of them either single select or multiple select).
More specific when the drop down box appears it goes over the input element and occupies its space instead going under it. The problem doesn't appear if the drop down box needs to go on top of the input element due to lack of space below it.
Please take a look at the following screenshots demonstrating the problem:
Single select
Multiple select
Please note that the problem doesn't appear on the on-line demo that can be found here http://192.241.236.31/themes/preview/smartadmin/1.8.x/ajax/index.html#ajax/plugins.html which is very strange but indicates that this isn't browser specific (I use Firefox), nevertheless I tried to find what the differences are between the local files and the on-line source but to no avail.
Thank you.
When you initiate plugin select2, set Json parameter {"dropdownParent": object} with the value of the object of another wrapper (not body tag) that has CSS property position:relative. For example, in case with smartadmin template, it can be $('.jarviswidget').
The problem is that body class .fixed-header sets for tag header CSS property position: fixed. Automatically generated HTML code after select2 plugin initialization also has styles position: absolute ..., and it moves select2 tags down because, by default, additional select2 HTML code is generated directly in body tag, exactly before body closed.
.
var parentElement = $(".jarviswidget");
if ($('.select2').length) {
$('.select2').select2({
"dropdownParent": parentElement,
"allowClear": !0,
"width": "100%"
});
}
Related
I added a fullwidth menu module in divi elegant themes. This should work fine, but for some reason it always generates white space above.
I could just add some css to fix the problem but the people at divi found it smart to make the extra white space an inline style. As the page is generated dynamically I cannot prevent this from being added.
I tried to add additional css with the visual builder itself.
I also went to the style.css in WordPress to add the additional code to the div, but this does not work.
As for using the inspect function in a browser and directly editing the style it works but like I said above after the page is generated I can of course edit the inline style, but how do I make it so that this is not generated to begin with.
<div class="et_dropdown_animation_fade et_pb_bg_layout_light et_pb_fullwidth_menu et_pb_fullwidth_menu_0 et_pb_module et_pb_text_align_left"
data-fix-page-container="on" style="margin-top:48px; padding-top:0px;">
So the thing I am trying to accomplish is that the margin becomes 0 bypassing the inline styling or a method to inline style from the backend in WordPress.
As adding styling to the css file does not work.
This is generated by Divi's JS. Would be better if you could share a public URL, but if you're looking for a quick patch, you could jquery to get the "top" value after the module is loaded, then counteract it with a negative margin-top of the same value.
Add this to your Divi Theme Options integrations tab (or in a .js file, then call it from your child theme's functions.php file, without the tags of course):
</script>
jQuery(document).ready(function($){
if (!$("body").is(".et-fb")) {
var fullMenuTop = parseInt($('.et_pb_fullwidth_menu').css('top'), 10);
$('.et_pb_fullwidth_menu').css("margin-top", - fullMenuTop);
}
});
</script>
The following worked for me.
Divi's full width menu module has an inline class named et_pb_row. Set its height to 0px and reduce padding to 0px as well.
If the problem still persists, you probably have stray columns in the row. Look for the class et_pb_column and do the same.
Cheers!
I have a question about how content-hiding feature is implemented on thefreedictionary.com site.
I don't understand how does it work.
If you visit the following URL with AdBlock enabled,
http://encyclopedia.thefreedictionary.com/stack+overflow
the main content will be hidden.
Even if JavaScript is disabled (I'm using "NoScript" FireFox add-on), the main content will still be hidden.
Let's look at the main content div:
<div id="content" class="yt">
The path to this div is the following (the image is clickable):
Please note that the class name (yt in my case) is different on every page refresh, so your class name may contain another 2 letters.
By looking at "Rules" and "Computed" tabs in Firefox Developer Tools we can see that .yt class has its display attribute set to none.
It is easy to check that it is this checkbox that controls the visibility of main content.
My question is: Where does this css line come from?
It looks like a css data URI, but I can't find data URIs in html file.
The html file refers to "all.css" which also does not contain setting .yt display to none.
JavaScript is disabled, so display property could not be changed dynamically by a script.
I'm interesting, what trick is being used here.
Could someone explain please?
I am editing a HTML website template, and I need to change the banner height so I edited external CSS. However, somehow it is taking an inline CSS height property so there is a space left in between.
Please let me know, if I have not written any inline CSS (and there is no inline CSS in html page), from where is that height property coming from.
Code I see in console is:
<div style="display: block; height: 445px;" id="camera" class="camera-wrap camera_wrap">
And my code is:
<div id="camera" class="camera-wrap">
<div data-src="images/Battery-Banner.jpg">
I have no idea why it is taking class camera_wrap twice.
Usually JS plugins put dynamic css that is calculated during runtime. It will be placed in inline style tag. Otherwise any static code will go to external css file. Try checking how plugin is calculating that height and than modify your HTML/css.
Try viewing the HTML source in your browser (not using inspect element, use view-source). This will show you the markup prior to any other client side processing aka. JavaScript. If the inline style isn't there when you view source then that indicates that it may be a rogue bit of JavaScript that is adding it in.
In any case can you please provide more information on the issue? Possibly a little more background on what type of website, what parts it has CSS, JS etc. With more information we may be able to help more.
If your source is showing 1 class, and when you are using inspect element it is showing other classes, then it is definitely added by js/jquery plugin.
If you want to overwrite other class css properties, either use !important in your class or use deeper dom traversing like #camera.camera-wrap{}. Than this will be given higher priority. Try which works for you.
I'm playing with the isotope js library and I've got the general concept working. My issue occurs when I put normal html/css such as inputs & charts in the isotope div it's not behaving as I expected. This html works as expected outside the isotope div.
When an isotope div is clicked I'm expanding it and showing details for that item, including inputs, charts etc.
My Goal:
Make the table containing the inputs visible in jsfiddle.
Understand why this was happening so I can put whatever content I like in here for the future.
JsFiddle showing answer
Code:
Css that was causing the issue. By adding the asterisk this says applyt he style to all child elements. Hence the reason that my table wasn't showing was that the table, rows, cells, elements were all absolutely positioned.
.containerDiv * {
margin: 0px;
position: absolute;
}
The solution css (apply relative position to the table elements):
#chartFilters * {
position: relative;
}
I've done a quick brush up on CSS and solved my problem - see question for updated fiddle. Was a very simple one in the end, it probably looked hard due to my question hence why there were no answers from the community within the last 24 hours.
I hope my steps help someone else who's new to solving these types of issues, browsers have some great tools built in these days for trouble shooting.
Steps I used for solving:
1.) The first useful step I found was to inspect the element with internet explorer via right click on the page. Then use the right click option in the source it shows to copy element with styles. This gave me a smaller version of the html for testing which I saved into a standalone html.
2.) I started pulling out html elements that appeared unrelated and making the sample simpler. Once I pulled something out I'd refresh the html in IE and check what happened.
3.) When I had a simple html I saw the absolute positioning and the asterisk, I then did a quick google to find this stack question explaining what the asterisk does.
4.) I need to leave the absolute styling in so that isotope works, but I can specify relative positioning inside the isotope, I've done this by using the asterisk myself now I know what it does! :)
#chartFilters * {
position: relative;
}
I need to find a way to hide HTML Rows (or Tables) from view without blocking them from being rendered. Setting this.myTable.Visible = false would seem to be the easiest way to hide tables from the user, but it prevents the HTML Table from being sent to the browser and that causes a problem because I am using Validators and need to make sure the non-visible elements are validated (because of page navigation logic, only some elements will be made visible to the user at a time).
I was attempting to change the Style property but asp.net says it is read-only so I cannot make it invisible using CSS. Also I would prefer not to use Javascript but if there is a simple solution with JS that is fine.
Any help is greatly appreciated.
You could make your <tr>s server tags. To do this, change your rows in
<tr id="rowID" runat="server">
So you can access their properties, such as rowID.style or class properties.
You can set this server-side by adding a display property to the style collection. The style collection property itself is read-only (you can't replace it), but you can an element to it to reflect setting that style property.
table.Style.Add("display","none")
or
table.Style["display"] = "none";
The same is true for table rows as the Style collection is inherited from HtmlGenericControl.
EDIT: The HTML control needs to be runat="server" for this to work, which I'm assuming yours is since you are able to set the Visible property.
To hide a complete table (but still render it to the client), wrap it in a div with style="display:none":
<div style="display:none;">
asp.net table goes here
</div>
Although, for single rows, this does not work. You will probably have to use some javascript (e.g. jquery, as another user recommended).
Besides using the style property, you can always put the style on the element either right on the tag itself, or in code via element.Attributes["style"] = "display: none;";. To do it in code, you need to make them server controls by adding runat="server" and setting an ID.
Thanks for the useful information guys. I was able to actually combine two of the earlier answers to come up with a great solution. For reference here it is:
I used div tags around the tables I wanted to show and hide like:
<div style="display:none;" id="tblHideItems1" runat="server">
I referenced these in the code-behind like this:
Definition:
protected System.Web.UI.HtmlControls.HtmlGenericControl tblHideItems1;
To show:
this.tblHideItems1.Style.Add("display", "inline");
To hide:
this.tblHideItems1.Style.Add("display", "none");
This allows me to show or hide the tables, without taking up blank space on the page when they are hidden, but still rendering them so they'll work with Validation controls (that was my ultimate goal) while hidden or showing.
The style tag in the definition may not be necessary but since it works now as it is, I will probably just leave it since it is being modified at runtime.
Again thanks for the insight!!
guys even table.Visible = False works
provided
u've set the runat= "server" for the table ofcourse