I am trying to apply styling, only if there are consecutive button elements. The buttons are wrapped in a class-less div which I can't change.
html:
<div>
<section class="button" />
</div>
<div>
<section class="button" />
</div>
Initially I tried the sibling operator:
div .button + div .button
but this doesn't work as all button components don't have the same parent.
Of course I can style all buttons with
.button
but need a way of checking only for multiple siblings (which in this case is the parent div)
Related
Is there a way to get the parent of a child element in SCSS?
html
<div>
<span>test1</span>
</div
<div>
<p>dsdfds</p>
</div>
In the above example how can I style only the parent of an span element?
I have a form in a div where I brought submit buttons out of the div to another part of the screen. This works nicely. However, I want to lock that div down to a specific size and relative position and use overflow:auto so when it grows too big (the form has elements that are unhidden with checkboxes) the entire screen doesn't scroll, just the div. The problem is, as soon as I add the overflow style, the submit boxes I moved off the div are hidden. I assume this is because with overflow all elements are locked into that div and scroll bars allow you to access them, but in this case the elements are moved left:-500px and it doesn't even give me a scroll bar to scroll left to see them. Basic code follows:
<div class="div1">
<div class="div2">
<form>
<input type="submit" class="sub1" />
</form>
</div>
</div>`
CSS would be:
div.div1 {
position:relative;
width:1000px;
margin: 0 auto;
}
div.div2 {
width:500px;
height:500px;
position:absolute;
top:125px;
left:500px;
}
input[type=submit].sub1 {
position:absolute;
left: -500px;
}
So this works, but as soon as I change the div2 css to:
div.div2 {
width:500px;
height:500px;
position:absolute;
top:125px;
left:500px;
overflow:auto;
}
The submit button disappears.
My question: is there any way to get the scrollbar and keep the div2 container to 500px high without losing the elements outside the div?
If I understand correctly, you can move div2 within the form and leave the submit button outside of div2. That way, the submit button will always be visible and div2 can have overflow.
<div class="div1">
<form>
<div class="div2">
<!-- form fields go here -->
</div>
<input type="submit" class="sub1" />
</form>
</div>
Note: You'll likely need to adjust styles on the button, but I'm not entirely sure about your end goal.
I am trying to reorder my list items using jquery UI sortable. i have a Div(a container div which holds
several div's having class "section") and a List on right( the "li" on the list has the same name of the
Section inside my container Div )
the Container Can have a number of Div with class Section
like
<div class="container">
<div class="section" id="section1" />
<div class="section" id="section2" />
<div class="section" id="section3" />
</div>
and each of these Div(section) can have a number of blocks
like
<div class="section" id="section1">
<div class="dynamic" id="block-1" />
<div class="dynamic" id="block-2" />
<div class="dynamic" id="block-3" />
</div>
inside each block i am having text area with CKEDITOR with it (ie : there can be multiple textarea's inside of a section DIV)
and these blocks are Sortable, i had an issue with CKEDITOR before, ie : when i sort the Blocks the CKEDITOR went uneditable and lost the Contents in it ,some How i have fixed it and its working fine now.
But the New issue is
on my right side of this div i have an UL with li having Section Names as Text
So that on Clicking each li i will show each sections at a time (works like tab)
these li's are Sortable and on sorting these li's the section's inside my container also gets sorted accordingly.
ie: say i got 3 Sections
<div class="container">
<div class="section" id="section1" />
<div class="section" id="section2" />
<div class="section" id="section3" />
</div>
and li like this
<ul class="sortableul">
<li class="sectionlist">My Section 1</li>
<li class="sectionlist">My Section 2</li>
<li class="sectionlist">My Section 3</li>
</ul>
each li indicates sections
if i sort the My Section 3 and move it to the top it will be like this
<li class="sectionlist">My Section 3</li>
<li class="sectionlist">My Section 1</li>
<li class="sectionlist">My Section 2</li>
and as a result the div's also gets reordered like
<div class="container">
<div class="section" id="section3" />
<div class="section" id="section1" />
<div class="section" id="section2" />
</div>
Text area's with ckeditor inside the div (section3) is getting uneditable and no content is displayed but text area's with ckeditor inside the rest of the sections are working fine
in short the text area's inside of the Div which get dragged is becoming uneditable and no content is Displayed.
Don't know what's happening ...
The classic type of editor (one that's based on iframe) will be always lost when it's moved or detached from DOM. You will find more details about why it happens and how to deal with that in a general situation here – CKEditor loses content when removed from DOM and added again.
As I explained in the other answer, you will have two options – either you'll need to reinitialise editor after user moved it or you can use the divarea plugin.
My html Code i have a button
<input class="search hidden" id="search_button" type="submit" value="Search" style="display: block;"></input>
when i clicked in Button many items is generated like this :
<div id="search_results" class="" style="display: block; left: 522.083px; top: 459.617px; width: 398px;">
<img alt="Load-circle" class="load-circle" src=".../123">
<div id="app_341446764" class="search-result"><img src=".../DictationIcon.png">abc</div>
<div id="app_561941526" class="search-result"><img src=".../Icon.png">def</div>
</div>
i have many div with class search-result i don't know how to click one of them(class="search-result") anyone suggest me a solution.
Ideally you would add a unique id as #juan-manuel-rodulfo-salcedo suggested. However, if you can't do that then you could find all the divs with class=search-result. Below is an example of how to click the second div on the page:
page.all('.search-result')[1].click
For more examples of how to select multiple elements, see this SO answer.
I have following HTML
<div class='wraper'>
<div class="demo statemachine-demo1">
<div class="w" id="inperson">IN PERSON
<div class="ep"></div>
</div>
<div class="w" id="rejected">
REJECTED
<div class="ep"></div>
</div>
</div>
<div class="demo statemachine-demo1">
<div class="w" id="inperson">IN PERSON
<div class="ep"></div>
</div>
<div class="w" id="rejected">
REJECTED
<div class="ep"></div>
</div>
</div>
</div>as per the above HTML the wrapper div contains two div each .demo div contains two div and are connected to each other .statemachine-demo1 .inperson div to .statemachine-demo2 .inperson(.statemachine-demo1.inperson ----> .statemachine-demo2.inperson) and .statemachine-demo1 .reject to .statemachine-demo2 .reject(.statemachine-demo1.reject -----> .statemachine-demo2.reject).
now if i drag class w the join line will move continuously, but what i want to know is their any way if i drag parent div statemachine-demo1 the child div reject and inperson class div should also move along with joined line continuously.
For this you need customised jquery draggable function instead of using jsPlumb.draggable() for parent div's. Whenever you drag a parent div, you need to check whether any of the child has connection, if so you need to repaint those connections. Code:
$('.demo').draggable({ // considering parent div has 'demo' class as in your case
drag:function(event){
// on drag check any child has connections and repaint them
$(this).find('._jsPlumb_endpoint_anchor_').each(function(i,el){
jsPlumb.repaint($(el));
});
}
});