I can't find the utility class to hide content to user but show to screen reader in Semantic-UI.
What is the Semantic-ui equivalent of Bootstrap’s sr-only?
Not sure that exists in semantic-ui. A work around is to create a class like so (copied from bootstrap's scaffolding.less #129):
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
Related
I am currently trying to style a bootstrap 4 Modal window within Angular 5.
I have the scss imported into my global.scss and I am giving the modal window the customClass as followed.
this.modalService.open(content, { windowClass: 'tutorial'});
So far so good the popup shows up, in the bottom left corner. But what I want to achieve is a bottom modal like in this case.
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal_bottom
but whatever I do I cannot seem to get it working.
I just don't seem to be able to stretch the modal all the way. This is my current scss
.tutorial {
position: fixed;
top: auto;
bottom: 0px;
width: 100%;
.modal-dialog{
margin: 0;
}
}
I assumed width: 100% would be fine but somehow it doesn't work.
Any ideas?
So doing the following worked for me
.tutorial-bottom {
position: fixed;
top: auto;
bottom: 0px;
.modal-dialog{
min-width: 100%;
margin: 0;
}
.modal-header {
background: #3e8acc;
color: white;
}
}
Thx to #DahvalJardosh for pointing me in the right direction
I am building a ReactJS app and using Zurb Foundation 6. I am also using React Modal: https://reactcommunity.org/react-modal/#documentation.
I want to style the Modal launched through React Modal to look like Zurb Foundation's Reveal. The Reveal SASS looks like this:
// 28. Reveal
// ----------
$reveal-background: $white;
$reveal-width: 600px;
$reveal-max-width: $global-width;
$reveal-padding: $global-padding;
$reveal-border: 1px solid $medium-gray;
$reveal-radius: $global-radius;
$reveal-zindex: 1005;
$reveal-overlay-background: rgba($black, 0.45);
And my Modal CSS is like this:
.modal {
position: absolute;
width: 600px;
top: 20%;
left: 20%;
right: 20%;
bottom: 20%;
background-color: $white;
}
.OverlayClass {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba($black, 0.45);
}
How can I achieve this? I have been experimenting with #include, but no success. At the moment, the Modal I have is not aesthetically pleasing. Help is greatly appreciated.
.your-modal {
#extend .reveal;
/* write your custom css here */
}
instead of using .reveal, now you just need to use the start .your-modal for a modal container.
The foundation section you have there is just the config variables for the reveal. The rest of the .scss for the reveal is here https://github.com/zurb/foundation-sites/blob/develop/scss/components/_reveal.scss
You should be able to structure the rendered HTML from your component to match the elements and classes from Foundation, just avoid the Foundation JS.
Im very new to css and I still find hard to understand some concepts especially positioning.
Anyway, my problem is that my when I set position: relative; of the container and my footer position: absolute;
bottom: 0; the footer became small. It had the same width as the container which is supposed to be before I placed those codes. I did it because I want my footer to be at the most bottom part of the container.
Below is the screen shot:
The maroon is the footer.
In my footer I don't use div but instead I use html element <footer>.
My css codes:
div#container {
height: 100%;
width: 1000px;
margin: auto;
background-color: #C9C9C9;
position: relative;
}
footer {
background-color: #340B09;
height: 50px;
position: absolute;
bottom: 0;
}
Please help.
Add width: 1000px; to your footer
Check this, if that may help you
https://developer.mozilla.org/samples/cssref/css-positioning.html
i will also encourage, you to have firebug installed in your browser
Also above the footer, add some div container, give it some height.. so that footer will stay at bottom. don't use positioning explicitly... since you are new to this.
Get yourself some time, you will be there on top of it..with CSS position :- )
Is it necessary for you to use relative and absolute positioning ? I'm asking since it has one drawback which is that the layout of the page will not be the same as always for all the different sizes of the screen.
Since you wanted to display footer at the bottom of the container, so here it can be done in this way.
<style type='text/css'>
body{
margin: 0px;
padding: 0px;
background-color: black;
}
#inbody{ /* main page */
padding-top: 10px;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
padding-bottom: 10px;
height: 1170px;
}
#container{ /*container */
padding: 10px;
margin-top: 10px;
margin-left: 30px;
margin-right: 30px;
height: 1130px;
background-color: orange;
}
#header{ /* header */
margin-left: 168px;
height: 51px;
}
#midbody{ /* middle body */
margin: 10px;
padding: 0px;
height: 999px;
}
#footer{ /* footer */
padding: 10px;
height: 30px;
background-color: black;
}
</style>
Moreover you can change colors of every part to see the changes. Also use inspect element which shows the HTML and CSS of the web page. Also for the box model concept try experimenting the metrics in the inspect element.
You are using;
footer {
background-color: #340B09;
height: 50px;
position: absolute;
bottom: 0;
}
If footer is some ID or Class, it should be defined in CSS like #footer or .footer and no problem if you are using html5 element footer.
If you want to stretch an element to fill container, use width: 100%. Add this to your footer if footer is inside your container. Otherwise it will stretch to screen.
I properly solved it by declaring width of footer to 980px; When I tried 1000px it became wider than the container because after researching I found out that mozilla and webkit doesn't include padding in the width.
I am having some problems with my DIV, it wont display over a a DIV that has a web user control in it. Below you can find my css. I believe I have done everything right and am hoping that someone can maybe see an error that I have made and help me out. If you need any other code let me know. I also wonder if its just IE rendering it wrong? Thanks for looking.
The Popup CSS:
{
background: #ececec;
position:absolute;
top: 236px;
left: 201px;
height: auto;
width: 280px;
border: solid 1px gray;
z-index: 50;
text-align:left;
padding-left: 5px;
padding-top: 5px;
padding-bottom: 15px;
font-size: 8pt;
}
The Activity DIV (same the div above just changed position)
{
border: solid 2px #A9C5EB;
position: absolute;
top: 353px;
left: 290px;
width: 710px;
height: 227px;
font-size: small;
overflow: scroll;
overflow-x: hidden;
background-color: #F8FBFE;
z-index: 2;
}
To know the HTML is essential to fix your problem.
What is the html that contains your popup? Is it relative to the body tag or some other element? Is the containing element position: relative;?
Try setting the containing element's z-index and position:
#my-container {
position: relative;
z-index: 1;
}
See this SO post about absolute positioning.
On a side note, check out IE-7.js which fixes many IE browser issues, including - AFAIK - this bug.
When I use the folowing CSS code on Firefox, I get a gap between the banner and the top of the screen. How can I avoid this?
#container1
{
position:absolute;
left: 0px;
right: 0px;
width: 1000px;
height: 255px;
margin: 0;
}
#logo1 {
background:#FFFFFF;
margin: 0;
border: 1px solid red;
position:absolute;
left: 0px;
top: 0px;
width: 200px;
height: 250px;
}
#Banner1 {
background: #1071A6;
position:absolute;
left: 200px;
top: 0px;
width: 789px;
height: 250px;
vertical-align:top;
margin: 0; border: 1px solid red;
}
body{margin:0 padding:0;}
should do the trick.
a gap between the banner and the top of the screen
Have you set the body's margin and padding to 0 as well?
I would recommend using a reset stylesheet like this for every design you do. It guarantees a clean slate on every browser. Any changes you make will look pretty much the same in every browser after using a reset, so you can avoid problems like these.
Use a reset stylesheet to set all default values to 0 in all browser. Make sure this is the first stylesheet in order, if you have problems after applying the stylesheet then it'll make it much easier to fix.