Specify CSS to a container/div/class above its own in Drupal - css

I am using drupal and super happy with a live edit field module. However this module has been developed with ajax functionality which works brilliantly but seems to still force a button form wrapper fields. I can use CSS to hide this field which works great but the button field ID and wrapper are generic and takes buttons away from the rest of the site. The button wrapper etc are generated by the Drupal CMS of which edits are way out of my scope of understanding.
<div class="form-actions form-wrapper" id="edit-actions"><input type="submit" id="edit-submit" name="op" value="Save" class="form-submit"></div>
I am trying to hide with
`
div#edit-actions.form-wrapper {
display: none;
}
`
But this is hiding relevant buttons that need to be used elsewhere in the site. Here is some of the container code.
`
<div class="content">
<div class="view view-account-content view-id-account_content view-display-id-block_1 view-dom-id-b611690449f4a19aecf257c830f8b956 jquery-once-1-processed refresh-processed">
<div class="view-content">
<div class="views-form"><form action="/testdev/" method="post" id="views-form-account-content-block-1" accept-charset="UTF-8"><div><input type="hidden" name="form_build_id" value="form-ycIZQs2NnfOiNp4mkOR_11YB656wl-cYbXdlo8Cidwk">
<input type="hidden" name="form_token" value="phM-fFmZ9Y6mbpN-0fXff-cfwKo5JvbVdmhYt40dyNc">
<input type="hidden" name="form_id" value="views_form_account_content_block_1">
<table class="rwcls2 views-table cols-0">
<tbody>
<tr class="odd rwcls views-row-first views-row-last">
<td class="views-field views-field-name">
admin </td>
<td class="noneed views-field-editablefield">
<div><div id="editablefields-field-company" class="editablefield-item editablefield-processed"><div class="field field-name-field-company field-type-list-text field-label-hidden compbutton"><div class="field-items"><div class="field-item even">C2</div></div></div><input class="editablefield-edit editablefield-edit-hover form-submit ajax-processed" type="submit" id="edit-field-company-0-actions-edit" name="edit-field_company-0" value="Edit this field" style="display: none;">Edit this field</div></div> </td>
</tr>
</tbody>
</table>
<div class="form-actions form-wrapper" id="edit-actions"><input type="submit" id="edit-submit" name="op" value="Save" class="form-submit"></div></div></form></div> </div>
</div> </div>
`
Any advise for a new coder would be great. Thanks
I have tried css display none
I have tried adding classes to the field in both form and drupal views

Related

Media Query not taking effect

I have never had a problem with a media query like this before. Normally, it just does something unexpected, but not nothing. I don't need help with the actual effect, just as to why it isn't seeing the query. If you inspect the code, it is just not there. I referenced several other posts, but I have it formatted the same as far as I can tell, syntax wise.
Here is my HTML:
<div id="content_main">
<div id="bottom">
<div id="discord">
<div id="header_headset">
<h1>See who's online:</h1>
<div id="headset"></div>
</div>
<iframe src="https://discordapp.com/widget?id=90178023529127936&theme=dark" width="320" height="500" allowtransparency="true" frameborder="0"></iframe>
</div>
<div id="news_announcements">
<h1>News and Announcements</h1>
<p>First and formost, welcome to CommonRoomGaming.com. If you are new here, just find a game you have that you want to play with others, and just jump onto one of our servers! You can find detailed connection instructions on each games page.</p>
<div id="News_Events">
<ul>
<li>ECO Server Woes</li>
<li>New Server Incoming!</li>
<li>2/14/17 - Site Launched</li>
</ul>
</div>
</div>
<div id="S_A_G">
<div id="sad_dragon"></div>
<div id="sag_comments">
<h2>Not playing your favorite game?</h2>
<p>Here at CommonRoomGaming.com we don't discriminate against any games. If you want to play a game, odds are others have it and want to play it too! So with that said, if you don't see your favorite game listed, feel free to suggest it by letting us know in the below form.</p>
</div>
<div id="SAG_form">
<FORM action="emailit.html" method="POST">
<TABLE border="0" width="100%">
<TR>
<TD>Your name and/or handle:</TD>
</TR>
<TR>
<TD>
<INPUT type="text" size="30" maxlength="40" name="name"></INPUT>
</TD>
</TR>
<TR>
<TD>Your email address:</TD>
</TR>
<TR>
<TD>
<INPUT type="text" size="30" maxlength="127" name="email"></INPUT>
</TD>
</TR>
<TR>
<TD>Your message:</TD>
</TR>
<TR>
<TD>
<TEXTAREA name="message" rows="4" cols="50" style="width:300px" ></TEXTAREA>
</TD>
</TR>
</TABLE>
<P>
<INPUT type="submit" value="Make it so."></INPUT>
</P>
</FORM>
</div>
</div>
</div>
</div>
And here is my media query:
#media screen and (max-width:500px){
#bottom {
width:350px;
display:block;
margin-right:auto;
margin-left:auto;
}
}
Here is my codepen of the whole document link
Again, I only need to know what I am doing wrong with the media query. Ignore anything unrelated, as it is all changing.
Problem was related to DNS Caching.

Using bootstrap for contact form 7 in Wordpress with fixed width

I am using WordPress + Contact Form 7 + Bootstrap for Contact Form 7.
I am wrapping the code in Contact Form 7 editor in something like:
<div class="container">
<div class="row">
<div class = "col-md-6">
[text* ... ] /* putting text object here, with contract-form-7 editor tool
...
Things work fine with bootstrap behavior, but the length of the text column - I cannot control them with fixed width.
i.e - I need to put in one line together area code+phone number. The area code is fixed width, and there is a minimal width (3 characters), but I didn't find any way doing this - The behavior is that the size is not control and area code is little shorter (in width) than 3 characters, and 'phone number' is
I need to be consistent and solving above with the plugins contact-form-7 + bootstrap for contact-form-7.
Is there anyway solving the above?
I am using Hebrew design, so final interpretation of my code is:
<div class="row">
<div class="col-md-6 col-md-push-6">
<table>
<tr>
<td>
<form action="">
<div class="form-group">
<label for="#id_phone">מספר טלפון</label>
<div class="form-group size:10"><input class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required field_input form-control" id="id_phone" name="size:10" type="text" value="" maxlength="10" aria-invalid="false" aria-required="true" required></div>
</div>
</form>
</td>
<td>
<form action="">
<div class="form-group">
<label for="#id_phone_area"> </label>
<div class="form-group n_phone_area"><select class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required field_input form-control" id="id_phone_area" name="n_phone_area" aria-invalid="false" aria-required="true" required><option value="050">050</option><option value="052">052</option><option value="054">054</option><option value="055">055</option><option value="02">02</option><option value="03">03</option><option value="04">04</option><option value="08">08</option><option value="09">09</option></select></div>
</div>
</form>
</td>
</tr>
</table>
</div><!-- col -->
</div><!-- row -->

Fluid width of input text side by submit

I am try to create a search field with a submit button, where the submit button width is based on it's content, and I try to make the input field width to be fluid, and as max as possible. It's in jQuery mobile.
I've found this solution, and tried to implement it without success. Here is a test JSFIDDLE
I've tried it on a simple html page, and on that it works.
Can somebody point me to where am I made the mistake?
HTML
<div data-role="main" class="ui-content">
<form method="post">
<div class="searchContainer">
<input type="submit" name="search" value="Go" style="float: right" />
<div style="overflow: hidden; padding-right: .5em;">
<input type="text" name="term" style="width: 100%;" />
</div>
<input type="hidden" name="op" value="search" />
</div>
</form>
Here comes the content
</div>
add this CSS in your code
.searchContainer > div:first-child {float:right;display:inline-block;}
button will get arranged as per the content.
This is generic solution. You can write it using class name.
Maybe using table will do the job
HTML
<div data-role="page">
<div data-role="panel" id="myPanel">
<h2>Panel Header..</h2>
<p>Some text..</p>
</div>
<div data-role="header" data-theme="b">
<h1>header</h1>
</div>
<!-- /header -->
<div data-role="main" class="ui-content">
<form method="post">
<div class="searchContainer">
<table style="width: 100%;">
<tr>
<td><input type="text" name="term" style="width: 100%;" /></td>
<td><input type="submit" name="search" value="Go" /></td>
</tr>
</table>
<input type="hidden" name="op" value="search" />
</div>
</form>
Here comes the content
</div>
<div data-role="footer" data-theme="b">
<h1>Copyright © </h1>
</div>
</div>
DEMO HERE
If you want side by side elements without width, remove float and set display:inline-block; to both elements. Or if button have fixed width (eg 70px), use float with calc() for input field width. width: calc(100% - 70px)

Table inside form and both inside modal in Twitter Bootstrap does not display right, padding are missing

I have a situation here and perhaps solution is simple but I can't find a way out until now so I need some help.
I have this HTML code:
<div class="modal fade in" id="selectFabricante" tabindex="-1" role="dialog" aria-labelledby="selectFabricante" aria-hidden="false" data-backdrop="static" style="display: block; padding-right: 17px;"><div class="modal-backdrop fade in" style="height: 611px;"></div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Cerrar</span></button>
<h4 class="modal-title">Seleccione uno o más fabricantes</h4>
</div>
<div class="modal-body">
<form id="fabForm" method="post" class="form-horizontal bv-form" novalidate="novalidate"><button type="submit" class="bv-hidden-submit" style="display: none; width: 0px; height: 0px;"></button>
<div class="form-group">
<div class="table-responsive">
<table class="table table-condensed">
<thead>
<tr>
<th><input type="checkbox" id="toggleChkSelFabricante" name="toggleChkSelFabricante"></th>
<th>Fabricante</th>
</tr>
</thead>
<tbody id="selFabricanteBody"><tr data-idproductosolicitud="1" data-id="1"><td><div class="checkbox"><label><input type="checkbox" name="fabLinkChoice[]" value="1"></label></div></td><td>Dist1</td><td>DR</td><td class="has_pais fabTd-1"><span id="14">México</span>, <span id="15">Nicaragua</span>, <span id="16">Panamá</span></td><td>1212212</td></tr><tr data-idproductosolicitud="1" data-id="1"><td><div class="checkbox"><label><input type="checkbox" name="fabLinkChoice[]" value="1"></label></div></td><td>Dist1</td><td>DR</td><td class="has_pais fabTd-1"><span id="14">México</span>, <span id="15">Nicaragua</span>, <span id="16">Panamá</span></td><td>1212212</td></tr></tbody>
</table>
</div>
</div>
<div>
<button type="button" class="btn btn-danger" data-dismiss="modal">Regresar</button>
<button type="submit" class="btn btn-primary" disabled="" id="btnAgregarSelFabricante"><i class="fa fa-save"></i> Agregar</button>
</div>
</form>
</div>
</div>
</div>
</div>
Which render as image below shows:
What can be wrong in that markup? I'm using latest version of Twitter Bootstrap. Any help? Advice?
Some clarifications:
I need the table inside the form because it's tabular data and semantic I think this is the right choice
I need the form because I'm using BootstrapValidator plugin and as says here in docs that the right markup, and I need to check at least one checkbox is checked before enable the submit button and allow send the form
Remove the element <div class="form-group"> and its end tag surrounding <div class="table-responsive">. That will fix the padding issue. You also have an issue with the checkbox class. If you remove the checkbox class from the <div> containing the checkbox it'll align properly.

HTML5 middle align in table data

I have a big table and this is the last row of that table:
<tr>
<td>
<form action="index.jsp" method="get">
<button type="submit" id="backButton">Back</button>
</form>
<form action="deleteServlet" method="post">
<button type="submit" name="delete" class="deleteButton"
value="${placeholder.placeholder_id}">Delete</button>
</form>
</td>
</tr>
Inside my last td there are two buttons inside forms (is this good way to do it?). What I want to do is to middle align both "Back" and "Delete" buttons so that they look nice. Now it looks like a zigzag (see picture). I've given id or class -tags to those buttons and tried to move them with bottom, left, display, float etc. commands with no results.
I can't make two td's (one td for one button) because there is so much space between td's.
What should I do?
[edit] Here is a jsFiddle to demonstrate. [/edit]
Forms are block-level elements, simply turn them into inline-block and they'll sit nicely side-by-side.
<table>
<tr>
<td>
<form action="index.jsp" method="get" style="display: inline-block;">
<button type="submit" id="backButton">Back</button>
</form>
<form action="deleteServlet" method="post" style="display: inline-block;">
<button type="submit" name="delete" class="deleteButton" value="${placeholder.placeholder_id}">Delete</button>
</form>
</td>
</tr>
</table>
The styling would be better done as part of your stylesheet, but added here as style attributes for simplicity.
You could try something like this:
<tr>
<td style="line-height:30px;">
<div style="height:30px; float:left;">
<form action="index.jsp" method="get">
<button type="submit" id="backButton">Back</button>
</form>
</div>
<div style="height:30px; float:left;">
<form action="deleteServlet" method="post">
<button type="submit" name="delete" class="deleteButton"
value="${placeholder.placeholder_id}">Delete</button>
</form>
</div>
<div style="clear:both;"></div>
</td>
</tr>
Let me know if it works (or not) :)
Simply align form tag with display:inline-block in last-child td
Clarification in fiddle : http://jsfiddle.net/HarishBoke/uHCyU/

Resources