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.
Related
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>
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 want to show hide multiple divs with jquery or javascript.
I seached the web but i find codes that must have unique divs
like:
<div id="div1">text</div>
<div id="div2">text</div>
and so on, but i want to add the divs in a foreache php function so i can't have multiple IDs,
the foreache is a div wrapper.
So, my question is how can i do that ?
EDIT
Because i am complete noob at JQuery i don't know how to implement anything,
so i have this
<div id="wrapper">
<div class="title">
<div class="hide"> Hidden Text</div>
</div>
</div>
When i click the title div, i want the class="hide" to be shown.
Solution:
.box
{ margin:10px;
height:auto;
}
.panel,.flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
.panel
{
padding:50px;
display:none;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(this).next().slideToggle(500);
});
});
</script>
<div class="box">
<h1>This is the div</h1>
<div class="flip">If u click </div>
<div class="panel"> This will show</div>
The problem was as i said the div were generated by the foreach function and this solved it, Thanks to all ! I have much to learn.
You can try
<div id="div1" class="toggle">text</div>
<div id="div2" class="toggle">text</div>
Then
$('.toggle').toggle(); //Automatic Display or hide the matched elements.
You can assign common class and later use that class selector to show hide divs with common class.
Live Demo
<div id="div1" class="someclass">text</div>
<div id="div2" class="someclass">text</div>
$('.someclass').show();
there are two ways of doing it:
select divs by class
select children div of the wrapper
The first method is like everyone else described, add the class attribute to select the divs:
<div class="hide">content</div>
and
$(".hide").hide();
The second method is to give the parent div an unique id:
<div id="wrapper">
<div>content</div>
<div>content</div>
</div>
then select all it's children by tag name:
$("#wrapper div").hide();
Add some class to select all dives to hide,
<div class="toHide" id="div1">text</div>
<div class="toHide" id="div2">text</div>
And then hide them all ,
$('div .toHide').hide();
Solution 1
<div id="div1">text</div>
<div id="div2">text</div>
jQuery('#div1, #div2').hide();
jQuery('#div1, #div2').show();
jQuery('#div1, #div2').toggle();
Solution 2
<div id="div1" class="some-div">text</div>
<div id="div2" class="some-div">text</div>
jQuery('.some-div').hide();
jQuery('.some-div').show();
jQuery('.some-div').toggle();
Another answer:
Use the parent element:
<div id="yourId">
<div id="div1">text</div>
<div id="div2">text</div>
</div>
$("#yourId div").hide();
So I want to position my a meta-data div in the corner of every post image, but all the images are different sizes. How do I do this?
Heres an example of what I need:
This is the loop:
<div id="images">
<?php wp_get_attachment_image(); ?>
</div>
<div id="date">
<?php get_the_date(); ?>
</div>
I posted this # wordpress.stackexchange but they said to post it here
It doesn't matter what size the image is. You have to give the container div a position:relative and the corner div a position:absolute with top:0 and left:0
HTML:
<div id="images"><?php wp_get_attachment_image(); ?>
<div id="date"><?php get_the_date(); ?></div>
</div>
*note date is inside the image tag!
CSS:
#images{
position:relative;
}
#date{
position:absolute;
top:0;
left:0;
}