thank you for help. it looks very good. this is the code:
<ul class="nolistmark socialButtons">
<li>
<!--<button type="button" class="btn btn-lg btn-fb">-->
<!--<button type="button" class="btn1 buttonsocial" href="#"></button>-->
<a class="button button1" href="#">
<i class="fa fa-facebook i">
<span class="btnName">Facebook</span></i></a>
</li>
<li>
<!--<button type="button" class="btn btn-tw">-->
<a class="button button1" href="#">
<i class="fa fa-twitter i">
<span class="btnName">Twitter</span></i></a>
</li>
<li>
<!--<button type="button" class="btn btn-li">-->
<a class="button button1" href="#">
<i class="fa fa-linkedin i">
<span class="btnName">Linkedin</span></i></a>
</li>
<li>
<!--<button type="button" class="btn btn-ins">-->
<a class="button button1" href="#">
<i class="fa fa-instagram i">
<span class="btnName">Instagram</span></i></a>
</li>
<li>
<a class="button button1" href="#">
<i class="fa fa-wordpress i">
<span class="btnName">Wordpress</span></i></a>
</li>
</ul>
</div>
also the code for css
.socialButtons{
display:table;
margin:10px auto;
padding:0;
}
.nolistmark .button{
display:flex;
}
.nolistmark .button .fa:before{
width:25px;
margin-right:1rem;
}
.nolistmark .button1{float:none;}
also I have a filing that display:table and display:flex; ;might be conflicting.
PaulOB
October 18, 2020, 6:12pm
23
What problem is it causing for you?
It looked ok when I checked previously but I may have missed something.
I donât see anything, it loks very good. apart from that I have still a few problems. as I look the input fields , the âheadâ part of the field containing icon has different at almost every field from obvious reason. I tried to make their length same, but not all of them has it, a few of them looks a bit difficult. thank you.reg3
PaulOB
October 19, 2020, 12:27pm
25
You havenât followed the same pattern for each row.
The parent should be display:table (with table-layout:fixed and width:100%). The direct children need to be display:table-cell with vertical-align:top added apart from the postal icon which would be vertical-align:middle.
You also have a load of inline styling over-riding stuff plus you have floated a load of the table-cells. Remove those floats and once youâve tidied that up you can set the dark green area to a fixed width to make them all the same (75px should do).
It should then look like this:
You must be consistent in your approach if you want things to look the same. keep the same structures for each row.
1 Like
thank you for answer. having the code below, I need help to choose parent then make adjustment to the children elements.
<div class="form-group">
<label class="control-label col-sm-3" for="fname">
<span id="fnameRequired" class="glyphicon glyphicon-star starrq"></span> First Name :</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon glyph3 fst-name-glyph">
<i class="glyphicon glyphicon-user widthHeader"></i></span>
<input type="text" class="form-control check inputbgr_reg fst-name-field" id="fname" placeholder="Enter First Name" name="First Name">
</div>
<div class="inputstatus">
<span class="error">Please enter your First name</span>
<span class="feedback"></span>
</div>
</div>
</div>
then next âoverridingâ thing get fixed. thank you.
this is an experiment trying to apply what Iâve learned but I need more help.
<div class="form-group">
<label class="control-label col-sm-3" for="fname">
<span id="fnameRequired" class="glyphicon glyphicon-star starrq"></span> First Name :</label>
<div class="col-sm-9">
<div class="input-group inputGr">
<span class="input-group-addon glyph3 fst-name-glyph inputHdr">
<i class="glyphicon glyphicon-user"></i></span>
<input type="text" class="form-control check inputbgr_reg fst-name-field" id="fname" placeholder="Enter First Name" name="First Name">
</div>
<div class="inputstatus">
<span class="error">Please enter your First name</span>
<span class="feedback"></span>
</div>
</div>
</div>
the css is:
.inputGr{
display: table;
}
.inputHdr{
display:table-cell;
vertical-align:top;
}
thank you.
PaulOB
October 19, 2020, 5:40pm
28
On the contact tel row where you have 3 items you need to wrap an input group around the code.
<div class="col-sm-9">
<div class="input-group group-3">
<span class="input-group-addon glyph3 phone2-glyph">
<i class="fa fa-phone widthHeader" aria-hidden="true"></i>
</span>
<input id="areacode3" type="tel" name="areacode" class="form-control inputbgr_reg phone2-field" placeholder="Area code">
<input id="telnum3" type="tel" name="phone" class="form-control inputbgr_reg phone2-field" placeholder="Phone number">
</div>
</div>
<div class="col-xs-12 col-sm-12">
Then you need to add this CSS:
/* additions here 19:10:2020 */
.input-group{width:100%}
.input-group-addon {width:80px}
.group-3 input.form-control{width:50%;}
input.form-control{float:none;}
The forked codepen is here.
I canât tell but its likely there will be knock on effects as there are still anomalies such as the horizontal scrollbar appearing.
thank you , it is lovely. I would like to ask about the buttons to choose pizza. as the window shrinks the 'Please choose â doesn;t go above buttons as it would be expectable. thank you
As this is getting in to serious CSS issues with no JavaScript involvement, Iâm moving this into the HTML+CSS forum so that others there can weigh in and assist with the presentation work.
2 Likes
PaulOB
October 21, 2020, 4:05pm
31
Thatâs because youâve used different classes to the other elements. You have col-xs-3 and col-xs-9 on the dropdown row but on the items before you have col-sm-3 and col-sm-9.
Iâve changed it in the codepen and moved the classes onto the .dropdown div because you werenât following the bootstrap grid structure.
thank you for help. I would like to ask , how can I style radio buttons from registration form ( gender )relative easily? thank you.
PaulOB
October 22, 2020, 8:13pm
34
What do you want them to look like?
Itâs not straight forward and can have accessibility issues if not doe correctly.
thank you for answer. I would like it in a same way as my custom checkboxes, to look like the checkboxes. thank you frank.
Then why not simply make them check boxes?
People in general expect radio buttons and check boxes to behave in specific ways. Styling one to look like the other, when its behaviour is not the same, is a recipe for disaster.
ok, I rely on your experience, so it would be great to find a radio button style matching or passing to the checkboxes⌠thank you.
Why do you need to know gender anyway?
Most people are happy to fill out information which they can see is relevant, but get uncomfortable at unnecessary or intrusive questions.
1 Like
thank you for answer. I can remove it but it is to style it partially, partially in database (php-sql) can give an extra search option.
PaulOB
October 23, 2020, 8:58am
40
I have an example here:
The tick effect is a background image using an inline svg. If you want a different image you would need to make it yourself.
1 Like
