Post Reply 
 
Thread Rating:
  • 0 Votes - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Dismissible notification boxes
03-13-2018, 09:41 AM
Post: #31
RE: Dismissible notification boxes
(03-12-2018 05:53 PM)falkoner Wrote:  Hi Andy, to change the style attribute the following should work:

cD.style["display"] = "inline";

where cD is the Id of the element. You can see examples of my doing this in the customised alert boxes in my code.
Let me know if this works or not,
Tim

Hi Tim,

I can't get this to work.

default.css:
Code:
#AlertContainerFoot {
    display: none;
}
#AlertContainerHead {
    width: 35%;
    margin-left:auto;
    margin-right:0;
}

In MiscFunctions.js, I have tried the following, but neither will work:
Code:
document.getElementById('AlertContainerHead').style["display"] = "block";

Code:
document.getElementById('AlertContainerHead').setAttribute('style', 'display:block !important');

The browser appears to know about display: block, but display: none seems to be inheritted from the parent element.

https://stackoverflow.com/questions/1295...isplaynone

Andy.

https://www.linkedin.com/in/andrewcouling
Find all posts by this user
Quote this message in a reply
03-13-2018, 12:39 PM (This post was last modified: 03-13-2018 04:03 PM by TurboPT.)
Post: #32
RE: Dismissible notification boxes
I'm still looking too, but I did change the AlertContainerHead style to 'center' the message for me ... without the other 'auto' on the margin-right, the message was "shoved-off" to the right.
Code:
#AlertContainerHead {
    width: 35%;
    margin-left: auto;
    margin-right: auto;
}

This achieves the same centering:
Code:
#AlertContainerHead {
    display: inline-block;
    width: 35%;
/*   margin-left: auto; */
/*   margin-right: auto; */
}

I'm trying to load the site to my mobile as well, but no luck so far, so I'm not sure how it might look there.

Other than that, I'm not clear on the situation in the last part of post #31?
Does the above change make any difference to the overall behavior?

=====

I applied the inline-block change without the margins here.
And removed a global reference (typo in the variable name?) here.
Find all posts by this user
Quote this message in a reply
03-13-2018, 06:58 PM
Post: #33
RE: Dismissible notification boxes
I think you need to specifically state the display attribute in the css in order to then change it in the JavaScript. That is true of all css attributes you want to change in JS (at least it used to be).

Tim
Visit this user's website Find all posts by this user
Quote this message in a reply
03-13-2018, 10:50 PM
Post: #34
RE: Dismissible notification boxes
Thanks Tim and Paul.

I have tried inline-block and centering the messages, but they still look crap on mobile, so have reverted to 100% width. This can be revisited if and when a responsive theme is implemented.

I believe I have fixed the display style issue.
I had not appreciated that appendChild has moving the whole AlertContainerFoot div into AlertContainerHead, rather than just its child elements.
So trying to control the display of AlertContainerHead was not having the desired effect.

Setting AlertContainerFoot to display: none in CSS, and then display: block in JS, after the appending, seems to work.

I'll apply the new CSS to the other themes later today, and raise a PR.

Andy.

https://www.linkedin.com/in/andrewcouling
Find all posts by this user
Quote this message in a reply
Post Reply 


Forum Jump:


User(s) browsing this thread: 1 Guest(s)