I have this page with a permanent sidebar. Along the top of the page there is a group of MUI tabs.
The Estimations tab contains a Material-Table. Navigating to this tab causes the page to expand horizontally. I want to stop this from happening.
Setting a fixed width to the table only stops the table from expanding. The background still expands when navigating to this tab. Setting a fixed width for the Paper component in IntakeDetails2 does not stop this expansion from occurring.
This code sandbox link shows a working demo of this issue. I would like to keep the estimation tab along with its table within the same boundary as the solutioning tab. The outcome here would be a horizontal scroll bar on the table itself rather than the web page.
When Side Bar shows up still can see other buttons in the page through the side bar. Can anyone help me with this issue
enter image description here
enter image description here
You should try this
Wrap your side bar inside a div then make the width of div 100% & give a background color(with opacity:0.9).
You will get a better user experience.
Note: You will have to write some script to disable your side bar when some user clicks on that div's background.
I made a simple parrallex template for a friend of mine and i'm trying to add a layer ontop (with smoke)
when I scroll the page the smoke layer doesn't scroll up with the page, it just sort of dissapears, the logo div scrolls as it should but not the smoke layer,
my example can be found here:
www.junkjuice.co.uk
what am I doing wrong?
I've developed a static advert ticker that sits at the bottom of the window. This is in an <iframe> to make it easier for other people to place the unit on their sites. Another <span> around the <iframe> keeps it fixed to the bottom of the screen. The script has a help window which is within a tag - within the <iframe> and uses the visible / hidden property to show or hide text.
Now since the code is in an <iframe>, the help text would not appear on main window. To get around this, I made the <iframe> larger,and set it to transparent.
Visually, everything is fine. When the user clicks a button on the ticker, the help menu appears over the data in the background. However, I've just discovered that if there is a link on the main page that passes under the <span><iframe> section, it cannot be clicked. I've tried CSS pointer-events, but can't get that to work, (links within the <iframe> must also remain clickable)
Not sure which is causing the "fault", ie the <iframe> or the tag around it. Is it a security thing to stop "click jacking" (??) or more to the point, is there a work around.
If push came to shove, I COULD reduce the size of the <iframe> and use a javascript pop-up window to display help text, but those windows show the URL and status windows, and are not exactly elegant!
Here is the code before anyone asks:
This span covers the entire screen to the height of the underlying <iframe> I did this so the data could be centred
<span style="position:fixed;bottom:10px;display:inline;width:100%">
<center>
<iframe src="http://www.xxx.com/cgi-bin/ticker/run_tick.pl?s=xzy" frameborder=0 align=top width=800px height=330px marginwidth=0 marginheight=0 hspace=0 vspace=0 scrolling=no allowtransparency=true></iframe>
</center>
</span>
Set a height to the span the same as the iframe (330px)
Let me know how that goes
Oh boy, what FUN I've had getting this to work!! (Twelve hours on Wed 23rd, and about three hours today)
Originally, I had an <iframe> that filled virtually 3/4 of screen, (so that I could display the help window to uses in a '' rather than use a modal popup. But, for security reasons, the browsers will not let you click through text that covers links underneath.
I had to literally redesign the whole layout.
Now, I have the help file in a separate <span> window which has its visibility set to hidden till user needs it. But that still left the ticker code at the bottom.
I had to divide that into three <divs> one on either side of the main ticker. But again, the ones on the side are effectively masking the page underneath, so I had to set both <divs> so that they used "pointer-events:none" meaning the <div> was not clickable, and mouse events would pass through to the code underneath. The mid section for the ticker was set to the opposite, namily "pointer-events:auto" so that the TOP window got the clicks, but not the page underneath.
Next problem: Because the ticker shows graphics that extend into the main text, that left a 1/2" area where clicks on main page couldn't be accessed. Another span was added to the code which covered the area with a transparent gif. When the user places their mouse over this graphic, a swap takes place and displays a semi transparent checkerboard. They can then read what this means in the help file.
Finally, when user's click the minimize button, the <div> holding the ticker code is hidden (giving accesss to all the links on the page) and ANOTHER <div> displays "Restore" graphic. When they click that, it gets hidden whilst the main ticker window - and the two <divs> on either side are made visible again.
And it was only meant to be a simple script!! (Oh, and don't check the website or my blog 'cos I won't be uploading the changes till eve of Sat 26th)
I have designed a master page on which I have a horizontal banner with my company logo and in the same banner at right hand side I have copied the WELCOME control div from Ribbon area and placed inside banner area which is perfect.
I have customized master page to hide ribbon bar for the visitors (General users) with no uploading rights but the problem is that when site collection administrator logs in it shows the ribbon bar and my banner with welcome control but when visitor logs in the ribbon gets hidden and banner appears on top at the place of ribbon BUT the welcome control div doesn't move and gets displaced somewhere (cant see anywhere).
How to automatically change position of welcome control when ribbon gets off/on and appears in the banner accordingly. what change in CSS i need to do.
thanks