I am using yii framework for my development . I wrote CSS and able to align my <input tags in html properly and I am using the same CSS for yii and the alignment is messed up . Could some help me on this ?
I wanted it to be displayed like below
Here is the yii code I have
<div id="gender">
<label>Gender :</label>
<?php echo CHtml::radioButtonList('gender_code','',array('Male'=>'Male','Female'=>'Female'),array('separator'=>'')); ?>
</div>
CSS
<style type="text/css">
div#gender {
margin-top:20px;
margin-left:200px;
}
div#gender label
{
font-weight: bold;
font-size: 0.9em;
float:left;
margin-left:2px;
text-align:left;
width:100px;
}
</style>
and it is coming as below image
<?php echo CHtml::radioButtonList('gender_code','',array('Male'=>'Male','Female'=>'Female'),array(
'labelOptions'=>array('style'=>'display:inline'), // add this code
'separator'=>'',
)); ?>
Looks like you might need
div#gender input
{
float:left;
}
add this css code somewhere (to the end of css/main.css, for example):
input[type=radio] + label, input[type=checkbox] + label { display:inline !important; }
Related
I tried to display the content of the fields horizontally but was unsuccessful. It is always the showing vertical view. Am I missing something?
This is the php code.
Thanks for the help.
<h3>Details</h3>
<ul>
<?php foreach ($custom_fields['quote'] as $custom_quote_field_name => $custom_quote_field_value) : ?>
<li><?php echo $custom_quote_field_name; ?> : <?php echo $custom_quote_field_value; ?></li>
<?php endforeach; ?>
</ul>
Your problem lies with your CSS and HTML output, and not necessarily the PHP generating it.
If you have access to the CSS stylesheet, you could use several methods:
Inline-block
ul {
font-size: 0;
/*makes inline-block method work, as " " in your DOM have a font-size,
and we want to eliminate those
*/
}
ul li {
font-size: 18px; //or however large you would like
display: inline-block;
width: calc(100% / X); //where X is number of li
}
Float
ul {
}
ul li {
font-size: 18px; //or however large you would like
float: left;
margin-left: X; //where X is the gap you want between elements
}
Flexbox
ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
ul li {
}
I'm not sure if I understood Your problem, but You are probably thinking about php like it can be used to style data generated by Your script. You need to replace <li> in Your code with <li style="float: left; margin-left: 28px;". This code uses inline CSS used for styling HTML elements like unordered list generated by Your script.
Float: https://www.w3schools.com/cssref/pr_class_float.asp
Margin: https://www.w3schools.com/cssref/pr_margin.asp
Margin is optional here, I just recommend to add this because of a little bit messy look of the list with only float applied.
Thanks a lot Guys,
This is the code works for me:
<head>
<style>
.flex-container {
display: flex;
flex-wrap: nowrap;
background-color: white;
}
.flex-container > div {
background-color: #e8f3ff;
width: 1px;
margin: 10px;
text-align: center;
line-height: 55px;
font-size: 30px;
}
</style>
</head>
<body>
<h4>Details</h4>
<div class="flex-container">
<?php foreach ($custom_fields['quote'] as $custom_quote_field_name =>
$custom_quote_field_value) : ?>
<?php echo $custom_quote_field_name; ?> <?php echo $custom_quote_field_value; ?>
<?php endforeach; ?>
</div>
</body>
WordPress theme I am using has some inline css in the header and one of the things I am trying to change is the header top/bottom padding. In the inline css its listed as:
<head>
...
<style type="text/css" data-type="vc_custom-css">
#site-header:not(.shrink) .site-title { padding: 60px 0 !important; }
</style>
</head>
<body class="home page page-id-24236 page-child parent-pageid-5 page-template-default logged-in admin-bar wpb-js-composer js-comp-ver-4.12.1 vc_responsive customize-support">
<div id="page" class="layout-fullwidth">
<div id="site-header-wrapper">
<header id="site-header" class="site-header" role="banner">
<div class="container container-fullwidth">
<div class="header-main logo-position-left header-layout-fullwidth header-style-3">
<div class="site-title">
<h1><a href="#" rel="home"></h1>
</div>
</div>
</div>
</header>
</div>
</div>
</body>
Obliviously, #site-header:not(.shrink) .site-title {... !important} is not going to work in my styles.css.
I have tried the following and it still doesn't work:
[style]#site-header:not(.shrink).site-title { padding: 1px 0 !important; }
How do I get it to override?
Style blocks that aren't from the stylesheet stink. I truly despise it when theme developers put them in their theme. The only thing worse is inline styles (ie <div style="padding: 5px !important;">). Those are virtually impossible to overcome.
In your case, there's a couple of hack-tastic way to overcome this hacky issue.
In your child theme's functions.php file, you can use the following (Admittedly hacky) solution:
// We're adding a HIGH priority of 9999 which should cause this to be output AFTER the theme's bad styles.
add_action('wp_head', 'fix_bad_theme_styles', 9999);
function fix_bad_theme_styles() { ?>
<style type="text/css" data-type="vc_custom-css">
#site-header:not(.shrink) .site-title { padding: 1px 0 !important; }
</style>
<?php }
If that doesn't work, an even hackier way would be to put the style in the footer. It'll work, but it's not best-practice (as if any of this solution is!):
add_action('wp_footer', 'fix_bad_theme_styles');
If you are already using a child theme you can override a specific file e.g. footer.php
So you would create a file of the same name in the same directory and copy over the code you need
Try adding more specificity to your rule, like:
body .anotherParentClass #site-header:not(.shrink).site-title { padding: 1px 0 !important; }
Example: https://jsfiddle.net/robsilva/wx113Lxo/
You forgot a space between .site-title and :not part. Try this instead :
#site-header:not(.shrink) .site-title { padding: 1px 0 !important; }
i'm trying to get images that im echoing to display inline-block/horizontal but instead whatever i do they are just listing down/vertically. how can i fix this?
here's my code:
<div class="profile_photos_area">
<?php
$dirname = "./data/photos/".$profile_id."/";
$images = scandir($dirname);
$ignore = Array("_cover.jpg", "_default.jpg");
foreach($images as $curimg){
if(!in_array($curimg, $ignore) && preg_match("/\.jpg$/i", $curimg)) {
echo "<img src='".$dirname.$curimg."' class=\"profile_photos\"><br>\n";
};
}
?>
</div>
.profile_photos{
margin-top:0px;
border:#ccc 1px solid;
width: 170px;
height: 150px;
display:inline-block;
position:relative;
}
.profile_photos_area{
width:665px;
height:350px;
background:#000;
margin-left:-193px;
display:inline-block;
overflow:hidden;
}
Did you look at the html your code generate? Look at the asterisks :
echo "<img src='".$dirname.$curimg."' class=\"profile_photos\">******<br>******\n";
br. br!
It is html, and it means... break line! Just remove that.
demo
I've created an page where users can view images along with the image description although I'm having some issues with the CSS for the description. The description is retrieved via PHP and is shown as a echoed variable. The issue with this is that the descriptions seems to carry on along one single line when it should be carrying on within the div.
As shown below, it displays along one line when it should be wrapping below to the same width as the text area below the description.
I've tried changing the width of the .desc class to a set pixel width of 290px instead 100% (should still take the 290px from the image-desc class container) but I'm having no luck.
My current CSS:
.image-info {
width: 290px;
display: inline;
float: right;
}
.image-info .desc {
text-align: justify;
width: 290px;
margin: 10px 0px;
}
and the HTML:
<div class="image-info">
<? $desc = htmlentities($row['desc'], ENT_QUOTES, 'UTF-8'); ?>
← Back to Gallery
<div class="desc"><? echo $desc; ?></div>
<? if(empty($_SESSION['user'])) { } else { print '<i class="icon-chevron-down"></i>Options<br /><div class="slidingDes"><form action="admin/includes/edit-img.php?id=' . $id . '" method="post"> <textarea type="text" name="description" placeholder="' . $desc . '"></textarea> <br/><input type="submit" value="Change" class="btn btn-primary"/> </form><form action="admin/includes/cover-image.php?id=' . $id . '" method="post"> <input type="submit" value="Cover Photo" class="btn btn-danger"/> </form></div>';}?>
</div>
It seems that your content go beyond the limit when there is no white space in the word
so just add word-wrap:break-word; to imageInfo class
here is your css
.image-info {
width: 290px;
display: inline;
float: right;
word-wrap:break-word;
}
Take a look here in fiddle
Add the new CSS 3 word-break property:
word-break: break-word; /* Will prevent text from bleeding outside container */
Use the CSS3 word wrap
word-wrap:break-word;
This will force the text to go down
I'm trying to align two divs horizontally. Having tried about 15 different approaches, I still don't manage to get it working.
$html .= '<div class="fotoLinks">';
$html .= ' <img src="'.$image->getWebPath().'"/>';
$html .= '</div>';
$html .= '<div class="tekst">';
$html .= $this->text;
$html .= '</div>';
With corresponding CSS (div.alinea is a wrapper div):
div.alinea
{
float: left;
width: 100%;
margin-bottom: 15px;
}
div.tekst
{
float: left;
}
div.fotoLinks
{
float: left;
margin-right: 15px;
height: 100%;
}
I hope to get some inspiration for a new approach.
Try
display: inline-block;
Instead of float: left;
EDIT:
A method you can try, but is less supported, for your wrapper div, set:
display: table;
And for your inner divs:
display: table-cell;
You have to define the width for your text div and image div, since as is it inherits the parent elements width of 100%. There are a ton of others ways/answers, but this would have you tweak the least amount of code to get it to work right.
This works for me:
<html>
<head>
<style>
.ftext {
border: 1px solid red;
float:left;
}
</style>
</head>
<body>
<div class="ftext">
This is the left text.
</div>
<div class="ftext">
This follows to the left.
</div>
</body>
</html>
It floats the right text beside the left text.
In the CSS for div.tekst, put in clear:both.
Just give the 'tekst' div a left-margin. I didn't test this so I'm not sure that alone will fix it without adjusting something else.