SOLVED. Problem below and as simple a fix as I can outline.
Visual Studio 2013 + AjaxToolkit 4.5.7.1213 (most recent stable).
Web forms app. I have a very simple page. It renders perfectly in IE compatibility view or Chrome's IE tab extension. However, in Chrome 33.0.1750.154 (couple weeks old version), or IE 11 the header of a tab in the tabcontainer is cut off horizontally; the bottom just isn't there. I have googled, and others had similar problems a while ago but nothing seems to easily resolve it. Doesn't matter if I use the inline HeaderText of the tab panel or a Header Text section, same thing happens.
I discovered that the problem resolved if I stopped using bootstrap.css.
Here is the problem:
Ajaxtoolkit has its own CSS, and this can be observed by looking at the source code for the tabcontainer online:
http://ajaxcontroltoolkit.codeplex.com/SourceControl/latest#Server/AjaxControlToolkit/Tabs/Tabs_resource.css
The default css class that the ajaxToolkit:TabContainer uses is .ajax__tab_tab. The offending code is in .ajax__tab_tab. It specifies a height of 13px. That cuts off the text. If I increase it to 18 px (on default font size), no issues.
Since the cssclass of ajaxToolkit:TabContainer can be specified, what I did was copy out most of the .ajax__tab_xp from the ajaxToolkit site, rename it to .customAjaxTab, place it in my own .css file, and then set CssClass="customAjaxTab" in my TabContainer.
Unfortunately, the images that the TabContainer default css calls use a "WebResource" call that I didn't get to work, so I made my images. My new css:
.customAjaxTab .ajax__tab_disabled { cursor: default; color: #A0A0A0; }
.customAjaxTab .ajax__tab_header {font-family:verdana,tahoma,helvetica;font-size:11px;background:url(Images/Tab_bottomline.png) repeat-x bottom;height:21px; }
.customAjaxTab .ajax__tab_header .ajax__tab_outer {padding-right:4px;background:url(Images/Tab_unselected.png) no-repeat right;height:21px;}
.customAjaxTab .ajax__tab_header .ajax__tab_inner {padding-left:3px;background:url(Images/Tab_unselected.png) no-repeat;}
.customAjaxTab .ajax__tab_header .ajax__tab_tab {height:18px;padding:4px;margin:0px;color:black;}
.customAjaxTab .ajax__tab_header .ajax__tab_hover .ajax__tab_outer {cursor:pointer;background:url(Images/Tab_unselected_hover.png) no-repeat right;}
.customAjaxTab .ajax__tab_header .ajax__tab_hover .ajax__tab_inner {cursor:pointer;background:url(Images/Tab_unselected_hover.png) no-repeat;}
.customAjaxTab .ajax__tab_header .ajax__tab_hover .ajax__tab_tab {cursor:pointer;}
.customAjaxTab .ajax__tab_header .ajax__tab_active .ajax__tab_outer {background:url(Images/Tab_selected.png) no-repeat right;}
.customAjaxTab .ajax__tab_header .ajax__tab_active .ajax__tab_inner {background:url(Images/Tab_selected.png) no-repeat;}
.customAjaxTab .ajax__tab_header .ajax__tab_active .ajax__tab_tab {color:black;}
.customAjaxTab .ajax__tab_body {font-family:verdana,tahoma,helvetica;font-size:10pt;border:1px solid #999999;border-top:0;padding:8px;background-color:#ffffff;}
This link has more on custom css for the TabContainer:
http://www.asp.net/ajaxlibrary/act_TabContainer.ashx
This worked for me, add in the bootstrap.css and bootstrap.min.css
.ajax__tab_tab
{
-webkit-box-sizing: content-box!important;
-moz-box-sizing: content-box!important;
box-sizing: content-box!important;
}
xadriel's solution works - but, I have seen many comments stating 'Do not modify the Bootstrap.css file' - so I added xadriel's code segment to my site.css file and it works great! (Especially considering I'm using CDN linked CSS/JS so can't modify them...).
.ajax__tab_tab
{
-webkit-box-sizing: content-box!important;
-moz-box-sizing: content-box!important;
box-sizing: content-box!important;
}
I have an older VS2008/.NET 3.5 very large website that I am adding Bootstrap to, and I had to override a few Bootstrap settings by adding local site.css class names, then add those custom class names to the control needing fixing (this ensures changes only apply where needed and don't affect other areas). Some required !important to ensure they are changed (i.e. change color/background-color for a drop-down control where 'form-control' colors were being applied and I didn't want them). Doesn't seem necessary to add !important here as all I did was add this to site.css and it worked.
Related
I'm trying to make all links on my page have a custom underline similar to this.
Here's what I have so far of a menu that's going to use this feature:
CodePen
The underline, instead of appearing under each link, appears under the "toolbox" div (the link objects' grandparent).
I've tried just making the first CodePen but with the features SCSS allows you (& and nested rules), but I seem to be missing something and won't even show the underline. I'm guessing it has something to do with my use of the parent selector.
How do I make my current code work correctly? If the issue is with my use of parent selectors in general, what is the correct selector to use in this case?
(Stack Overflow is making me put this)
You are using position: absolute in ::after therefore the underline will have absolute position not related to the <a>. Just add position relative to <a> thus inclosing the absolute ::after content to it.
.navbar {
background-color: #191919cc;
padding: 10px;
border-radius: 10px;
a {
position: relative; // here
margin: 0 10px;
}
}
codepen link: https://codepen.io/ashwin-chandran/pen/BaZjQLz
I'd like to use the theme styles to generate different CI for sub companies of our main company. I would like to insert every sub-companies logo into the top naviagtion bar. The plan was to have a seperate theme style for each sub company and within each style have a custom css code which sets the background image to a referenced static file (or theme file). Unfortunately the custom css code does not seem to evaluate the substitution strings so the images can not be rendered. e.g.
div.t-Header-logo {
background-image: url(#APP_IMAGES#COMPANY1_LOGO.png);
background-repeat: no-repeat;
width: 250px; /*or your image's width*/
height: auto; /*or your image's height*/
margin: 0;
padding: 0;
}
Is there any way to achive different logos per theme style?
Thanks for your support
replace the #WORKSPACE_IMAGES# reference with it's resolved name in the CSS file.
e.g. #WORKSPACE_IMAGES#add.gif becomes-
http://apex.oracle.com/pls/otn/wwv_flow_file_mgr.get_file?p_security_group_id=441224701954687600&p_fname=add.gif
Get the resolved name for your workspace by viewing page source, copy and replace #WORKSPACE_IMAGES# with the same. It will work.
Note: make sure that the image file you have uploaded is not specific to an application.
i actually really like this approach that is big img background, but i want it to be fluid with windows's height as well (before we scroll down to other section or div), so before reaching mobile screen, its height can always stretch and fill the whole browser screen while logo & content inside is always in the middle
i like this site, http://peterfinlan.com/, i emailed to enquire but never get any response about how to make it, i try to follow its css, but i just couldnt make my header as its, i dont really see any other flexbox css other than div.hero-content, and yes i am new to flexbox, does it have javascript or what?
can you help me?
To make a div fill the site using flex box, you need to do the following:
<body>
<div id="mainWrapper">
<div id="headerWrapper">
<!-- HEADER CONTENT HERE -->
</div>
</div>
</body>
with the following CSS
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#mainWrapper {
display: flex;
flex-direction: column;
min-height: 100%;
}
#headerWrapper {
flex: 1;
}
See an example in action here.
In this particular context, however, you don't necessarily need a flexbox as #mainWrapper already stretches over the complete site.
While flexbox is nice, don't force its usage just because it's new. Getting rid of flexbox and #headerWrapper wouldn't do any harm here.
Please note that I did not include any vendor prefixes here, so it may not work in all browsers as is. I recommend you use a tool like autoprefixer before you deploy your CSS.
I am working with editable slick grid and copied the code from here:
Code
Demo Example
I have included required JS files and the CSS. But when the grid loads, the LongText fields acts as Text field and remains uneditable.
See below image for more information.
I do not see any JS error on the console. What could be the reason for this behavior??
Upon further investigation, my friend found out that the pop-up which shows the textarea, does comes up but the its style is set as disply:none . This style is applied to the div which actually shows the pop-up. If we change the style for this div to diplay:block I can see the pop-up.
element.style {
z-index: 10000;
position: absolute;
background-color: white;
padding: 5px;
border: 3px solid gray;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
top: 489px;
left: 505px;
display: none;
background-position: initial initial;
background-repeat: initial initial;
}
Update: I just came to know the issue is due to wrong version of jquery being used. Please check this link for working example:
problem: On index.html page, if I change the jquery version from 1.7 to 1.9, the pop-up on description field does not appear. I am using following CDN for jquery. I cannot switch back to lower version of Jquery as I am using version 1.9 for other purpose in my project.
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
To answer my own question, I am now using latest version of slick grid (2.2.2 at the time of publishing this answer) which supports jquery 1.9 as well. I must give credit to #BelowTheRadar for his suggestion.
I'm moving from FCK editor to CK editor 3.6.3 and the site has a background image, which is appearing in the CK editor. I need to remove this while using the same CSS file for both the general site and the CK editor (to pick up on CSS for the styles dropdown).
I tried setting config.BodyClass to a style with no image - this works on FCK2.x but not the CK3. I also found via google a config.extraCss setting but I don't see it in the docs, and it does not appear to do anything anyway.
Fullpage is off (i.e. editor is not producing <body><head> etc tags))
I've got a workaround by having two CSS files, one for the site and one for CK with a different body style, but there must be a better way?
Thanks,
Kevin
Config section:
config.stylesSet = 'my_styles:/admin/ckeditor/styles_dropdown.js';
config.contentsCss = '/newdesign/style.css';
//config.extraCss = 'body {background: none;background-image: none;}';
config.BodyClass = 'fckbody' ;
CSS section (of the 'main' css file)
body{
margin:0px; padding:0px; background-image:url(/newdesign/site_bg19.jpg); repeat; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#393939;
}
.fckbody {
background-color: white;
background: none;
background-image: none;
text-align:left;
}
The correct name in CKEditor is bodyClass with an initial lower case.
Thought I should post my insight here for my findings. I came across this page while looking for a reason why my CKEditor was showing a background image of my site.
If you CKEditor is showing a background image on the Make a Comment section of a node :
1 - Head to "admin/config/content/wysiwyg"
2 - click edit to the text format for which text format is showing the background image
3 - click the CSS tab drop down
4 - change the Editor CSS to "Editor Default CSS".
Hope this helps someone!