I'm using react-bootstrap": "^1.0.0-beta.5"
I just cannot get rid of the extra white space created by the dialog / modal for my modal, on mobile view.
i've read a few threads refering to it as bootstrap 3. I did tried to cahnge the bootstrap.css file but it didnt seem to work for me.
can anyone help ?
So, I found out the issue.
the issue was with the Component that i was using surprisingly it is messing up with the margins of -15px for left and right. ALTHOUGH i added them into the container correctly.
The trick that i did was to overwrite the .row css class in that page to remove the -15px for both left and right.
Related
My page is: https://www.svelysium.net/ And one can see the menu as a list flash first then display correctly. I'm testing visibility:none in the CSS for the div and then wanting to do an onload later for the visibility after the page loads so I don't get that menu flash. I've not put it up live because I can't seem to get it right. Sorry I can't find any examples of this issue and how to solve it and I have been trying to keep it simple. There must be an easy fix. Thanks in advance.
Warning: I'm a noob. The little I know comes from fiddling around.
I maintain a hobby website of images created in bootstrap 3 and I would like to have a responsive rollover image that also links to the full size image.
I have been able to complete the responsive rollover part, but I can't figure out how to add the link to display the full image.
Here's what I have so far:
https://jsfiddle.net/11cmcznn/
HTML:
<div class="rollover-wrapper-1"><div class="rollover-image-1"></div>
I can't post the CSS because I don't have reputation points yet.
Any help would be much appreciated.
Put href before the div and make sure you close the parent div too. Like this
<div class="rollover-wrapper-1"><div class="rollover-image-1"></div></div>
Well I've run into another problem. I have the rollover image working properly including linking to the full size image. But for some reason whenever I add the code to the webpage and the style sheet, somehow the webpage is looking for the style sheet in the wrong place on my website.
I have a style sheet "default.css" that I use for all my webpages. This css sheet is in the root of the website. But for some reason the webpage with the rollover image will not display the image, and when I inspect the element within Chrome it gives me 404 error stating that the default.css is not found in a certain folder on the website. I've never had the default.css in any folder besides the root.
So somehow the webpage is looking for a style sheet in a place where none exists, and I have no idea why.
If I copy the default.css style sheet from the root into the folder it's looking for then the webpage loads properly, but I don't want to have to maintain two identical style sheets. I just don't know how the style sheet got attached to the webpage.
I'm sorry for the vagueness of this problem, but I don't know enough to make a more informed question.
To see the problem, please run the following in browser by clicking the arrow shown in upper right corner of of output panel.
http://jsbin.com/uVORASe/4/edit?html,js,output
Click one of the links (either strategy-1 or strategy-2) to display output generated by the child template. Then click back button on browser. When the back button is clicked, browser shows the parent URL as expected. But parts of the child display remains on screen. This process repeats every time a child route is visited. Why? Going back to the parent route should just display strategy-1 and strategy-2 on the left side.
I don't think this is an Ember-Data issue because problem also happens when I tried Ember-Model. I think use of the bootstrap classess has something to do with this. For example, if I take away the bootstrap table-responsive class, Ember throws an error.
Any ideas to explain what's going on?
The close tag of your <table> tag is wrong. You are using </table the expected is </table>.
http://jsbin.com/UKONORI/1/edit
To enable horizontal scrollbars in a table I need to style the containing DIV with "overflow: auto", highlighted in blue.
I tried it with FireBug and got the desired result. Just can't figure out out how to put the setting into APEX.
Using the theme "Blue Responsive".
I've played with this a bit in Apex 4.2.2, it should work the same in 4.2.1 I think. That particular div doesn't come from any template but you can target it with some CSS.
In the page properties, for CSS Inline, I entered the following and it seemed to work:
#report_2583625959157728_catch {overflow:auto}
(I think I've transcribed the correct id from your screenshot - you may need to check)
Unfortunately this means you'd have to do this for each report in your application individually where you want the scrollbar to appear.
Note: I haven't tested this in IE, however - last time I was mucking around with scrolling areas I found it incredibly frustrating to get it working in IE without breaking other functionality in the region - especially for Interactive reports.
You can add to Region Header:
<div style="overflow:auto;">
and to Region Footer
</div>
You can also add your css line to a report region template, if you want the scrollbar to be added to each report.
Other wise you're better of putting the overflow on a class and add it to your application's stylesheet, eg:
.myClass {overflow:auto}
you get more flexibilty to style your region this way. You can add the class to your report by setting the region attributes to class="myClass".
Note that instead of "auto", you can also try to use the element option "scroll", check the w3schools docs: http://www.w3schools.com/cssref/pr_pos_overflow.asp
I have a list of links within a div with a scrollbar. When the user clicks on a link below the x-height of the div, the srollbar automatically goes back to the top. I would like the scrollbar to stay in position no matter what links the user clicks. Here is the site- try clicking on a painting from 2006 and you'll see what I mean.
Does anyone have any ideas of how I can make this scrollbar behave?
Thanks,
Brad
It looks like these links are just that, links to a new page... and thus it's not so much that the scrollbar is resetting but that a whole brand new page is coming up and the 'reset' scrollbar is just a byproduct.
The most elegant way would be to have those links pull in the new content without reloading the page, but this requires AJAX. If you aren't familiar with the intricacies of AJAX and how to implement that, then you could change the link to include an anchor to the link, like so:
http://siddharthparasnis.com/2006-01/#menu-item-377
The page would reload scrolled down to that item.