I have a codebox on my blog in which I add HTML / CSS / Javascript codes
My CSS code looks like this:
.post blockquote {
background-image: url("https://dl.dropbox.com/u/76401970/All%20Blogger%20Tricks/Images/blockquote.png");
background-position: 0 0;
background-repeat: no-repeat repeat;
border-color: #DDDDDD #666666 #666666 #DDDDDD;
border-radius: 6px 6px 6px 6px;
border-style: solid;
border-width: 1px;
color: #000000;
font-family: Consolas,'Courier New',Monaco,Courier,monospace;
line-height: 18px;
margin: 0 20px;
overflow: hidden;
padding: 10px 20px 10px 45px;
}
Whenever I add a big code (single line). The code gets to the next line but I want the code to be in the same line and a horizontal scroll under the box. I have tried overflow: auto overflow-x: scroll overflow-y: hidden
check this live example on W3SCHOOLS.
as you can see.. you need to specify a width and height.. that is why your code does not work
adding to that, use : white-space: nowrap; so you can make your code in a single line
take a look at this jsfiddle for your code
Related
I'm looking for overriding the width size of the toastr container to 500 px instead of the default 300px.
Is there any way to achieve it without extending the component and create a new custom one?
Here is the css portion of toastr.css that is relevant:
.toast-container .ngx-toastr {
position: relative;
overflow: hidden;
margin: 0 0 6px;
padding: 15px 15px 15px 50px;
width: 300px; <--- this one I'd like to override
border-radius: 3px 3px 3px 3px;
background-position: 15px center;
background-repeat: no-repeat;
background-size: 24px;
box-shadow: 0 0 12px #999999;
color: #FFFFFF;
}
You should override it like this :
::ng-deep #toast-container > div {
width: 500px;
}
Author of ngx-toastr.
You should copy over the css to your own global styles and make whatever changes you want. The css hasn't changed in over a year, so you aren't losing a whole lot by not importing it from the node_module.
Do not use ng-deep to do this.
I have implemented the above selectOneMenu in Bootsfaces and the below selectOneMenu in primefaces.
I need the implementation in primefaces but styling as in bootsfaces.
How can I change the styling of the second selectonemenu as the above selectOneMenu?
I need to remove the grey borders.
Can anyone please suggest me.
EDIT -
After adding the suggested css.. primefaces selectonemenu is displayed as above on selecting the selectonemenu.
I need to align the highlighted box around the down arrow symbol in the selectonemenu and change the highlighted box color to grey.
Please suggest further modifications. Thankyou in advance.
I have following display of the p:selectOneMenu with the custom CSS classes (form-control & radius-none) on my specific screen:
XHTML:
<p:selectOneMenu styleClass="form-control radius-none" ...
...
...
CSS:
.ui-selectonemenu.form-control {
color: #555 !important;
display: block !important;
margin-bottom: 0 !important;
padding: 5px 10px !important;
background-color: #fff !important;
border: 1px solid #ccc !important;
}
.radius-none {
border-radius: 0 !important;
}
.ui-selectonemenu.form-control .ui-selectonemenu-trigger {
top: 0;
right: 0;
width: 16px;
height: 100%;
padding: 0 5px;
cursor: pointer;
position: absolute;
margin: 0 !important;
border: none !important;
margin-top: 5px !important;
background: transparent !important;
}
Update: The other CSS related to .ui-selectonemenu-label and .ui-inputfield is also part of the rendered HTML, which is generic in my case:
.ui-selectonemenu .ui-selectonemenu-label {
width: 100%;
border: none;
display: block;
cursor: pointer;
text-align: left;
overflow: hidden;
margin-bottom: 0px;
white-space: nowrap;
font-weight: normal;
}
.ui-selectonemenu .ui-selectonemenu-label.ui-inputfield.ui-corner-all {
text-overflow: ellipsis;
}
.ui-inputfield {
margin: 0;
padding: 5px;
background: #ffffff;
font-weight: normal;
outline: medium none;
box-shadow: inset 0 0 0 #8f8f8f!important;
-webkit-box-shadow: inset 0 0 0 #8f8f8f!important;
}
NOTE: If you want to change the style of all p:selectOneMenu elements in general, then remove the custom classes.
Some time ago, I've written an article about the problem. It includes a link to a demo project solving many (hopefully most) incompatibilities to PrimeFaces: https://www.beyondjava.net/blog/how-to-use-bootsfaces-and-primefaces-in-the-same-project/
I am scratching my head as to what I've done here in my H1 Logo
The first image shows what is messed up and the second image shows how it should be on the same plane. I have to give link to image as I don't have enough reps yet. Link to image
Here is the website, as as I am not sure what code would fix this: afirewithin.me
Your CSS:
#logo h1 {
font-size: 48px;
float: left;
margin: -7px 0px 0px;
color: #262728;
background: url('images/h1_border.png') no-repeat scroll right 25px transparent;
padding-right: 10px;
}
Change it to:
#logo h1 {
font-size: 48px;
float: left;
margin: 16px 0px 0px;
color: #262728;
background: url('images/h1_border.png') no-repeat scroll right 4px transparent;
padding-right: 10px;
}
Adjust the margins and the background 4px for exact spacing etc.
Screenshot:
You have a margin of 32px 0 0 on your h2
try installing firebug for debugging
Here is my page: http://inventikasolutions.com/demo/tatasky
The blue button appears centered in Google Chrome but in Safari and Firefox it floats to the left.
I'm using the latest version of the browsers.
My css code is:
.messi .btn {
background-image: url(submit.png);
background-repeat: no-repeat;
background-size: auto;
background-position: -1px -490px;
background-color: #5B74A8;
border-color: #29447E #29447E #1A356E;
color: white;
font-size: 15px;
padding: 10px;
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .1);
border: 1px solid #999;
vertical-align: middle;
line-height: 20px;
margin: 0 auto;
display: block;
}
.messi-actions .btnbox .btn {
min-width: 75px;
}
Thanks
Firefox is rendering the div tags around the btn differently. So it is aligning it to the center of it's wrapping div tag, but that tag is only the width of the button and is left aligned. Add this to get it working:
.mesi-footbox {
text-align: center;
}
This will center the div if it doesn't render full width, or leave things the same in chrome.
#Pritesh Desai
try to put in safari
text-align:center; to the container div which contains the div you want to be centered
I have a text-field and background-image style for the field. Below is the style applied :
.leftPaneContent INPUT {
background-color: #FFFFFF;
background-image: url("../images/icon-search-large.png");
background-position: 4px 3px;
background-repeat: no-repeat;
border: 1px solid #D1D1D1;
height: 14px;
margin: 5px 0 5px 3px;
overflow: hidden;
padding: 2px 10px 4px 23px;
width: 85%;
}
The image is displayed properly in FF even when I type a long value in the text-field. Whereas the image is overwritten in IE for a long value.
The problem can be seen in below image in IE
Is there a fix for this?
text-indent didn't fix the problem in IE. Hence I had to move the image out of text-field and wrap that inside a div :)