I have a table in a section, I need to be able to scroll the table because it has a lot of columns. This is what I tried:
#id_induccion_consolidado_habilitaciones {
width: 150% !important;
}
#id_section_habilitaciones{
display: block !important;
width: 100% !important;
overflow: auto !important;
}
But I've had no luck, this works if I try to add the scroll to a tab, but all tables/sections scroll simultaneously and I don't want this.
This is what I am working on
this is the code related to the tables mentioned. 2
The width that you set to 150% changed it to 100% and
try this
#id_induccion_consolidado_habilitaciones {
width: 100% !important;
table-layout: fixed;
}
Related
Is it possible to disable Snipcart's full-page cart? I have set data-config-modal-style="side" like the docs says to but on smaller screens the cart still opens the full page-cart.
I don't want to have to design two different carts to look the same.
It looks like they automatically switch to full-page view in small screens. What you can do is override that behavior with the same styles they are using for side-modal. Add this to your global css:
.snipcart-modal__container {
width: 35% !important;
max-width: 540px !important;
margin-left: auto !important;
right: 0 !important;
}
.snipcart-modal__container.snipcart-layout--large {
width: 100% !important;
max-width: 100% !important;
}
You can also remove data-config-modal-style="side" from HTML now, since you don't need it anymore.
I have searched for similar posts but have not found a working solution.
I'm trying to hide the scrollbar on smaller screen devices while still allowing the user to scroll left to right.
Here is my current styling:
#include media-breakpoint-down(xs) {
overflow: auto;
width: 320px;
display: -webkit-box !important;
display: -moz-box !important;
-webkit-scrollbar {
display: none;
}
}
Setting the display to none will actually make the scrollable area disappear.
When user's device width is more than 480px I'll show him original GIF as a background of my site.
My HTML:
<img class="background" src="assets/img/960XAUTO.gif" alt="Pink Smoke Background">
My CSS:
.background {
display: block;
height: 100%;
margin: 0 auto;
}
When user's device width is less than 480px I increased my GIF's width to 200%, because without increasing the smoke looks very commpessed and skinny:
So, I do this in my CSS:
#media screen and (max-width: $breakpoint) {
.background {
position: absolute;
left: -50%;
max-width: 200%;
}
}
And here is a problem. As my GIF is increased in 2 times, I get horizontal scrollbar. Just look:
I really need to increase GIF, so that the smoke looks more widely. How can I remove empty place on the right side, which was created by GIF? Or maybe there is some other way to increase GIF's width? I tried to use overflow in the different ways. Also I tried to set body width 100% of device screen.
Add this to your CSS, referring to the element you need (it should be the entire html or body like in this example, if this is your entire site background, btw):
html, body {
overflow-x: hidden;
}
Add background-attachment:fixed; in your style
code exact :
.background {
display: block;
background-attachment:fixed;
height: 100%;
margin: 0 auto;
}
You should try using background center with optional scaling percentages.
The full edit is here https://plnkr.co/edit/wZZqiC3awyEzHLPpxYBI
.bg{
width: 100%;
height: 100%;
background: no-repeat center/80% url("http://m.gdz4you.com/sandra/assets/img/960XAUTO.gif");
background-size: cover;
}
and ofcourse just drop a div
<div class="bg"></div>
I'm building a fairly simple static frontend-only webpage. I have the following css rules for my wrapper div (everything else in the page is in it) and the body:
body {
background-image: url(../img/background.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
margin: 0;
}
#content_wrapper {
margin: 15px 10%; /*Client wants 20% instead of 10. Navbar must be adjusted accordingly*/
min-width: 900px;
padding: 0;
border-radius: 10px;
}
Which works fine:
However, as you can read by my comment the client prefers a 20% margin, as to make the whole page more narrow. However this happens:
The page shifts right. This is pretty much the same visual issue I have opening this page with my tablet even using 10% margin (although I would appreciate an explanation to why that happens in tablets, it's not the focus of this question here).
How can I fix this? For all I know this shouldn't happen
When you state that
margin: 15px 20%;
you are effectively telling that you have 20% for both of left and right margin. This means that #content_wrapper has 60% of the container as a maximum. The problem is that 60% might be bigger than the available space. I believe you should add the width to the rule:
width: 60%;
well try changing it to width: 15px 20% 15px 10%; you wish to change only left side margin to 10%.
Or put 2 blank div on each side of .content-wrap with 10% width and phantom data to give width to it
We have a web page generated via SharePoint 2013 that has a width of 1024. We use the following style on the main content div:
#container_master {
width:1024px !important;
margin-left: auto !important;
margin-right: auto !important;
background-color:#FFF !important;
}
This works well on resolutions greater than 1024. Whenever someone sets their resolution to 1024 (which we have a couple of folks that do that), there is some extra padding on the left and right sides which bring about the horizontal scroll bar.
Whenever I use FireBug, I see the following HTML being generated:
<div aria-relevant="all" aria-live="polite" style="margin-left: 20px; margin-right: 20px; min-width: 1024px;">
This margin of 20px on the left and right is the problem. I found that it can be removed by adding the following CSS:
html body.ms-backgroundImage form#aspnetForm div#s4-workspace.ms-core-overlay div#s4-bodyContainer div#contentRow div {
margin-left: 0px !important;
margin-right: 0px !important;
}
However, whenever I do this, the page is no longer centered on screen sizes greater than 1024. Any ideas on how to make the page "full screen" for those using 1024 resolution while making it centered for those with greater resolutions?
There's a nice trick for this in CSS.
use:
html body.ms-backgroundImage form#aspnetForm div#s4-workspace.ms-core-overlay div#s4-bodyContainer div#contentRow div {
margin-left: 0 auto !important;
margin-right: 0 auto !important;
}
This is the same as:
html{ margin: 0px; margin: auto; }
Sometimes IE won't use margin: auto; To solve this (in some way) add:
body {
text-align: center;
}
But this only happens with old IE browsers.
Use max-width:
#container_master {
max-width:1024px !important;
margin-left: auto !important;
margin-right: auto !important;
background-color:#FFF !important;
}
You need to replace the width property with max-width and reset the min-width:
http://jsfiddle.net/ht2Gc/
div {
max-width: 1024px !important; /* here */
margin-left: auto !important;
margin-right: auto !important;
background-color: #FFF !important;
min-width: 0 !important; /* and here */
}
**A lot of screens have a width of 1024px. for smaller screens the horizontal scrollbar isn't avoidable when you want to have a specific width of your webpage/web application (you might want to consider using min-width and max-width). Unless you are designing your website for a specific browser such as chrome I would advise to make your webpage about 4px smaller. Most web browsers have small borders on the sides, which means a 1024px screen loses a few pixels for your display. Please consider the things said above.
You can probably solve your particular problem with the following css line
body{margin:0;padding:0}
What happens here is that you tell the body to have no padding, which means your website has no extra margin on the sides.
this should solve your problem with the margin. If the scrollbar still appears while you dont want it, then also add these lines to your css:
#media only screen and (min-device-width: 1020px) and (max-device-width: 1030px){
body{overflow:hidden}
}
This checks whether the window size is within certain limits (in this case between 1020px and 1030px), if that is the case, the body will disregard everything that is bigger than the window, thus disabling the scrollbar.