We Keep Coding

React element not expanding correctly in CSS Flex container

I am attempting to utilize the IBM Gantt Chart Component in a React application.
The goal is to get the gantt chart component to span the entire page as seen below:
In my JS source code, I have the following line:
return(
<div id="ganttDiv">
<GanttChart config={config} />
</div>
);
In my CSS, I set the width to 100% and the height to 100vh. I also put thick borders to determine the extents of the div.
#ganttDiv{
width: 100%;
height: 100vh;
border-color: rgb(102, 255, 0);
border-style: dashed;
border-width: 15px;
background-color: rgb(255, 255, 255);
}
Instead of the React element spanning the entire page, I get:
As you can see, the div correctly fills the entire page as shown with the green borders, but the contents of the div don't expand to fill the space.
After researching and looking around for several hours, I learned that I could use flex boxes.
Therefore, I added display: flex; to my CSS, and now the height looks correct:
Unfortunately, the width now shrinks to less than half of the page instead of being 100% width from before.
I tried following the examples provided by MDN Web Docs and tried setting the CSS to row, row-reverse, column, and column-reverse which does not work.
It seems like I can only get it to span the entire width or span the entire height, but not both.
I hope that someone can help. Have a nice day. :-)
Edit:
When I compile it with using 100vw as the others suggested, it doesn't do anything. However, if I edit with F12 developer tools the imported component itself (not the div), it works. On the sidebar, it says that the component is only inheriting color from the div, nothing else. So what should I do?

To fix the problem, it was necessary to apply the width to the component itself, not the div. Unfortunately, the syntax for doing this with React is different since we use JSX instead of HTML.
Therefore, to the fix the problem I had to do:
return(
<div id="ganttDiv" >
<GanttChart config={config} style={{width: '100vw'}} />
</div>
);

angular-drag-and-drop-lists dragged element disappears (chrome)

I'm using the angular-drag-and-drop-lists package here to create a drag and drop list. However, the element being dragged always disappears. In all of the demos, you can see the dragged element as you move it around with your mouse. But I am unable to see this element in my implementation below.
<div class="list-item"
ng-repeat="item in items | filter:query"
dnd-draggable="column"
dnd-moved="items.splice($index, 1)"
dnd-effect-allowed="move"
dnd-selected="models.selected = item"
ng-class="{'selected': models.selected === item}"
draggable="true"
>
<div class="icon">
<span class="some-button"></span>
</div>
<div class="title">
{{item.title}}
</div>
</div>
I have set my css as follows:
.dndDragging:not(.dndDraggingSource) {
display: block;
background-color: red;
}
.dndDraggingSource {
display: none;
}
.dndPlaceholder {
background-color: #ddd;
}
I am able to see the placeholder, and I have verified that .dndDraggingSource {display: none} correctly makes the original element disappear. However, the element being dragged as identified by .dndDragging:not(.dndDraggingSource) will show up as a correctly-sized red block with no content.
What's going on behind the scenes on drag? Why does this dragged element show up correctly in the demo code? It seems that it is common to use a display: none on .dndDraggingSource, so I'm pretty sure there is another DOM element that's being dragged around. What is that DOM element and how can I inspect it? Based on behavior, I think there's another element being dragged around. But if you inspect the source code in angular-drag-and-drop-lists.js, the element.on('dragstart', function() {} block isn't doing anything to make a copy of the element tagged with .dndDraggingSource.
== Update ==
So, I realized that if you stuff some gibberish into the the div, it shows up. But neither the span nor the {{item.title}} does. Is there something you need to do with the data model to make this work?

Adding to this that apparently Chrome 50 has a bug with the ghosted copy that is displayed during dragging which can cause it to disappear. The issue and solution are outlined here: https://github.com/marceljuenemann/angular-drag-and-drop-lists/issues/256#issuecomment-231742499.
Personally, I solved it by adding the following:
ul[dnd-list] .dndDragging {
transform:translateZ(0);
}

It turns out that this wasn't about the data model at all. It was about positioning. This particular library expects that all children of dnd-list have relative positioning, and those children, which are tagged with ng-repeat and dndDraggable have static positioning. The part about static positioning wasn't exactly obvious.

Portfolio Expander width - Jquery CSS

I've been playing around with changing the way my portfolio looks and I've been struggling with getting my expander to push elements down (like google images does).
My test is here: http://chris-carpenter.co.uk/new/
I've used this as a starting point to add a filterable option for my work:
queness.com/post/14577/create-a-simple-responsive-portfolio-page-with-filtering-and-hover-effect
This is what is causing the problems. I've found ways to create the filterable portfolio, and ways to create a static portfolio that has an expanding content section but combining them is blowing my mind. I can't seem to figure it out.
At the moment this opens and pushes elements down, but the width is limited by the parent div, so anything below & to the right doesn't seem to shift.
<div class="portfolio--expand is-expanded">
</div>
I'm now looking at inserting a content div at the end of the row clicked. Much like this.
http://jsfiddle.net/JfcAu/450/
I'm not experienced enough with JS to understand what's happening and apply it to what I have though. Could anyone help me achieve a filterable grid which has a click to expand option?
I don't expect to retain any current styling ofcourse, since I haven't changed it at all from the original source yet, I just want the function working.
This has been hurting my brain for ages.
Useful things I've looked at:
isotope.metafizzy.co/filtering.html
oriongunning.com/blog/thumbnail-grid-expanding-preview/

You might have to do some width adjustment, but this:
#portfoliolist .portfolio {
box-sizing: border-box;
width: 23%;
margin: 1%;
display: none;
float: left; /* <-- this is taking it out of the DOM */
}
has a float:left - that is taking it out of the DOM - you have to remove the float:left - and then adjust width to maybe 22% or something to let the expanded content push everything out of the way.

CSS hover effect on ajax content and mobile devices

I've build a quiz. Each question has 2 answers. When the visitor answers a question, the next one is loaded using Ajax. Before the questions are loaded the visitor has to click a start button first, so the HTML for the questions isn't included in the initial page load.
The problem is when a question is anwsered, the hover effect from the previous question is still active when the next one is loaded.
For example: I anwser question 1 with "B" > question 2 is loaded > the hover effect is active on button B for question 2
I've included an image to make this more clear.
I only have this on mobile devices (iPhone, iPad,...) but not on my laptop.
I've done some research if I can alter the hover pseudo class, but apparently this isn't possible using javascript.
I think the problem is that the HTML is the same for each question, so the hover state stays active for the css class when the first question is answsered.
I can't supply a jsfiddle because the questions are entered as a content type in Drupal, and I can't include the entire Drupal in a fiddle. But here is the HTML and CSS.
<div class="quiz_st_content form-wrapper" id="ajax_form_multistep_form_content">
<div class="quiz_st_content_answer form-wrapper" id="edit-a--2">
<div class="quiz_st_content_answer_info_wrapper">Option A</div>
<div class="quiz_st_content_answer_button_wrapper">
<input class="quiz_st_content_answer_button form-submit ajax-processed" type="image" id="edit-answer-a-2" name="answer_a_2">
</div>
</div>
<div class="quiz_st_content_answer form-wrapper" id="edit-b--2">
<div class="quiz_st_content_answer_info_wrapper">Option B</div>
<div class="quiz_st_content_answer_button_wrapper">
<input class="quiz_st_content_answer_button form-submit ajax-processed" type="image" id="edit-answer-b-2" name="answer_b_2">
</div>
</div>
</div>
CSS
input.form-submit.quiz_st_content_answer_button {
margin: 0;
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
height: 30px;
width: 30px;
padding: 20px;
background: #ccc;
}
Hover
input.form-submit.quiz_st_content_answer_button:hover {
background: #ba043f;
}
As mentioned above, this only happens on mobile devices. I've been bashing my head at this for hours now and I'm clueless on how to resolve this.
If anyone could help me, or point me in the right direction it would be greatly appreciated.

When I was working with mobile devices I added
ontouchstart=""
to the body tag like so:
<body ontouchstart="">
This made the hover pseudo selectors not act so awkwardly for me, it may be worth a shot.

I was able to fix this. Well,..its not really a fix because the hover state is still active, but I overwrite the color with the default color on touch devices, like so:
$('.quiz_st_form,').bind('touchstart', function(){
$('body').addClass('touchdevice');
});
So when someone "clicks" on the quiz start button on a mobile device, my body gets the class touchdevice and I "remove" the hover with CSS, like so:
body.touchdevice input.form-submit.quiz_st_content_answer_button:hover {
background: #ccc;
}
Technically the :hover state is still active, its just not visible anymore.
I don't really see a better way on fixing this at the moment. If someone does, please let me know.

javascript dropdown not working

I have been modding a vbulletin forum. All I have modded is the css from within the style editor in the bulletin control panel, plus two template files.
What I have found is that one of the javascript dropdowns is no longer working (it definitely was).
The forum is http://forum.selfbuild.com/
Other dropdowns still work ("community" and "forum actions" links in header) so it relates specifically to the "notifications" dropdown menu item, that you see when logged in.
I have reverted the two template files I modded, but the problem still occurs, so it's not that I have blasted some code out of existence.
On mouseover, rather than the browser showing javascript:// in the bottom bar, it shows a URL.
So I have no idea how to fix it - I don't know how to go about tracing a javascript problem.
Any help appreciated. To log in and see the issue, you can use testuser abc123, and once logged in the notifications menu item appears.

Remove overflow: hidden from .toplinks - then your menu will show.
.toplinks {
background: none repeat scroll 0 0 #DEDEDE;
color: #417300;
float: right;
font: 11px Arial,Tahoma,Calibri,Verdana,Geneva,sans-serif;
overflow: hidden; <- kill this
text-align: right;
width: 430px;
}
This class was basically hiding everything that wasn't already shown, ie. the drop downs.