What could I do about the non-essencial input field? The dropdown works correctly, but it is bad from visual point.
enter image description here
Code:
<p-dropdown [options]="optionsForDropdown" [(ngModel)]="rowData.linkCat" appendTo="body"
optionLabel="label" optionValue="value">
{{rowData.linkCat}}
Make sure that you don't have a style that overrides the PrimeNG style of the input container.
The container div of the input has a class to hide it.
For PrimeNG >= 10 the class is p-hidden-accessible
For older versions it's ui-helper-hidden-accessible
This div should have this css applied to it
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
Related
I am using Joomla Membership Pro component and am having some trouble with CSS styling.
If you click here
http://se24media.net/dc3/index.php/join-us/membership-options/supporter/sign-up
You will see the background is styled nicely but if you fill in the form, click submit and go through to the page which dispalys your membership details it loses all styling (see link below)
http://i60.tinypic.com/33pa4c2.png
Does anyone know why it suddenly loses it's formatting?
Many thanks
It loses the styling because on the first page, the table containing all the fields is wrapped with <form> tags like so:
<form id="os_form">
<!-- Table with fields are in here -->
</form>
and the following CSS has been given for #os_form
#os_form {
background-color: #FFFFFF;
background-image: url("/dc3/images/news_header.gif");
background-repeat: repeat-x;
border-color: #868687;
border-radius: 12px;
border-style: solid;
border-width: 0 2px 3px 0;
color: #000000;
float: left;
font-family: 'Source Code Pro',sans-serif;
height: auto;
margin: 0 40px 40px 50px;
max-width: 100%;
opacity: 0.9;
padding: 40px 20px 20px;
width: 85%;
}
The second page simply displays a table with the class os_table so style this table, you will need to add the following to your CSS file:
.os_table {
/* code here */
}
Hope this helps
I've spent an entire day struggling with an issue that has occurred with mobile devices such as iPhones, iPads and an Acer tablet. I haven't been able to check with other devices but the problem seems to be quite universal when it comes to mobile devices.
Here are the first three css elements I use:
* {
margin: 0;
padding: 0;
}
html, body {
background: #f1f1f1;
margin: 0;
padding: 0;
}
#page-wrap {
background: none;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
The point here being that I have a bunch of 1200 pixel-wide <div> elements with content placed inside other, browser-wide elements. So, first, I use css to make my site use all of the browser window and then add <div> elements like this one and center them:
#featured {
background: #282828;
width: 100%;
height: auto;
padding: 0;
}
#featured #inside {
background: #282828 repeat;
width: 1200px;
height: auto;
margin: 0 auto;
padding: 50px 0 50px 0;
}
And here's the issue:
I'm currently using this code to define a fixed position background image for a <div> element:
#banner_index {
background: url(../images/banner/index.jpg) no-repeat center center fixed;
-webkit-background-size: 2000px 1333px;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
height: 600px;
margin: 0 auto;
padding: 0;
}
While this makes the background look perfectly fine on all the necessary desktop browsers, all the forementioned mobile devices (regardless of the browser app used) display the background image smaller, ie. not completely stretched out to fill the <div> element.
More to my demise, I've created a header <div> for the site above the #banner_index element, which has a top border of 3 pixels. Here's the code for that one:
#header {
background: #f1f1f1;
width: 100%;
height: auto;
margin: 0 auto;
padding: 20px 0 20px 0;
border-top: solid #282828 3px;
}
Much to my surprise, this border, and in fact the whole <div> seems to be sliced to the same width as the background image on the #banner_index element right below it.
I realize that mobile devices have problems with the fixed code in the background: element but all the workarounds I've managed to find seem to be of no use. Especially when the border-top: element has nothing to do with background images.
Anyone care to help a frustrated enthusiast out?
I'd like to keep my site Javascript-free and thought maybe a more simple css solution is out there.
Therein lies the rub.
I am trying to create a button with "caps" on either end, and a repeating background, in order to keep the button a flexible size.
In order to do this, I have used the :before and :after pseudo-elements in CSS, along with position:absolute to get it outside of the main button's background-covered space (using negative values).
It works in FF and Chrome, but it looks like in IE8 and 9, the images are there, but are "outside" the button, and therefore are hidden. Does anyone know how to pop these pseudo-elements "out" of the button, so that they will render?
I want to keep the HTML to just the <button></button> element, and am using SASS.
You can see a jsFiddle here: http://jsfiddle.net/Dqr76/8/ or the code below:
button {
display: inline-block;
zoom: 1;
*display: inline;
border:0;
background-image: url(../images/btn_bg.png);
background-repeat: repeat-x;
color: #fff;
font-weight: bold;
height: 22px;
line-height: 22px;
position: relative;
margin: 0 5px;
vertical-align: top;
&:before {
display: inline-block;
height: 22px;
background-image: url(../images/btn_left.png);
width: 5px;
position: absolute;
left: -5px;
top: 0;
content: "";
}
&:after {
display: inline-block;
height: 22px;
background-image: url(../images/btn_right.png);
width: 5px;
position: absolute;
right: -5px;
top: 0;
content: "";
}
}
Just a sidenote, before someone brings it up, I know that these pseudo-elements do not work in < IE8, and have created a work-around that is not effecting this problem.
Add overflow: visible; to the button element, and it shows up.
Demonstrated at this jsFiddle
I swear I tried that already, but I guess not. Thanks to this question
I am using Google Maps API v3.
In Chrome, the map fits fine into the div element I set with width 200px and height 200px.
In Firefox, it tries to take up the whole screen. I noticed the styling code that google maps uses there is this line:
<div style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0;">
I've been trying to modify this via the API to set the width to 190 and hieght to 190.
Does anyone know how to do this?
The CSS styling I used for the div was:
div.map {
height: 190px;
width: 190px;
}
I added this into my API call already thinking it would resize based on the div styling:
google.maps.event.trigger(map, 'resize')
Happy Holidays!!
you have to hard code your width/height in an inline style. I ran into the same problem. The reason is it uses the width/height to create the other elements within the map.. try setting your code as follows:
<div style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 190px; height: 190px; z-index: 0;">
I need some divs to be center-positioned and to fit their content width at the same time.
I am now doing it like this:
.mydiv-centerer{
text-align: center;
.mydiv {
background: none no-repeat scroll 0 0 rgba(1, 56, 110, 0.7);
border-radius: 10px 10px 10px 10px;
box-shadow: 0 0 5px #0099FF;
color: white;
margin: 10px auto;
padding: 10px;
text-align: justify;
width: -moz-fit-content;
}
}
Now, the last command "width: -moz-fit-content;" is exactly what I need!
Only problem is.. it works only on Firefox.
I also tryed with "display:inline-block;", but I need these divs to behave like divs. Namely, every next div should be under, and not inline, the previous.
Do you know any possible cross-browser solution?
At last I fixed it simply using:
display: table;
Mozilla's MDN suggests something like the following [source]:
p {
width: intrinsic; /* Safari/WebKit uses a non-standard name */
width: -moz-max-content; /* Firefox/Gecko */
width: -webkit-max-content; /* Chrome */
}
In similar case I used: white-space: nowrap;
Is there a single declaration that fixes this for Webkit, Gecko, and Blink? No. However, there is a cross-browser solution by specifying multiple width property values that correspond to each layout engine's convention.
.mydiv {
...
width: intrinsic; /* Safari/WebKit uses a non-standard name */
width: -moz-max-content; /* Firefox/Gecko */
width: -webkit-max-content; /* Chrome */
...
}
Adapted from: MDN
I use these:
.right {display:table; margin:-18px 0 0 auto;}
.center {display:table; margin:-18px auto 0 auto;}
I was looking for a way to prevent a long line of text from outgrowing past its container, and max-width: fit-content worked in Chrome, but not in Firefox.
I found a workaround: if the element is the last displayed subelement, setting display: table-caption; and caption-side: bottom; does have the same effect, together with display: table; on the parent object.
Why not use some brs?
<div class="mydiv-centerer">
<div class="mydiv">Some content</div><br />
<div class="mydiv">More content than before</div><br />
<div class="mydiv">Here is a lot of content that
I was not anticipating</div>
</div>
CSS
.mydiv-centerer{
text-align: center;
}
.mydiv{
background: none no-repeat scroll 0 0 rgba(1, 56, 110, 0.7);
border-radius: 10px 10px 10px 10px;
box-shadow: 0 0 5px #0099FF;
color: white;
margin: 10px auto;
padding: 10px;
text-align: justify;
display:inline-block;
}
Example: http://jsfiddle.net/YZV25/