I have a dialog with some text in rows and columns, im using css to remove the borders of the panel/rows in the dialog box. however when I use with the target set as my dialog box it displaces everything in the dialog box but with all the borders showing and none of my custom css.
Is there a way of telling the printer to use the custom css or stop it going back to the default?
I still can't figure out why the printer is ignoring the CSS but I have found a work around.
By adding border:none; to each row and column in my dialog it works
<p:row styleClass=".ui-panelgrid" border= "0" style="border: none;">
<p:column colspan="3" border= "0" style="border: none;">
hope this is useful for someone in the future, but if anyone would care to explain why the was ignoring the custom CSS in the first place I would love to know. thanks
Related
I am building a bootstrap-grid column inside of which I have a panel.
Inside this panel I have a datepicker and there must a lot of other controls so I would need to be able to scroll down (y-axis only) inside the panel.
Unfortunately the datepicker popup window is partially hidden because of the overflow-z and overflow-x styling which enables the scrolling :
<div style="height: 480px;overflow-y: scroll;overflow-x:hidden;">
...
</div>
Is it possible to overcome this with some CSS trick?
I have found an answer on SO when the element poping out can be placed outside of the div but in my case I'm using a directive from the Angular-strap library so I need to place it inside.
I have set up a plunker to illustrate the issue (you need full-view to see it) : plunker
Well, since no one bothered to answer, I just found the answer today, which was actually very simple.
I just needed to add this in the attributes :
data-container="body"
Plunker here
I have an image and i need to use that as the breadcrumb background image. I tried but doesnt seem to be coming correctly. I have created a fiddle for this. Can somebody please help me what I am doing wrong. I am not supposed to change the html since teh same file is being used in other applications also. Only the css, I can change.
HTML
<div id="itemDisplay">
<span id="step1" class="step_on" title="Home">Home</span>
<span id="step2" class="step_off" title="Vehicle">Vehicle</span>
<span id="step3" class="step_off" title="Vans & Trucks">Vans & Trucks</span>
<span id="step4" class="step_off" title="Vanagon">Vanagon</span>
</div>
I have attached an image how the actual breadcrumb should look like
In my fiddle the alignment of the text is not correct except for the first text. The text should be aligned towards left. Also the last breadcrumb is not correct.
When the user is in the first page, only the first breadcrumb text should be bold, when he navigates to second page, only the second should be bold
http://jsfiddle.net/Dbudt/5/
Please advice
Updated demo
I've added .active class so you can use it on span on the page you need.
I've also fixed the padding for span.step_off
UPDATE
I fix the background-position for the last element.
I wrote code that simply generates a table gridview. The last column provides a print button option for each record. if the user clicks the print button a pop up window is displayed with background image and three pieces of data. it looks great on the screen but when you print the form, everything will print (data) but the background image. Any suggestions? thanks.
For this issue you can use Frédéric Hamidi solution and change the browser settings or you can do the following with CSS.
wrap your code in div tags and call the background image as an img object. and set the background color to white. for some strange reason this does the trick and users will not need to change the browser settings to print an image.
#container {
width:500px;
height:393px;
background-color: #FFFFFF;
}
<div id="container">
<img src="image.png" style="position: absolute;">
<table>
<tr><td>test</td></tr>
</div>
The browser ultimately decides whether or not to print background images. For instance, under Internet Explorer, you need to enable that feature in the Advanced tab of the Internet Options dialog box.
i have a dropdown list and text box. i disabled both controls using code behind. now, at one sight we can understand the dropdown list is disabled , because the background color of drop down list is changed automatically.
i want to make that same background color to the text box control too. But i dont know what color code is that. i am working in asp.net . Any suggestions??
Try this
<asp:TextBox ID="txtCDate" runat="server" CssClass="textbox" BackColor="#efefef" />
Actually, the "disabled" color may vary depending on the browser ...
AFAIK, Firefox would put in a grey background to a disabled input box, and you could customize this behaviour via css with a selector like
input[disabled='disabled'] {
... styles go here ...
}
The problem is probably IE-specific, and in that case, this CSS selector would not work... You would probably need to add a specific CSS class to the disabled element to have more control over its look.
You could check this article about this issue : Shawn asks the CSS Guy about styling disabled text inputs
Assuming the reason the text box colors are different is because they have been explicitly set at some point during form validation.
To avoid having to explicitly set the grey color, and instead let the browser set the color to the "disabled" color automatically you could remove the custom color attribute from the text box.
"you can set the BackColor property to Color.Empty"
. . From a Similar Question answered by dustyburwell
In other words, something like myValidatedTextBox.BackColor = Color.Empty
I'm making a web app. In it there are times when a form may be "read only". To simulate this with HTML, I have it so that all the (dynamically created) text boxes that contain content are disabled. This works fine enough, but if there is very much text and not all of it is visible at once(especially in multi-line boxes) then there isn't a way for the user to scroll around in it. Also, another issue is its not possible to copy and paste text from disabled text boxes.
So what I am needing is a way to make it so you can not modify the content in a textbox, but you can select the text, and the scroll bar works.
Also, I'm testing this in Firefox 3.5, though I believe IE has similar problems.(something compatible with both please)
Use JS:
<input type="text" readonly="readonly" onfocus="this.blur();" />
Also, perhaps make a scrollable div instead (overflow:auto; in CSS)?
What about simply using a <div> element with a static height/width and overflow: auto? You can add additional styles to make it look like a <textarea>, if desired.
EDIT: Made swallowed tag visible. Now it makes sense.
this.blur() will make it impossible to select, I think.
<input type="text" readonly>
should help.
Is HTML 4 and XHTML 1.0 compatible. Don't know about future compatibility though (i.e. HTML 5).