I have a simple website, using php, html, css,
and would like to hide two menu buttons:
menu box & text
<div class="filter margin"></div>
<div class="filter_options">
<div class="filter_op filter_op_selected" data-type="type" data-id="bla 1">
<div class="filter_check"></div>
<div class="filter_value">bla</div>
</div>
<div class="filter_op " data-type="type" data-id="bla 2">
<div class="filter_check"></div>
<div class="filter_value">bla</div>
</div>
Still it is necessary, that the upper box is ticked & as such recognized by the code;
for the correct work-logic of the menu.
Thanks for any tip or suggestion.
[I know that in the code language mql4/5, which is based on php, you can simply hide a line of code when typing # in front of it.
It won't be shown, but it will be used (if such a box is hidden but ticked, it will behave like that).
I was asking myself how to do that in php]
After researching a lot, I've come to the following answer:
<div class="filter margin"></div>
<div class="filter_options">
<div
class="filter_op filter_op_selected"
data-type="type"
data-id="bla 1"
style="height: 0; visibility: hidden; font-size: 0; padding: 0; margin: 0"
>
<div class="ranking_filter_check"></div>
<div class="ranking_filter_value">bla</div>
</div>
</div>
Related
In WordPress page editor or in the template file, how can one add HTML to put data pulled by shortcode of sheetdb in 2 columns? Below is the code that I added in a custom field, but it displays the data one below the other. Please let me know how to make it appear in 2 columns. The sheetdb plugin helps pull data from a googlesheet.
[sheetdb url="https://sheetdb.io/api/v1/ymk583vab4dwh" search="Approval=1&Display=1"]
<div class="contest-entry-row">
<div class="story">{{Story}}</div>
<div class="contestent-name">-{{First Name}} {{Initial}}</div>
</div>
[/sheetdb]
Code in the PHP template file below.
//Get custom field data.
$story = get_field('story');
<div class="contest-story">
<div class="wrap-x">
<div class="inside">
<div class="row">
<div class="contest-story-text col col-xs-12"><?php echo do_shortcode($story); ?></div>
</div>
</div>
</div>
</div>
Try thi:
.contest-story-text > div{
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
I have this little problem with my site. I want to move block title and second line to center, and button to keep in at center too, something like this:
image how wanted to look
Currently it looks like this:
current look on block
Where can be seen this form is here at bottom of page. This is what I do to customize it myself, I updated this CSS class:
.heading {
font-family: GOTHAM-BOLD;
font-size: 28px;
color: #273a55;
margin-left:340px; // i added this line, but seems it mess entire look.
}
and this is PHP code from that form:
<div class="footer box">
<div class="bluebg box"></div>
<div class="container">
<div class="footermain box">
<div class="footertop box">
<div class="row">
<div class="col-md-6 nopd">
<div class="ftleft box">
<div class="ftlinner box">
<h1 class="heading"><?php echo (get_field('news_letter_title'))?get_field('news_letter_title'):get_field('news_letter_title', 'option') ?></h1>
<?php echo (get_field('news_letter_tag'))?get_field('news_letter_tag'):get_field('news_letter_tag','option') ?>
</div>
</div>
</div>
<?php
endwhile;
It seems that Heading title and line bellow that is contained into one class called heading. So question now is now to move to center to start looking like image provided.
Follow these steps :
Change your col-md-6 class to col-md-12 in both the text bloc and the button bloc.
Add class text-center to the text column like this
<div class="col-md-12 nopd text-center" >
Add style justify-content: center; to "footertop box" like this :
<div class="footertop box" style="justify-content: center;">
Remove class noleft from button column and add margin:0 to button
as far as I understand, you want to have the texts centered and the button below them
for quick solution, add this class to your css:
.footertop.box .row {
display: block;
width: 100%;
text-align: center;
}
delete div's col-md-6 classes which are in div.row
I have links of images stored in database,I want to bring the set of images at the centre of the screen (which in my case is left-aligned). No matter how many pictures comes dynamically, the set of the images should be aligned centre.
Iam using bootstrap for designing and here is how my code look like:
<div class="row">
<div class="col-md-12 text-center">
<?php
foreach($n as $val)
{ // loop to iterate 'n' image links
?>
<div class="col-md-1">
<img src="<?php echo $val; ?>" // images showing up.
</div>
<?php
}
?>
</div>
</div>
I am adding an image below to demonstrate the situation.
I have tried the following:
bootstrap classes : center-block (which is based on margin)
bootstrap classes : text-center (which is based on text-align)
bootstrap classes : "img-responsive center-block"
Please Note:
I don't want to push the content toward centre forcefully (like using of bootstrap class "col-md-push-3" or something as such, because the number of images to be displayed is not fixed. They vary time to time)
The column classes you are using to wrap the images [col-md-1]are floated left by default....you'd have to override that behaviour.
.text-center .col-md-1 {
float: none;
display: inline-block;
}
.text-center .col-md-1 {
float: none;
display: inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-12 text-center">
<div class="col-md-1">
<img src="http://lorempixel.com/image_output/city-q-c-100-100-6.jpg" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<div class="col-md-1">
<img src="http://lorempixel.com/image_output/city-q-c-100-100-6.jpg" />
</div>
<div class="col-md-1">
<img src="http://lorempixel.com/image_output/city-q-c-100-100-6.jpg" />
</div>
</div>
</div>
You can still use some good old CSS using FlexBox, as shown on this Fiddle. Basically, it uses a structure like:
<div class="container">
<div class="picture">
<img src="http://lorempixel.com/image_output/food-q-c-200-200-1.jpg" />
</div>
</div>
And then, with some FlexBox properties, you can achieve what you want:
.container {
display: flex;
}
.picture {
flex: 1 1;
width: 100%;
}
img {
width: 100%;
}
To sum up, you put the container in flex mode, and then all its div would occupy same space. Some intermediary divs are required in order to keep the aspect ratio of each image.
If you want to center them in case of you have less pictures available, you can still use the justify-content: center; property, setting a maximum width on the divs, such as this other Fiddle.
Note however that this solution would not work on IE9-.
Make a div with text-align:center
Amand then make a div inside it with display:inline-block
I am using this simple code in my view.php. The div is aligned horizontally correctly, but it aligns vertically in print.
<div class="row">
<div class="col-lg-6">
<div class="col-lg-7" style="padding:5px;box-sizing: border-box;border: 1px solid #ddd;background-color:#f9f9f9">
<b>Patient Name:</b> <?= $model->patient_name ?>
</div>
<div class="col-lg-5" style="padding:5px;box-sizing: border-box;border: 1px solid #ddd;background-color:#f9f9f9">
<b> Auth. No.:</b> <?= $model->authorisation_number ?>
</div></div> </div>
I want these div to align horizontally in print as well. I am not using any custom print.css for this page.
Ok I found the answer-
I need to use <div class=col-xs-*> in place of <div class = col-lg-*> that mostly achieves what I am looking for.
I welcome if there is any better workaround.
Thanks.
I needed to use an hidden input to transfer some IDs to the page for each block.. whatever.
I have the following code :
<div id="shipping_box" class="formSep well">
<div id="default_shipping_box" class="shipping_box row-fluid">
<div class="span1">
<input type="hidden" name="tracking_id" value="" />
</div>
</div>
</div>
This code work well and the result is what I expected.
If I do this :
<div id="shipping_box" class="formSep well">
<div id="default_shipping_box" class="shipping_box row-fluid">
<input type="hidden" name="tracking_id" value="" />
<div class="span1">
</div>
</div>
</div>
The layout is not respected. See this picture for the demostration :
Can someone explain why to me ? Hidden input aren't suppose to be "hidden" so they shouldn't affect the layout ?
jsfiddle : http://jsfiddle.net/t9M3C/
Near line 285
Is because you have a css rule (in bootstrap.min.css file) that match the firs-child element (but only if has a class*="span") inside the default_shipping_box div.
.row-fluid [class*="span"]:first-child {
margin-left: 0;
}
So, if you put your hidden input inside the div#default_shipping_box and before the first span, then that rule is not styling the div.span1 and thats why your template is been afected.
You can fixed adding a simple css rule to the same file...
.row-fluid .span1{margin-left:0 !important;}
The important, is because you have more files who overite this rule (ex. in bootstrap-responsive.min.css)
Good luck, and i hope it helps
cheers,
Gmo.-
EDIT:
Too slow XD.
Answered while writing ... I agree with the reason explained above.
Using Google Chrome's Inspest Plugin, when you move the input this class:
.row-fluid [class*="span"]:first-child {
margin-left: 0;
}
Gets removed.
This is because in this:
<div id="shipping_box" class="formSep well">
<div id="default_shipping_box" class="shipping_box row-fluid">
<input type="hidden" name="tracking_id" value="" />
<div class="span1">
</div>
</div>
</div>
This : <div class="span1"> is not the first child, this: <input type="hidden" name="tracking_id" value="" /> is.
and in your CSS this is that default class for [class*="span"] is:
[class*="span"] {
float: left;
margin-left: 30px;
}
So use this for example :
.row-fluid .span1 {
margin-left:0 !important;
}
Hope this helps.
Bootstrap has some CSS that will set the left-margin of the first of the child to 0, if the class contains span:
.row-fluid [class*="span"]:first-child {
margin-left: 0;
}
When the hidden input is put above the first span div, the above margin-left: 0; property will not be applied.
The following image shows that when the hidden input is before, then the first span class has a left-margin.
This shows that when the hidden input is after the div, that there is no left-margin.
EDIT: I seem to have a been beaten twice, while I was getting the screenshots to illustrate the difference!